Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision a3dd2ad02c65588ad280ceac378d82e9250d1045

Browse source
This commit is contained in:
WPT Sync Bot 2019-10-23 10:27:05 +00:00
parent e26530341b
commit 15e68ad3d3
171 changed files with 2819 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini
View file

@ -34,6 +34,3 @@
[Revoke blob URL after creating Request, will fetch] [Revoke blob URL after creating Request, will fetch]
expected: FAIL expected: FAIL
[Revoke blob URL after calling fetch, fetch should succeed]
expected: FAIL

530
tests/wpt/metadata/MANIFEST.json
View file

File diff suppressed because it is too large Load diff

2
tests/wpt/metadata/css/compositing/mix-blend-mode/mix-blend-mode-animation.html.ini
View file

@ -1,2 +0,0 @@
[mix-blend-mode-animation.html]
expected: FAIL

1
tests/wpt/metadata/css/css-transforms/animation/perspective-interpolation.html.ini
View file

@ -1,4 +1,5 @@
[perspective-interpolation.html] [perspective-interpolation.html]
expected: CRASH
[ perspective interpolation] [ perspective interpolation]
expected: FAIL expected: FAIL

2
tests/wpt/metadata/css/css-ui/outline-006.html.ini
View file

@ -1,2 +0,0 @@
[outline-006.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/attr-in-max.html.ini Normal file
View file

@ -0,0 +1,2 @@
[attr-in-max.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/calc-in-max.html.ini Normal file
View file

@ -0,0 +1,2 @@
[calc-in-max.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/max-20-arguments.html.ini Normal file
View file

@ -0,0 +1,2 @@
[max-20-arguments.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/max-unitless-zero-invalid.html.ini Normal file
View file

@ -0,0 +1,2 @@
[max-unitless-zero-invalid.html]
expected: FAIL

3
tests/wpt/metadata/css/cssom-view/matchMediaAddListener-handleEvent.html.ini
View file

@ -8,3 +8,6 @@
[throws if handleEvent is thruthy and not callable] [throws if handleEvent is thruthy and not callable]
expected: FAIL expected: FAIL
[doesn't look up handleEvent method on callable event listeners]
expected: FAIL

12
tests/wpt/metadata/css/cssom-view/scroll-behavior-smooth-positions.html.ini
View file

@ -53,3 +53,15 @@
[Scroll positions when performing smooth scrolling from (0, 0) to (500, 250) using scrollBy() ] [Scroll positions when performing smooth scrolling from (0, 0) to (500, 250) using scrollBy() ]
expected: FAIL expected: FAIL
[Scroll positions when performing smooth scrolling from 500 to 250 by setting scrollTop ]
expected: FAIL
[Scroll positions when performing smooth scrolling from 1000 to 500 by setting scrollLeft ]
expected: FAIL
[Scroll positions when performing smooth scrolling from 0 to 500 by setting scrollLeft ]
expected: FAIL
[Scroll positions when performing smooth scrolling from 0 to 250 by setting scrollTop ]
expected: FAIL

2
tests/wpt/metadata/css/filter-effects/backdrop-filters-hue-rotate.html.ini
View file

@ -1,2 +0,0 @@
[backdrop-filters-hue-rotate.html]
expected: FAIL

1
tests/wpt/metadata/encoding/single-byte-decoder.html.ini
View file

@ -2,7 +2,6 @@
type: testharness type: testharness
[single-byte-decoder.html?document] [single-byte-decoder.html?document]
expected: TIMEOUT
[ISO-8859-4: iso_8859-4:1988 (document.characterSet and document.inputEncoding)] [ISO-8859-4: iso_8859-4:1988 (document.characterSet and document.inputEncoding)]
expected: FAIL expected: FAIL

10
tests/wpt/metadata/fetch/content-type/response.window.js.ini
View file

@ -312,21 +312,15 @@
[<iframe>: separate response Content-Type: */* text/html] [<iframe>: separate response Content-Type: */* text/html]
expected: FAIL expected: FAIL
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*;charset=gbk] [<iframe>: separate response Content-Type: text/html */*;charset=gbk]
expected: FAIL expected: FAIL
[<iframe>: combined response Content-Type: */* text/html]
expected: FAIL
[<iframe>: combined response Content-Type: text/html */*] [<iframe>: combined response Content-Type: text/html */*]
expected: FAIL expected: FAIL
[<iframe>: separate response Content-Type: text/plain */*] [<iframe>: separate response Content-Type: text/html;x=" text/plain]
expected: FAIL expected: FAIL
[<iframe>: combined response Content-Type: text/html;" \\" text/plain] [<iframe>: separate response Content-Type: text/html;" \\" text/plain]
expected: FAIL expected: FAIL

4
tests/wpt/metadata/fetch/content-type/script.window.js.ini
View file

@ -56,9 +56,9 @@
[separate text/javascript x/x] [separate text/javascript x/x]
expected: FAIL expected: FAIL
[separate text/javascript;charset=windows-1252 error text/javascript] [separate text/javascript error]
expected: FAIL expected: FAIL
[separate text/javascript;charset=windows-1252 text/javascript] [separate text/javascript ]
expected: FAIL expected: FAIL

3
tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
View file

@ -11,6 +11,3 @@
[X-Content-Type-Options%3A%20nosniff%0C] [X-Content-Type-Options%3A%20nosniff%0C]
expected: FAIL expected: FAIL
[X-Content-Type-Options%3A%20%2Cnosniff]
expected: FAIL

6
tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini
View file

@ -13,3 +13,9 @@
[Embedded credentials matching the top-level are treated as network errors for cross-origin URLs.] [Embedded credentials matching the top-level are treated as network errors for cross-origin URLs.]
expected: TIMEOUT expected: TIMEOUT
[Embedded credentials matching the top-level are not treated as network errors for same-origin URLs.]
expected: TIMEOUT
[Embedded credentials matching the top-level are not treated as network errors for relative URLs.]
expected: TIMEOUT

4
tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini
View file

@ -1,4 +0,0 @@
[traverse_the_history_2.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

4
tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
View file

@ -1,4 +0,0 @@
[traverse_the_history_4.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

4
tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
View file

@ -1,4 +0,0 @@
[traverse_the_history_5.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-innerwidth-innerheight.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-innerwidth-innerheight.html] [open-features-negative-innerwidth-innerheight.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for legacy `innerwidth`, `innerheight`] [HTML: window.open `features`: negative values for legacy `innerwidth`, `innerheight`]
expected: FAIL expected: FAIL
[features "innerheight=-404.5" should NOT set "height=404"]
expected: TIMEOUT
[features "innerwidth=-404.5" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=-404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerheight=-404e1" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=-404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerwidth=-404e1" should NOT set "width=404"]
expected: TIMEOUT

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-screenx-screeny.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-screenx-screeny.html] [open-features-negative-screenx-screeny.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for legacy `screenx`, `screeny`] [HTML: window.open `features`: negative values for legacy `screenx`, `screeny`]
expected: FAIL expected: FAIL
[features "screenx=-204" should NOT set "left=204"]
expected: TIMEOUT
[features "screeny=-204" should NOT set "top=204"]
expected: TIMEOUT
[features "screeny=-204.5" should NOT set "top=204"]
expected: TIMEOUT
[features "screeny=-0" should NOT set "top=204"]
expected: TIMEOUT
[features "screenx=-0" should NOT set "left=204"]
expected: TIMEOUT
[features "screenx=-204.5" should NOT set "left=204"]
expected: TIMEOUT

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-top-left.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-top-left.html] [open-features-negative-top-left.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for `top`, `left`] [HTML: window.open `features`: negative values for `top`, `left`]
expected: FAIL expected: FAIL
[features "top=-204" should NOT set "top=204"]
expected: TIMEOUT
[features "top=-204.5" should NOT set "top=204"]
expected: TIMEOUT
[features "left=-204" should NOT set "left=204"]
expected: TIMEOUT
[features "top=-0" should NOT set "top=204"]
expected: TIMEOUT
[features "left=-204.5" should NOT set "left=204"]
expected: TIMEOUT
[features "left=-0" should NOT set "left=204"]
expected: TIMEOUT

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-width-height.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-width-height.html] [open-features-negative-width-height.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for `width`, `height`] [HTML: window.open `features`: negative values for `width`, `height`]
expected: FAIL expected: FAIL
[features "height=-404" should NOT set "height=404"]
expected: TIMEOUT
[features "height=-404e1" should NOT set "height=404"]
expected: TIMEOUT
[features "height=-404.5" should NOT set "height=404"]
expected: TIMEOUT
[features "width=-404" should NOT set "width=404"]
expected: TIMEOUT
[features "width=-404e1" should NOT set "width=404"]
expected: TIMEOUT
[features "width=-404.5" should NOT set "width=404"]
expected: TIMEOUT

34
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-height.html.ini
View file

@ -1,32 +1,48 @@
[open-features-non-integer-height.html] [open-features-non-integer-height.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `height`] [HTML: window.open `features`: non-integer values for feature `height`]
expected: FAIL expected: FAIL
[features "height=405*3" should set "height=405"] [features "height=405*3" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405.32" should set "height=405"] [features "height=405.32" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405e1" should set "height=405"] [features "height=405e1" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405/5" should set "height=405"] [features "height=405/5" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405^4" should set "height=405"] [features "height=405^4" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405.5" should set "height=405"] [features "height=405.5" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405e-1" should set "height=405"] [features "height=405e-1" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405 " should set "height=405"] [features "height=405 " should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=405LLl" should set "height=405"] [features "height=405LLl" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "height=/404" should NOT set "height=404"]
expected: TIMEOUT
[top=0,left=0,width=401,: absence of feature "height" should be treated same as "height=0"]
expected: TIMEOUT
[top=0,left=0: absence of feature "height" should be treated same as "height=0"]
expected: TIMEOUT
[features "height=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "height=L404" should NOT set "height=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-innerheight.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-innerheight.html] [open-features-non-integer-innerheight.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `innerheight`] [HTML: window.open `features`: non-integer values for legacy feature `innerheight`]
expected: FAIL expected: FAIL
[features "innerheight=405e-1" should set "height=405"] [features "innerheight=405e-1" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405LLl" should set "height=405"] [features "innerheight=405LLl" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405^4" should set "height=405"] [features "innerheight=405^4" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405e1" should set "height=405"] [features "innerheight=405e1" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405 " should set "height=405"] [features "innerheight=405 " should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405/5" should set "height=405"] [features "innerheight=405/5" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405.32" should set "height=405"] [features "innerheight=405.32" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405.5" should set "height=405"] [features "innerheight=405.5" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=405*3" should set "height=405"] [features "innerheight=405*3" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "innerheight=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=L404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=/404" should NOT set "height=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-innerwidth.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-innerwidth.html] [open-features-non-integer-innerwidth.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `innerwidth`] [HTML: window.open `features`: non-integer values for legacy feature `innerwidth`]
expected: FAIL expected: FAIL
[features "innerwidth=405e-1" should set "width=405"] [features "innerwidth=405e-1" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405*3" should set "width=405"] [features "innerwidth=405*3" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405.5" should set "width=405"] [features "innerwidth=405.5" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405e1" should set "width=405"] [features "innerwidth=405e1" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405.32" should set "width=405"] [features "innerwidth=405.32" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405 " should set "width=405"] [features "innerwidth=405 " should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405LLl" should set "width=405"] [features "innerwidth=405LLl" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405/5" should set "width=405"] [features "innerwidth=405/5" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=405^4" should set "width=405"] [features "innerwidth=405^4" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "innerwidth=/404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=_404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=L404" should NOT set "width=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-left.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-left.html] [open-features-non-integer-left.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `left`] [HTML: window.open `features`: non-integer values for feature `left`]
expected: FAIL expected: FAIL
[features "left=105e1" should set "left=105"] [features "left=105e1" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105 " should set "left=105"] [features "left=105 " should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105/5" should set "left=105"] [features "left=105/5" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105e-1" should set "left=105"] [features "left=105e-1" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105^4" should set "left=105"] [features "left=105^4" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105LLl" should set "left=105"] [features "left=105LLl" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105.32" should set "left=105"] [features "left=105.32" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105*3" should set "left=105"] [features "left=105*3" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=105.5" should set "left=105"] [features "left=105.5" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "left=L104" should NOT set "left=104"]
expected: TIMEOUT
[features "left=/104" should NOT set "left=104"]
expected: TIMEOUT
[features "left=_104" should NOT set "left=104"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-screenx.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-screenx.html] [open-features-non-integer-screenx.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `screenx`] [HTML: window.open `features`: non-integer values for legacy feature `screenx`]
expected: FAIL expected: FAIL
[features "screenx=105.5" should set "left=105"] [features "screenx=105.5" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105e1" should set "left=105"] [features "screenx=105e1" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105 " should set "left=105"] [features "screenx=105 " should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105*3" should set "left=105"] [features "screenx=105*3" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105e-1" should set "left=105"] [features "screenx=105e-1" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105^4" should set "left=105"] [features "screenx=105^4" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105LLl" should set "left=105"] [features "screenx=105LLl" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105/5" should set "left=105"] [features "screenx=105/5" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=105.32" should set "left=105"] [features "screenx=105.32" should set "left=105"]
expected: FAIL expected: TIMEOUT
[features "screenx=_104" should NOT set "left=104"]
expected: TIMEOUT
[features "screenx=L104" should NOT set "left=104"]
expected: TIMEOUT
[features "screenx=/104" should NOT set "left=104"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-screeny.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-screeny.html] [open-features-non-integer-screeny.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `screeny`] [HTML: window.open `features`: non-integer values for legacy feature `screeny`]
expected: FAIL expected: FAIL
[features "screeny=405^4" should set "height=405"] [features "screeny=405^4" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405e-1" should set "height=405"] [features "screeny=405e-1" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405LLl" should set "height=405"] [features "screeny=405LLl" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405e1" should set "height=405"] [features "screeny=405e1" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405 " should set "height=405"] [features "screeny=405 " should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405/5" should set "height=405"] [features "screeny=405/5" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405*3" should set "height=405"] [features "screeny=405*3" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405.32" should set "height=405"] [features "screeny=405.32" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=405.5" should set "height=405"] [features "screeny=405.5" should set "height=405"]
expected: FAIL expected: TIMEOUT
[features "screeny=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "screeny=L404" should NOT set "height=404"]
expected: TIMEOUT
[features "screeny=/404" should NOT set "height=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-top.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-top.html] [open-features-non-integer-top.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `top`] [HTML: window.open `features`: non-integer values for feature `top`]
expected: FAIL expected: FAIL
[features "top=105/5" should set "top=105"] [features "top=105/5" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105*3" should set "top=105"] [features "top=105*3" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105LLl" should set "top=105"] [features "top=105LLl" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105e-1" should set "top=105"] [features "top=105e-1" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105.32" should set "top=105"] [features "top=105.32" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105e1" should set "top=105"] [features "top=105e1" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105 " should set "top=105"] [features "top=105 " should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105^4" should set "top=105"] [features "top=105^4" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=105.5" should set "top=105"] [features "top=105.5" should set "top=105"]
expected: FAIL expected: TIMEOUT
[features "top=/104" should NOT set "top=104"]
expected: TIMEOUT
[features "top=_104" should NOT set "top=104"]
expected: TIMEOUT
[features "top=L104" should NOT set "top=104"]
expected: TIMEOUT

34
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-width.html.ini
View file

@ -1,32 +1,48 @@
[open-features-non-integer-width.html] [open-features-non-integer-width.html]
type: testharness type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `width`] [HTML: window.open `features`: non-integer values for feature `width`]
expected: FAIL expected: FAIL
[features "width=405^4" should set "width=405"] [features "width=405^4" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405.5" should set "width=405"] [features "width=405.5" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405e1" should set "width=405"] [features "width=405e1" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405 " should set "width=405"] [features "width=405 " should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405.32" should set "width=405"] [features "width=405.32" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405LLl" should set "width=405"] [features "width=405LLl" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405*3" should set "width=405"] [features "width=405*3" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405e-1" should set "width=405"] [features "width=405e-1" should set "width=405"]
expected: FAIL expected: TIMEOUT
[features "width=405/5" should set "width=405"] [features "width=405/5" should set "width=405"]
expected: FAIL expected: TIMEOUT
[top=0,left=0: absence of feature "width" should be treated same as "width=0"]
expected: TIMEOUT
[features "width=_404" should NOT set "width=404"]
expected: TIMEOUT
[top=0,left=0,height=401,: absence of feature "width" should be treated same as "width=0"]
expected: TIMEOUT
[features "width=/404" should NOT set "width=404"]
expected: TIMEOUT
[features "width=L404" should NOT set "width=404"]
expected: TIMEOUT

4
tests/wpt/metadata/html/interaction/focus/the-autofocus-attribute/update-the-rendering.html.ini
View file

@ -1,5 +1,7 @@
[update-the-rendering.html] [update-the-rendering.html]
expected: TIMEOUT
["Flush autofocus candidates" should be happen after the first animation frame callbacks, and before a resize event in the next iteration of window event loop.] ["Flush autofocus candidates" should be happen after the first animation frame callbacks, and before a resize event in the next iteration of window event loop.]
expected: TIMEOUT expected: TIMEOUT
["Flush autofocus candidates" should be happen before a scroll event and animation frame callbacks]
expected: FAIL

3
tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
View file

@ -1,5 +1,6 @@
[iframe_sandbox_popups_nonescaping-1.html] [iframe_sandbox_popups_nonescaping-1.html]
type: testharness type: testharness
expected: TIMEOUT
[Check that popups from a sandboxed iframe do not escape the sandbox] [Check that popups from a sandboxed iframe do not escape the sandbox]
expected: FAIL expected: NOTRUN

2
tests/wpt/metadata/html/semantics/forms/form-submission-0/form-double-submit-3.html.ini
View file

@ -1,5 +1,5 @@
[form-double-submit-3.html] [form-double-submit-3.html]
expected: ERROR expected: ERROR
[<button> should have the same double-submit protection as <input type=submit>] [<button> should have the same double-submit protection as <input type=submit>]
expected: TIMEOUT expected: FAIL

2
tests/wpt/metadata/html/semantics/forms/form-submission-0/form-double-submit.html.ini
View file

@ -1,5 +1,5 @@
[form-double-submit.html] [form-double-submit.html]
expected: ERROR expected: ERROR
[default submit action should supersede onclick submit()] [default submit action should supersede onclick submit()]
expected: FAIL expected: TIMEOUT

9
tests/wpt/metadata/url/url-setters.html.ini
View file

@ -1041,3 +1041,12 @@
[<area>: Setting <data:text/plain,Stuff>.hostname = 'example.net' Cannot-be-a-base means no host] [<area>: Setting <data:text/plain,Stuff>.hostname = 'example.net' Cannot-be-a-base means no host]
expected: FAIL expected: FAIL
[<area>: Setting <ssh://me@example.net>.protocol = 'https']
expected: FAIL
[<a>: Setting <ssh://me@example.net>.protocol = 'https']
expected: FAIL
[URL: Setting <ssh://me@example.net>.protocol = 'https']
expected: FAIL

4
tests/wpt/metadata/webxr/ar-module/idlharness.https.window.js.ini
View file

@ -1,4 +0,0 @@
[idlharness.https.window.html]
[idl_test validation]
expected: FAIL

1
tests/wpt/metadata/workers/semantics/multiple-workers/005.html.ini
View file

@ -1,5 +1,4 @@
[005.html] [005.html]
expected: ERROR
[dedicated worker in shared worker in dedicated worker] [dedicated worker in shared worker in dedicated worker]
expected: FAIL expected: FAIL

3
tests/wpt/mozilla/meta/css/canvas_linear_gradient_a.html.ini
View file

@ -1,3 +0,0 @@
[canvas_linear_gradient_a.html]
type: reftest
expected: FAIL

3
tests/wpt/mozilla/meta/css/filter_sepia_a.html.ini
View file

@ -1,3 +0,0 @@
[filter_sepia_a.html]
type: reftest
expected: FAIL

2
tests/wpt/mozilla/meta/gfx-rs-gecko/opacity-background-1.html.ini
View file

@ -1,2 +0,0 @@
[opacity-background-1.html]
expected: FAIL

2
tests/wpt/web-platform-tests/.azure-pipelines.yml
View file

@ -60,7 +60,7 @@ jobs:
displayName: './wpt test-jobs' displayName: './wpt test-jobs'
condition: eq(variables['Build.Reason'], 'PullRequest') condition: eq(variables['Build.Reason'], 'PullRequest')
pool: pool:
vmImage: 'ubuntu-16.04' vmImage: 'ubuntu-18.04'
steps: steps:
- template: tools/ci/azure/checkout.yml - template: tools/ci/azure/checkout.yml
- script: | - script: |

96
tests/wpt/web-platform-tests/IndexedDB/structured-clone-transaction-state.any.js Normal file
View file

@ -0,0 +1,96 @@
// META: script=support-promises.js
// META: title=Indexed DB transaction state during Structured Serializing
// META: timeout=long
'use strict';
promise_test(async testCase => {
const db = await createDatabase(testCase, database => {
database.createObjectStore('store');
});
const transaction = db.transaction(['store'], 'readwrite');
const objectStore = transaction.objectStore('store');
let getterCalled = false;
const activeValue = {};
Object.defineProperty(activeValue, 'propertyName', {
enumerable: true,
get: testCase.step_func(() => {
getterCalled = true;
assert_throws('TransactionInactiveError', () => {
objectStore.get('key');
}, 'transaction should not be active during structured clone');
return 'value that should not be used';
}),
});
objectStore.add(activeValue, 'key');
await promiseForTransaction(testCase, transaction);
db.close();
assert_true(getterCalled,
"activeValue's getter should be called during test");
}, 'Transaction inactive during structured clone in IDBObjectStore.add()');
promise_test(async testCase => {
const db = await createDatabase(testCase, database => {
database.createObjectStore('store');
});
const transaction = db.transaction(['store'], 'readwrite');
const objectStore = transaction.objectStore('store');
let getterCalled = false;
const activeValue = {};
Object.defineProperty(activeValue, 'propertyName', {
enumerable: true,
get: testCase.step_func(() => {
getterCalled = true;
assert_throws('TransactionInactiveError', () => {
objectStore.get('key');
}, 'transaction should not be active during structured clone');
return 'value that should not be used';
}),
});
objectStore.put(activeValue, 'key');
await promiseForTransaction(testCase, transaction);
db.close();
assert_true(getterCalled,
"activeValue's getter should be called during test");
}, 'Transaction inactive during structured clone in IDBObjectStore.put()');
promise_test(async testCase => {
const db = await createDatabase(testCase, database => {
const objectStore = database.createObjectStore('store');
objectStore.put({}, 'key');
});
const transaction = db.transaction(['store'], 'readwrite');
const objectStore = transaction.objectStore('store');
let getterCalled = false;
const activeValue = {};
Object.defineProperty(activeValue, 'propertyName', {
enumerable: true,
get: testCase.step_func(() => {
getterCalled = true;
assert_throws('TransactionInactiveError', () => {
objectStore.get('key');
}, 'transaction should not be active during structured clone');
return 'value that should not be used';
}),
});
const request = objectStore.openCursor();
request.onsuccess = testCase.step_func(() => {
const cursor = request.result;
cursor.update(activeValue);
});
await promiseForTransaction(testCase, transaction);
db.close();
assert_true(getterCalled,
"activeValue's getter should be called during test");
}, 'Transaction inactive during structured clone in IDBCursor.update()');

41
tests/wpt/web-platform-tests/animation-worklet/inactive-timeline.https.html
View file

@ -49,6 +49,16 @@ function setupAndRegisterTests() {
promise_test(async t => { promise_test(async t => {
const animation = createScrollLinkedWorkletAnimation(t); const animation = createScrollLinkedWorkletAnimation(t);
const scroller = animation.timeline.scrollSource; const scroller = animation.timeline.scrollSource;
const target = animation.effect.target;
// There is no direct way to control when local times of composited
// animations are synced to the main thread. This test uses another
// composited worklet animation with an always active timeline as an
// indicator of when the sync is ready. The sync is done when animation
// effect's output has changed as a result of advancing the timeline.
const animationRef = createScrollLinkedWorkletAnimation(t);
const scrollerRef = animationRef.timeline.scrollSource;
const targetRef = animationRef.effect.target;
const maxScroll = scroller.scrollHeight - scroller.clientHeight; const maxScroll = scroller.scrollHeight - scroller.clientHeight;
const timeRange = animation.timeline.timeRange; const timeRange = animation.timeline.timeRange;
@ -60,6 +70,7 @@ function setupAndRegisterTests() {
scroller.scrollTop; scroller.scrollTop;
animation.play(); animation.play();
animationRef.play();
assert_equals(animation.currentTime, null, assert_equals(animation.currentTime, null,
'Initial current time must be unresolved in idle state.'); 'Initial current time must be unresolved in idle state.');
assert_equals(animation.startTime, null, assert_equals(animation.startTime, null,
@ -72,6 +83,17 @@ function setupAndRegisterTests() {
assert_equals(animation.startTime, null, assert_equals(animation.startTime, null,
'Initial start time must be unresolved in playing state.'); 'Initial start time must be unresolved in playing state.');
scrollerRef.scrollTop = 0.2 * maxScroll;
// Wait until local times are synced back to the main thread.
await waitForAnimationFrameWithCondition(_ => {
return animationRef.effect.getComputedTiming().localTime == 200;
});
assert_equals(animation.effect.getComputedTiming().localTime, null,
'The underlying effect local time must be undefined while the ' +
'timeline is inactive.');
// Make the timeline active. // Make the timeline active.
scroller.style.display = "" scroller.style.display = ""
scroller.scrollTop; scroller.scrollTop;
@ -81,6 +103,15 @@ function setupAndRegisterTests() {
assert_times_equal(animation.startTime, 0, assert_times_equal(animation.startTime, 0,
'Start time must be initialized.'); 'Start time must be initialized.');
scrollerRef.scrollTop = 0.4 * maxScroll;
// Wait until local times are synced back to the main thread.
await waitForAnimationFrameWithCondition(_ => {
return animationRef.effect.getComputedTiming().localTime == 400;
});
assert_times_equal(animation.effect.getComputedTiming().localTime, 200,
'When the timeline becomes newly active, the underlying effect\'s ' +
'timing should be properly updated.');
// Make the timeline inactive again. // Make the timeline inactive again.
scroller.style.display = "none" scroller.style.display = "none"
scroller.scrollTop; scroller.scrollTop;
@ -90,6 +121,16 @@ function setupAndRegisterTests() {
assert_equals(animation.startTime, null, assert_equals(animation.startTime, null,
'Initial start time must be unresolved.'); 'Initial start time must be unresolved.');
scrollerRef.scrollTop = 0.6 * maxScroll;
scrollerRef.scrollTop;
// Wait until local times are synced back to the main thread.
await waitForAnimationFrameWithCondition(_ => {
return animationRef.effect.getComputedTiming().localTime == 600;
});
assert_times_equal(animation.effect.getComputedTiming().localTime, 200,
'When the timeline becomes newly inactive, the underlying effect\'s ' +
'timing should stay unchanged.');
}, 'When timeline time becomes inactive previous current time must be ' + }, 'When timeline time becomes inactive previous current time must be ' +
'the current time and start time unresolved'); 'the current time and start time unresolved');
done(); done();

18
tests/wpt/web-platform-tests/content-security-policy/connect-src/connect-src-beacon-allowed.sub.html
View file

@ -19,19 +19,19 @@ connect-src 'self' http://{{host}}:{{ports[http][0]}}; script-src 'self' 'unsafe
window.addEventListener('securitypolicyviolation', function(e) { window.addEventListener('securitypolicyviolation', function(e) {
log("FAIL"); log("FAIL");
}); });
if (typeof navigator.sendBeacon != 'function') { if (typeof navigator.sendBeacon != 'function') {
t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test."); t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test.");
t_log.phase = t_log.phases.HAS_RESULT; t_log.phase = t_log.phases.HAS_RESULT;
t_log.done(); t_log.done();
} else { } else {
try { try {
var es = navigator.sendBeacon("http://{{host}}:{{ports[http][0]}}/cors/resources/status.py"); var es = navigator.sendBeacon("http://{{host}}:{{ports[http][0]}}/cors/resources/status.py");
log("Pass"); log("Pass");
} catch (e) { } catch (e) {
log("Fail"); log("Fail");
} }
} }
</script> </script>
<div id="log"></div> <div id="log"></div>
</body> </body>

26
tests/wpt/web-platform-tests/content-security-policy/connect-src/connect-src-beacon-blocked.sub.html
View file

@ -3,7 +3,7 @@
<head> <head>
<!-- Programmatically converted from a WebKit Reftest, please forgive resulting idiosyncracies.--> <!-- Programmatically converted from a WebKit Reftest, please forgive resulting idiosyncracies.-->
<meta http-equiv="Content-Security-Policy" content="connect-src 'self'; script-src 'self' 'unsafe-inline';"> <meta http-equiv="Content-Security-Policy" content="connect-src 'self'; script-src 'self' 'unsafe-inline';">
<title>connect-src-beacon-blocked</title> <title>connect-src-beacon-blocked</title>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
@ -16,22 +16,22 @@ connect-src 'self' http://{{host}}:{{ports[http][0]}}; script-src 'self' 'unsafe
<body> <body>
<script> <script>
window.addEventListener('securitypolicyviolation', function(e) { window.addEventListener('securitypolicyviolation', function(e) {
log("violated-directive=" + e.violatedDirective); log("violated-directive=" + e.violatedDirective);
}); });
if (typeof navigator.sendBeacon != 'function') { if (typeof navigator.sendBeacon != 'function') {
t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test."); t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test.");
t_log.phase = t_log.phases.HAS_RESULT; t_log.phase = t_log.phases.HAS_RESULT;
t_log.done(); t_log.done();
} else { } else {
try { try {
var es = navigator.sendBeacon("http://www1.{{host}}:{{ports[http][0]}}/security/contentSecurityPolicy/echo-report.php"); var es = navigator.sendBeacon("http://www1.{{host}}:{{ports[http][0]}}/security/contentSecurityPolicy/echo-report.php");
log("Pass"); log("Pass");
} catch (e) { } catch (e) {
log("Fail"); log("Fail");
} }
} }
</script> </script>
<div id="log"></div> <div id="log"></div>
</body> </body>

10
tests/wpt/web-platform-tests/content-security-policy/connect-src/connect-src-beacon-redirect-to-blocked.sub.html
View file

@ -16,12 +16,12 @@
<p>The beacon should not follow the redirect to http://www1.{{host}}:{{ports[http][0]}}/content-security-policy/support/fail.png and send a CSP violation report.</p> <p>The beacon should not follow the redirect to http://www1.{{host}}:{{ports[http][0]}}/content-security-policy/support/fail.png and send a CSP violation report.</p>
<p>Verify that a CSP connect-src directive blocks redirects.</p> <p>Verify that a CSP connect-src directive blocks redirects.</p>
<script> <script>
window.addEventListener('securitypolicyviolation', function(e) { window.addEventListener('securitypolicyviolation', function(e) {
log("violated-directive=" + e.violatedDirective); log("violated-directive=" + e.violatedDirective);
}); });
if (typeof navigator.sendBeacon != 'function') { if (typeof navigator.sendBeacon != 'function') {
t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test."); t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test.");
t_log.phase = t_log.phases.HAS_RESULT; t_log.phase = t_log.phases.HAS_RESULT;
t_log.done(); t_log.done();
} else { } else {

4
tests/wpt/web-platform-tests/content-security-policy/frame-ancestors/frame-ancestors-nested-cross-in-sandboxed-cross-url-block.html
View file

@ -8,9 +8,9 @@
<body> <body>
<script> <script>
test = async_test("A 'frame-ancestors' CSP directive with a URL value should compare against each frame's origin rather than URL, " + test = async_test("A 'frame-ancestors' CSP directive with a URL value should compare against each frame's origin rather than URL, " +
"so a nested frame with a sandboxed parent frame should be blocked due to the parent having a unique origin."); "so a nested frame with a sandboxed parent frame should be blocked due to the parent having a unique origin.");
testNestedSandboxedIFrame(SAMEORIGIN_ORIGIN + " " + CROSSORIGIN_ORIGIN, CROSS_ORIGIN, CROSS_ORIGIN, EXPECT_BLOCK); testNestedSandboxedIFrame(SAMEORIGIN_ORIGIN + " " + CROSSORIGIN_ORIGIN, CROSS_ORIGIN, CROSS_ORIGIN, EXPECT_BLOCK);
</script> </script>
</body> </body>
</html> </html>

10
tests/wpt/web-platform-tests/content-security-policy/media-src/media-src-7_3_2.sub.html
View file

@ -15,14 +15,14 @@
async_test("Disallowed track element onerror handler fires."); async_test("Disallowed track element onerror handler fires.");
var trackURL = location.protocol + "//{{domains[www]}}:{{ports[http][0]}}/media/foo.vtt"; var trackURL = location.protocol + "//{{domains[www]}}:{{ports[http][0]}}/media/foo.vtt";
var t_spv = async_test("Test that securitypolicyviolation events are fired"); var t_spv = async_test("Test that securitypolicyviolation events are fired");
var test_count = 1; var test_count = 1;
window.addEventListener("securitypolicyviolation", t_spv.step_func(function(e) { window.addEventListener("securitypolicyviolation", t_spv.step_func(function(e) {
assert_equals(e.violatedDirective, "media-src"); assert_equals(e.violatedDirective, "media-src");
assert_equals(e.blockedURI, trackURL); assert_equals(e.blockedURI, trackURL);
if (--test_count <= 0) { if (--test_count <= 0) {
t_spv.done(); t_spv.done();
} }
})); }));
@ -62,9 +62,9 @@
setTimeout(function() { setTimeout(function() {
if(source_test.phase != source_test.phases.COMPLETE) { if(source_test.phase != source_test.phases.COMPLETE) {
source_test.step( function () { assert_unreached("Onerror event never fired for track element."); }); source_test.step( function () { assert_unreached("Onerror event never fired for track element."); });
source_test.done(); source_test.done();
} }
}, 2 * 1000); }, 2 * 1000);
</script> </script>

2
tests/wpt/web-platform-tests/content-security-policy/reporting/report-cross-origin-no-cookies.sub.html
View file

@ -12,7 +12,7 @@
<body> <body>
<script> <script>
promise_test(function(test) { promise_test(function(test) {
const path = encodeURIComponent("{{domains[www1]}}:{{ports[http][0]}}/"); const path = encodeURIComponent("{{domains[www1]}}:{{ports[http][0]}}/");
return fetch( return fetch(
"/cookies/resources/set-cookie.py?name=cspViolationReportCookie1&path=" + path, "/cookies/resources/set-cookie.py?name=cspViolationReportCookie1&path=" + path,
{mode: 'no-cors', credentials: 'include'}) {mode: 'no-cors', credentials: 'include'})

4
tests/wpt/web-platform-tests/content-security-policy/script-src/scripthash-unicode-normalization.sub.html
View file

@ -49,9 +49,9 @@
script1.test.done(); script1.test.done();
}); });
} else { } else {
script1.test.step(function() { script1.test.step(function() {
assert_unreached("nonMatchingContent script ran"); assert_unreached("nonMatchingContent script ran");
}); });
} }
} }

24
tests/wpt/web-platform-tests/css/css-align/distribution-values/space-evenly-001.html
View file

@ -11,22 +11,22 @@
<link rel=help href="https://drafts.csswg.org/css-flexbox-1/#justify-content-property"> <link rel=help href="https://drafts.csswg.org/css-flexbox-1/#justify-content-property">
<style> <style>
.red { .red {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
width: 100px; width: 100px;
height: 100px; height: 100px;
background: red; background: red;
} }
.container { .container {
margin-left: -100px; margin-left: -100px;
width: 300px; width: 300px;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
.container div { .container div {
width: 100px; width: 100px;
height: 100px; height: 100px;
background: green; background: green;
} }
</style> </style>

44
tests/wpt/web-platform-tests/css/css-align/reference/ttwf-reftest-alignContent-ref.html
View file

@ -5,33 +5,33 @@
<link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com"> <link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-align/#align-content"> <link rel="help" href="http://www.w3.org/TR/css3-align/#align-content">
<style type="text/css"> <style type="text/css">
#main{ #main{
display:table; display:table;
position:relative; position:relative;
font-size:0; font-size:0;
width:70px; width:70px;
border:1px solid #c3c3c3; border:1px solid #c3c3c3;
} }
#main .sample{ #main .sample{
position:absolute; position:absolute;
left:0; left:0;
top:50%; top:50%;
z-index:-1; z-index:-1;
margin:-35px 0 0; margin:-35px 0 0;
} }
#main > span{ #main > span{
display:inline-block; display:inline-block;
width:70px; width:70px;
height:70px; height:70px;
margin:50px 0; margin:50px 0;
} }
</style> </style>
</head> </head>
<body> <body>
<p>PASS if there is no red box.</p> <p>PASS if there is no red box.</p>
<div id="main"> <div id="main">
<span class="sample" style="background-color:red;"></span> <span class="sample" style="background-color:red;"></span>
<span style="background-color:green;"></span> <span style="background-color:green;"></span>
</div> </div>
</body> </body>
</html> </html>

48
tests/wpt/web-platform-tests/css/css-align/ttwf-reftest-alignContent.html
View file

@ -5,35 +5,35 @@
<link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com"> <link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-align/#content-distribution"> <link rel="help" href="http://www.w3.org/TR/css3-align/#content-distribution">
<style type="text/css"> <style type="text/css">
#main{ #main{
display:flex; display:flex;
flex-flow:row wrap; flex-flow:row wrap;
align-content:space-around; align-content:space-around;
position:relative; position:relative;
width:70px; width:70px;
height:170px; height:170px;
border:1px solid #c3c3c3; border:1px solid #c3c3c3;
} }
#main .sample{ #main .sample{
position:absolute; position:absolute;
left:0; left:0;
top:50%; top:50%;
z-index:-1; z-index:-1;
margin:-35px 0 0; margin:-35px 0 0;
} }
#main > span{ #main > span{
display:inline-block; display:inline-block;
width:70px; width:70px;
height:70px; height:70px;
vertical-align:middle; vertical-align:middle;
} }
</style> </style>
</head> </head>
<body> <body>
<p>PASS if there is no red box.</p> <p>PASS if there is no red box.</p>
<div id="main"> <div id="main">
<span class="sample" style="background-color:red;"></span> <span class="sample" style="background-color:red;"></span>
<span style="background-color:green;"></span> <span style="background-color:green;"></span>
</div> </div>
</body> </body>
</html> </html>

25
tests/wpt/web-platform-tests/css/css-counter-styles/ethiopic-numeric/css3-counter-styles-068.html
View file

@ -18,18 +18,19 @@ ol li { list-style-type: ethiopic-numeric; }
<p class="instructions">Test passes if the two columns are the same, ignoring the suffix.</p> <p class="instructions">Test passes if the two columns are the same, ignoring the suffix.</p>
<div class='test'><ol> <div class='test'>
<li title='1'>፩.</li> <ol>
<li title='2'>፪.</li> <li title='1'>፩.</li>
<li title='3'>፫.</li> <li title='2'>፪.</li>
<li title='4'>፬.</li> <li title='3'>፫.</li>
<li title='5'>፭.</li> <li title='4'>፬.</li>
<li title='6'>፮.</li> <li title='5'>፭.</li>
<li title='7'>፯.</li> <li title='6'>፮.</li>
<li title='8'>፰.</li> <li title='7'>፯.</li>
<li title='9'>፱.</li> <li title='8'>፰.</li>
</ol> <li title='9'>፱.</li>
</div> </ol>
</div>
<!--Notes: <!--Notes:

150
tests/wpt/web-platform-tests/css/css-counter-styles/ethiopic-numeric/css3-counter-styles-069.html
View file

@ -18,85 +18,77 @@ ol li { list-style-type: ethiopic-numeric; }
<p class="instructions">Test passes if the two columns are the same, ignoring the suffix.</p> <p class="instructions">Test passes if the two columns are the same, ignoring the suffix.</p>
<div class='test'><ol start='10'> <div class='test'>
<li title='10'>፲.</li> <ol start='10'>
<li title='11'>፲፩.</li> <li title='10'>፲.</li>
<li title='12'>፲፪.</li> <li title='11'>፲፩.</li>
</ol> <li title='12'>፲፪.</li>
</ol>
<ol start='43'> <ol start='43'>
<li title='43'>፵፫.</li> <li title='43'>፵፫.</li>
</ol> </ol>
<ol start='77'> <ol start='77'>
<li title='77'>፸፯.</li> <li title='77'>፸፯.</li>
</ol> </ol>
<ol start='80'> <ol start='80'>
<li title='80'>፹.</li>
<li title='80'>፹.</li> </ol>
</ol> <ol start='99'>
<ol start='99'> <li title='99'>፺፱.</li>
<li title='99'>፺፱.</li> <li title='100'>፻.</li>
<li title='100'>፻.</li> <li title='101'>፻፩.</li>
<li title='101'>፻፩.</li> </ol>
<ol start='222'>
</ol> <li title='222'>፪፻፳፪.</li>
<ol start='222'> </ol>
<li title='222'>፪፻፳፪.</li> <ol start='540'>
</ol> <li title='540'>፭፻፵.</li>
<ol start='540'> </ol>
<li title='540'>፭፻፵.</li> <ol start='999'>
</ol> <li title='999'>፱፻፺፱.</li>
<li title='1000'>፲፻.</li>
<ol start='999'> </ol>
<li title='999'>፱፻፺፱.</li> <ol start='1005'>
<li title='1000'>፲፻.</li> <li title='1005'>፲፻፭.</li>
</ol> </ol>
<ol start='1005'> <ol start='1060'>
<li title='1005'>፲፻፭.</li> <li title='1060'>፲፻፷.</li>
</ol>
</ol> <ol start='1065'>
<ol start='1060'> <li title='1065'>፲፻፷፭.</li>
<li title='1060'>፲፻፷.</li> </ol>
</ol> <ol start='1800'>
<ol start='1065'> <li title='1800'>፲፰፻.</li>
<li title='1065'>፲፻፷፭.</li> </ol>
</ol> <ol start='1860'>
<li title='1860'>፲፰፻፷.</li>
<ol start='1800'> </ol>
<li title='1800'>፲፰፻.</li> <ol start='1865'>
</ol> <li title='1865'>፲፰፻፷፭.</li>
<ol start='1860'> </ol>
<li title='1860'>፲፰፻፷.</li> <ol start='5865'>
</ol> <li title='5865'>፶፰፻፷፭.</li>
<ol start='1865'> </ol>
<ol start='7005'>
<li title='1865'>፲፰፻፷፭.</li> <li title='7005'>፸፻፭.</li>
</ol> </ol>
<ol start='5865'> <ol start='7800'>
<li title='5865'>፶፰፻፷፭.</li> <li title='7800'>፸፰፻.</li>
</ol> </ol>
<ol start='7005'> <ol start='7864'>
<li title='7005'>፸፻፭.</li> <li title='7864'>፸፰፻፷፬.</li>
</ol>
</ol> <ol start='9999'>
<ol start='7800'> <li title='9999'>፺፱፻፺፱.</li>
<li title='7800'>፸፰፻.</li> <li title='10000'>፼.</li>
</ol> </ol>
<ol start='7864'> <ol start='78010092'>
<li title='7864'>፸፰፻፷፬.</li> <li title='78010092'>፸፰፻፩፼፺፪.</li>
</ol> </ol>
<ol start='1000001'>
<ol start='9999'> <li title='1000001'>፻፼፩.</li>
<li title='9999'>፺፱፻፺፱.</li> </ol>
<li title='10000'>፼.</li> </div>
</ol>
<ol start='78010092'>
<li title='78010092'>፸፰፻፩፼፺፪.</li>
</ol>
<ol start='1000001'>
<li title='1000001'>፻፼፩.</li>
</ol>
</div>
<!--Notes: <!--Notes:

8
tests/wpt/web-platform-tests/css/css-counter-styles/ethiopic-numeric/css3-counter-styles-070.html
View file

@ -19,10 +19,10 @@ ol li { list-style-type: ethiopic-numeric; }
<div class='test'> <div class='test'>
<ol start='1'> <ol start='1'>
<li title='1'>፩/ </li> <li title='1'>፩/ </li>
</ol> </ol>
</div> </div>
<!--Notes: <!--Notes:

40
tests/wpt/web-platform-tests/css/css-flexbox/flexbox_align-items-stretch-4.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>Auto cross margins and align-items: stretch</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="" />
<meta name="assert" content="Auto cross margins prevent an item from stretching." />
<link rel="bookmark" href="https://crbug.com/1015475" />
<style>
x-flexbox {
display: flex;
/* This makes auto margins prevent stretching without affecting position. Without
it the auto margins make the item move to the center of the window. */
width: 100px;
}
.item-with-auto-margin {
background: green;
margin: auto;
}
.pct-height-child {
height: 100%;
width: 100px;
background: red;
}
.second-child {
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<x-flexbox>
<div class=item-with-auto-margin>
<div class="pct-height-child"></div>
<div class="second-child"></div>
</div>
</x-flexbox>

286
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html
View file

@ -49,71 +49,71 @@ h3 { font-size: 1em; }
<div class="floatLeft"> <div class="floatLeft">
<h3>Only fit-content() and with fixed size tracks.</h3> <h3>Only fit-content() and with fixed size tracks.</h3>
<div class="grid"> <div class="grid">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 30px 0px;"> <div class="grid" style="grid-template-columns: 30px 0px;">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="spanningItem">XXX</div> <div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 40px;"> <div class="grid" style="grid-template-columns: 40px;">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: auto auto;"> <div class="grid" style="grid-template-columns: auto auto;">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 40px auto;"> <div class="grid" style="grid-template-columns: 40px auto;">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 80px;"> <div class="grid" style="grid-template-columns: 80px;">
<div class="item">XXX XXX XXX</div> <div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: auto auto;"> <div class="grid" style="grid-template-columns: auto auto;">
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 25px 70px;"> <div class="grid" style="grid-template-columns: 25px 70px;">
<div class="item autoRowSecondColumn">XXX XXX XXX</div> <div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 20px 50px;"> <div class="grid" style="grid-template-columns: 20px 50px;">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 40px 40px;"> <div class="grid" style="grid-template-columns: 40px 40px;">
<div class="item">XXXXX</div> <div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 15px 80px;"> <div class="grid" style="grid-template-columns: 15px 80px;">
<div class="item autoRowSecondColumn">XXXXX</div> <div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
</div> </div>
@ -121,139 +121,139 @@ h3 { font-size: 1em; }
<div class="floatLeft"> <div class="floatLeft">
<h3>fit-content() with other content-sized tracks.</h3> <h3>fit-content() with other content-sized tracks.</h3>
<div class="grid" style="grid-template-columns: 12.5px 82.5px;"> <div class="grid" style="grid-template-columns: 12.5px 82.5px;">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 50px 45px;"> <div class="grid" style="grid-template-columns: 50px 45px;">
<div class="item">XXXXX</div> <div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 0px 95px;"> <div class="grid" style="grid-template-columns: 0px 95px;">
<div class="item autoRowSecondColumn">XXXXX</div> <div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 12.5px 40px;"> <div class="grid" style="grid-template-columns: 12.5px 40px;">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 50px 40px;"> <div class="grid" style="grid-template-columns: 50px 40px;">
<div class="item">XXXXX</div> <div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 0px 50px;"> <div class="grid" style="grid-template-columns: 0px 50px;">
<div class="item autoRowSecondColumn">XXXXX</div> <div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: auto min-content max-content"> <div class="grid" style="grid-template-columns: auto min-content max-content">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content auto max-content"> <div class="grid" style="grid-template-columns: min-content auto max-content">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content max-content auto"> <div class="grid" style="grid-template-columns: min-content max-content auto">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 30px 0px 60px;"> <div class="grid" style="grid-template-columns: 30px 0px 60px;">
<div class="item" style="grid-column: 1">XXX XX</div> <div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 30px 0px 60px;"> <div class="grid" style="grid-template-columns: 30px 0px 60px;">
<div class="item" style="grid-column: 1">XXX XX</div> <div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 0px 90px 0px;"> <div class="grid" style="grid-template-columns: 0px 90px 0px;">
<div class="item" style="grid-column: 2">XXX XX</div> <div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
</div> </div>
<div class="floatLeft"> <div class="floatLeft">
<h3>fit-content() with percentage arguments.</h3> <h3>fit-content() with percentage arguments.</h3>
<div class="grid" style="grid-template-columns: 30px;"> <div class="grid" style="grid-template-columns: 30px;">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 30px 0px;"> <div class="grid" style="grid-template-columns: 30px 0px;">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="spanningItem">XXX</div> <div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 30px;"> <div class="grid" style="grid-template-columns: 30px;">
<div class="item">XX XX</div> <div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 30px 30px;"> <div class="grid" style="grid-template-columns: 30px 30px;">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 30px 30px;"> <div class="grid" style="grid-template-columns: 30px 30px;">
<div class="item autoRowSecondColumn">X X X</div> <div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 90px;"> <div class="grid" style="grid-template-columns: 90px;">
<div class="item">XXX XXX XXX</div> <div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 47.5px 47.5px;"> <div class="grid" style="grid-template-columns: 47.5px 47.5px;">
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 15px 80px;"> <div class="grid" style="grid-template-columns: 15px 80px;">
<div class="item autoRowSecondColumn">XXX XXX XXX</div> <div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
</div> </div>
@ -261,71 +261,71 @@ h3 { font-size: 1em; }
<h3>max-content &lt; fit-content() argument.</h3> <h3>max-content &lt; fit-content() argument.</h3>
<div class="grid" style="grid-template-columns: 70px;"> <div class="grid" style="grid-template-columns: 70px;">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 32.5px 32.5px;"> <div class="grid" style="grid-template-columns: 32.5px 32.5px;">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 70px 0px;"> <div class="grid" style="grid-template-columns: 70px 0px;">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 32.5px 32.5px;"> <div class="grid" style="grid-template-columns: 32.5px 32.5px;">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 45px 20px;"> <div class="grid" style="grid-template-columns: 45px 20px;">
<div class="item autoRowSecondColumn">XX</div> <div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 92.5px 12.5px;"> <div class="grid" style="grid-template-columns: 92.5px 12.5px;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: 82.5px 12.5px;"> <div class="grid" style="grid-template-columns: 82.5px 12.5px;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: max-content auto max-content;"> <div class="grid" style="grid-template-columns: max-content auto max-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content auto min-content;"> <div class="grid" style="grid-template-columns: min-content auto min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: auto auto auto;"> <div class="grid" style="grid-template-columns: auto auto auto;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>

288
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html
View file

@ -73,71 +73,71 @@ h3 { font-size: 1em; }
<div class="floatLeft"> <div class="floatLeft">
<h3>Only fit-content() and with fixed size tracks.</h3> <h3>Only fit-content() and with fixed size tracks.</h3>
<div class="grid fc0"> <div class="grid fc0">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid fc0x2"> <div class="grid fc0x2">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="spanningItem">XXX</div> <div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc40"> <div class="grid fc40">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid fc40x2"> <div class="grid fc40x2">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc40x2"> <div class="grid fc40x2">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc80"> <div class="grid fc80">
<div class="item">XXX XXX XXX</div> <div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid fc80x2"> <div class="grid fc80x2">
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc80x2"> <div class="grid fc80x2">
<div class="item autoRowSecondColumn">XXX XXX XXX</div> <div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(20px) 50%;"> <div class="grid" style="grid-template-columns: fit-content(20px) 50%;">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-content(40px);"> <div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-content(40px);">
<div class="item">XXXXX</div> <div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(40px) minmax(10%, 200px);"> <div class="grid" style="grid-template-columns: fit-content(40px) minmax(10%, 200px);">
<div class="item autoRowSecondColumn">XXXXX</div> <div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
</div> </div>
@ -145,139 +145,139 @@ h3 { font-size: 1em; }
<div class="floatLeft"> <div class="floatLeft">
<h3>fit-content() with other content-sized tracks.</h3> <h3>fit-content() with other content-sized tracks.</h3>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;"> <div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;"> <div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="item">XXXXX</div> <div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;"> <div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="item autoRowSecondColumn">XXXXX</div> <div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);"> <div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);"> <div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="item">XXXXX</div> <div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);"> <div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="item autoRowSecondColumn">XXXXX</div> <div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content"> <div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content"> <div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)"> <div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content"> <div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
<div class="item" style="grid-column: 1">XXX XX</div> <div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content"> <div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
<div class="item" style="grid-column: 1">XXX XX</div> <div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)"> <div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
<div class="item" style="grid-column: 2">XXX XX</div> <div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div> <div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
</div> </div>
<div class="floatLeft"> <div class="floatLeft">
<h3>fit-content() with percentage arguments.</h3> <h3>fit-content() with percentage arguments.</h3>
<div class="grid fc0p"> <div class="grid fc0p">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid fc0px2"> <div class="grid fc0px2">
<div class="item">XXX</div> <div class="item">XXX</div>
<div class="spanningItem">XXX</div> <div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc30p"> <div class="grid fc30p">
<div class="item">XX XX</div> <div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid fc30px2"> <div class="grid fc30px2">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc30px2"> <div class="grid fc30px2">
<div class="item autoRowSecondColumn">X X X</div> <div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc90p"> <div class="grid fc90p">
<div class="item">XXX XXX XXX</div> <div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid fc90px2"> <div class="grid fc90px2">
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc90px2"> <div class="grid fc90px2">
<div class="item autoRowSecondColumn">XXX XXX XXX</div> <div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div> <div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
</div> </div>
@ -285,71 +285,71 @@ h3 { font-size: 1em; }
<h3>max-content &lt; fit-content() argument.</h3> <h3>max-content &lt; fit-content() argument.</h3>
<div class="grid fc110"> <div class="grid fc110">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
</div> </div>
<div class="grid fc110x2"> <div class="grid fc110x2">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid fc110x2"> <div class="grid fc110x2">
<div class="item">XXX XXX</div> <div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);"> <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);"> <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
<div class="item autoRowSecondColumn">XX</div> <div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: max-content fit-content(110px);"> <div class="grid" style="grid-template-columns: max-content fit-content(110px);">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: fit-content(110px) min-content;"> <div class="grid" style="grid-template-columns: fit-content(110px) min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: max-content fit-content(110px) max-content;"> <div class="grid" style="grid-template-columns: max-content fit-content(110px) max-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: min-content fit-content(110px) min-content;"> <div class="grid" style="grid-template-columns: min-content fit-content(110px) min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>
<div class="grid" style="grid-template-columns: auto fit-content(110px) auto;"> <div class="grid" style="grid-template-columns: auto fit-content(110px) auto;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div> <div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div> <div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div> <div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div> <div class="test autoRowThirdColumn"></div>
</div> </div>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation"> <link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="When the image doesn't load, the background color is still there to ensure that the white text is readable."> <meta name="assert" content="When the image doesn't load, the background color is still there to ensure that the white text is readable.">
<style type="text/css"> <style type="text/css">
.square{ .square{
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: red; background-color: red;
background: image("green.png", green); background: image("green.png", green);
} }
</style> </style>
</head> </head>
<body> <body>

18
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations002.html
View file

@ -4,16 +4,16 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation"> <link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function load the image."> <meta name="assert" content="The 'image()' function load the image.">
<style type="text/css"> <style type="text/css">
.square{ .square{
width: 200px; width: 200px;
height: 200px; height: 200px;
color: white; color: white;
background-color: red; background-color: red;
background-image: image("support/1x1-green.png"); background-image: image("support/1x1-green.png");
} }
</style> </style>
</head> </head>
<body> <body>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations003.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation"> <link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file."> <meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file.">
<style type="text/css"> <style type="text/css">
.square{ .square{
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: red; background-color: red;
background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif"); background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif");
} }
</style> </style>
</head> </head>
<body> <body>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations004.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation"> <link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file."> <meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file.">
<style type="text/css"> <style type="text/css">
.square{ .square{
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: red; background-color: red;
background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif"); background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif");
} }
</style> </style>
</head> </head>
<body> <body>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations005.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation"> <link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> <link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color."> <meta name="assert" content="The 'image()' function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.">
<style type="text/css"> <style type="text/css">
.square{ .square{
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: red; background-color: red;
background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png"); background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png");
} }
</style> </style>
</head> </head>
<body> <body>

4
tests/wpt/web-platform-tests/css/css-images/gradients-with-transparent.html
View file

@ -18,9 +18,9 @@
} }
</style> </style>
<body> <body>
<p>Gradient using 'transparent'</p> <p>Gradient using 'transparent'</p>
<div id="gradient1" class="test"></div> <div id="gradient1" class="test"></div>
<br /> <br />
<p>Gradient using rgba(0,0,255,0)</p> <p>Gradient using rgba(0,0,255,0)</p>
<div id="gradient2" class="test"></div> <div id="gradient2" class="test"></div>
</body> </body>

14
tests/wpt/web-platform-tests/css/css-images/image-fit-001.xht
View file

@ -7,14 +7,14 @@
<meta name="assert" content="The initial value of the 'object-fit' property is 'fill'."/> <meta name="assert" content="The initial value of the 'object-fit' property is 'fill'."/>
<style type="text/css"><![CDATA[ <style type="text/css"><![CDATA[
img { img {
background: red; background: red;
height: 100px; height: 100px;
width: 50px; width: 50px;
} }
]]></style> ]]></style>
</head> </head>
<body> <body>
<div>A green block appears below. There must be no red on the page.</div> <div>A green block appears below. There must be no red on the page.</div>
<div><img src="support/swatch-green.png" alt="Failed: image missing"/></div> <div><img src="support/swatch-green.png" alt="Failed: image missing"/></div>
</body> </body>
</html> </html>

18
tests/wpt/web-platform-tests/css/css-images/image-fit-006.xht
View file

@ -8,16 +8,16 @@
<meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'."/> <meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'."/>
<style type="text/css"><![CDATA[ <style type="text/css"><![CDATA[
img { img {
border: 5px solid blue; border: 5px solid blue;
height: 50px; height: 50px;
width: 100px; width: 100px;
object-fit: fill; object-fit: fill;
background: red; background: red;
} }
]]></style> ]]></style>
</head> </head>
<body> <body>
<div>The image below should fill the blue border with no red between the border and the image.</div> <div>The image below should fill the blue border with no red between the border and the image.</div>
<div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div> <div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div>
</body> </body>
</html> </html>

144
tests/wpt/web-platform-tests/css/css-lists/list-style-type-armenian-002.xht
View file

@ -24,78 +24,78 @@ ol { margin: 0; padding-left: 8em; }
<div class="test"> <div class="test">
<ol class="armenian"> <ol class="armenian">
<li title="1">Ա</li> <li title="1">Ա</li>
<li title="2">Բ</li> <li title="2">Բ</li>
<li title="3">Գ</li> <li title="3">Գ</li>
<li title="4">Դ</li> <li title="4">Դ</li>
<li title="5">Ե</li> <li title="5">Ե</li>
<li title="6">Զ</li> <li title="6">Զ</li>
<li title="7">Է</li> <li title="7">Է</li>
<li title="8">Ը</li> <li title="8">Ը</li>
<li title="9">Թ</li> <li title="9">Թ</li>
<li title="10">Ժ</li> <li title="10">Ժ</li>
<li title="11">ԺԱ</li> <li title="11">ԺԱ</li>
<li title="12">ԺԲ</li> <li title="12">ԺԲ</li>
</ol> </ol>
<ol class="armenian" start="43"> <ol class="armenian" start="43">
<li title="43">ԽԳ</li> <li title="43">ԽԳ</li>
</ol> </ol>
<ol class="armenian" start="77"> <ol class="armenian" start="77">
<li title="77">ՀԷ</li> <li title="77">ՀԷ</li>
</ol> </ol>
<ol class="armenian" start="80"> <ol class="armenian" start="80">
<li title="80">Ձ</li> <li title="80">Ձ</li>
</ol> </ol>
<ol class="armenian" start="99"> <ol class="armenian" start="99">
<li title="99">ՂԹ</li> <li title="99">ՂԹ</li>
<li title="100">Ճ</li> <li title="100">Ճ</li>
<li title="101">ՃԱ</li> <li title="101">ՃԱ</li>
</ol> </ol>
<ol class="armenian" start="222"> <ol class="armenian" start="222">
<li title="222">ՄԻԲ</li> <li title="222">ՄԻԲ</li>
</ol> </ol>
<ol class="armenian" start="540"> <ol class="armenian" start="540">
<li title="540">ՇԽ</li> <li title="540">ՇԽ</li>
</ol> </ol>
<ol class="armenian" start="999"> <ol class="armenian" start="999">
<li title="999">ՋՂԹ</li> <li title="999">ՋՂԹ</li>
<li title="1000">Ռ</li> <li title="1000">Ռ</li>
</ol> </ol>
<ol class="armenian" start="1005"> <ol class="armenian" start="1005">
<li title="1005">ՌԵ</li> <li title="1005">ՌԵ</li>
</ol> </ol>
<ol class="armenian" start="1060"> <ol class="armenian" start="1060">
<li title="1060">ՌԿ</li> <li title="1060">ՌԿ</li>
</ol> </ol>
<ol class="armenian" start="1065"> <ol class="armenian" start="1065">
<li title="1065">ՌԿԵ</li> <li title="1065">ՌԿԵ</li>
</ol> </ol>
<ol class="armenian" start="1800"> <ol class="armenian" start="1800">
<li title="1800">ՌՊ</li> <li title="1800">ՌՊ</li>
</ol> </ol>
<ol class="armenian" start="1860"> <ol class="armenian" start="1860">
<li title="1860">ՌՊԿ</li> <li title="1860">ՌՊԿ</li>
</ol> </ol>
<ol class="armenian" start="1865"> <ol class="armenian" start="1865">
<li title="1865">ՌՊԿԵ</li> <li title="1865">ՌՊԿԵ</li>
</ol> </ol>
<ol class="armenian" start="5865"> <ol class="armenian" start="5865">
<li title="5865">ՐՊԿԵ</li> <li title="5865">ՐՊԿԵ</li>
</ol> </ol>
<ol class="armenian" start="7005"> <ol class="armenian" start="7005">
<li title="7005">ՈՒԵ</li> <li title="7005">ՈՒԵ</li>
</ol> </ol>
<ol class="armenian" start="7800"> <ol class="armenian" start="7800">
<li title="7800">ՈՒՊ</li> <li title="7800">ՈՒՊ</li>
</ol> </ol>
<ol class="armenian" start="7865"> <ol class="armenian" start="7865">
<li title="7865">ՈՒՊԿԵ</li> <li title="7865">ՈՒՊԿԵ</li>
</ol> </ol>
<ol class="armenian" start="9999"> <ol class="armenian" start="9999">
<li title="9999">ՔՋՂԹ</li> <li title="9999">ՔՋՂԹ</li>
</ol> </ol>
</div> </div>
<!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p--> <!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p-->

22
tests/wpt/web-platform-tests/css/css-lists/list-style-type-armenian-003.xht
View file

@ -24,17 +24,17 @@ ol { margin: 0; padding-left: 8em; }
<div class="test"> <div class="test">
<ol class="armenian" start="10000"> <ol class="armenian" start="10000">
<li title="10,000">Ա̂</li> <li title="10,000">Ա̂</li>
<li title="10,001">Ա̂Ա</li> <li title="10,001">Ա̂Ա</li>
</ol> </ol>
<ol class="armenian" start="55465"> <ol class="armenian" start="55465">
<li title="55,465">Ե̂ՐՆԿԵ</li> <li title="55,465">Ե̂ՐՆԿԵ</li>
</ol> </ol>
<ol class="armenian" start="655465"> <ol class="armenian" start="655465">
<li title="655,465">Կ̂Ե̂ՐՆԿԵ</li> <li title="655,465">Կ̂Ե̂ՐՆԿԵ</li>
</ol> </ol>
</div> </div>
<!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p--> <!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p-->

19
tests/wpt/web-platform-tests/css/css-pseudo/before-in-display-none-crash.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html>
<title>CSS Test: Invalidating style inside display:none with ::before should not crash.</title>
<link rel="help" href="https://crbug.com/1013570">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#outer { display: none }
#outer::before { content: " "; }
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)");
inner.style.color = "green";
assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)");
}, "Invalidating style inside display:none with ::before should not crash.");
</script>

36
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-001-ref.html
View file

@ -1,25 +1,25 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Reference File</title> <title>CSS Reference File</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<style> <style>
div { div {
font-size: 50px; font-size: 50px;
position: absolute; position: absolute;
left: 30px; left: 30px;
top: 50px; top: 50px;
} }
div span { div span {
color: green; color: green;
background: green; background: green;
float: left; float: left;
} }
</style> </style>
</head> </head>
<body> <body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div><span>a</span></div> <div><span>a</span></div>
</body> </body>
</html> </html>

52
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-001.html
View file

@ -1,33 +1,33 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title> <title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html"> <link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content=""> <meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter follows the usual formating rules for floats."> <meta name="assert" content="Test checks that a floated ::first-letter follows the usual formating rules for floats.">
<style> <style>
div { div {
font-size: 50px; font-size: 50px;
position: absolute; position: absolute;
left: 30px; left: 30px;
top: 50px; top: 50px;
background: red; background: red;
} }
span { span {
background : white; background : white;
} }
div::first-letter { div::first-letter {
color: green; color: green;
background: green; background: green;
float: left; float: left;
} }
</style> </style>
</head> </head>
<body> <body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div>a<span>&nbsp;</span></div> <div>a<span>&nbsp;</span></div>
</body> </body>
</html> </html>

56
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-002.html
View file

@ -1,35 +1,35 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title> <title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html"> <link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content=""> <meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content."> <meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
<style> <style>
div { div {
font-size: 50px; font-size: 50px;
position: absolute; position: absolute;
left: 30px; left: 30px;
top: 50px; top: 50px;
} }
#d1 span { #d1 span {
color: red; color: red;
background: red; background: red;
float: left; float: left;
} }
#d2::first-letter { #d2::first-letter {
color: green; color: green;
background: green; background: green;
float: left; float: left;
} }
</style> </style>
</head> </head>
<body> <body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div id="d1"><span>a</span></div> <div id="d1"><span>a</span></div>
<div id="d2">a</div> <div id="d2">a</div>
</body> </body>
</html> </html>

56
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-003.html
View file

@ -1,35 +1,35 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title> <title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html"> <link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content=""> <meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content."> <meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
<style> <style>
div { div {
font-size: 50px; font-size: 50px;
position: absolute; position: absolute;
left: 30px; left: 30px;
top: 50px; top: 50px;
} }
#d1::first-letter { #d1::first-letter {
color: red; color: red;
background: red; background: red;
float: left; float: left;
} }
#d2 span { #d2 span {
color: green; color: green;
background: green; background: green;
float: left; float: left;
} }
</style> </style>
</head> </head>
<body> <body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div id="d1">a</div> <div id="d1">a</div>
<div id="d2"><span>a</span></div> <div id="d2"><span>a</span></div>
</body> </body>
</html> </html>

26
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-width-ref.html
View file

@ -2,19 +2,19 @@
<meta charset="utf-8"> <meta charset="utf-8">
<html lang="en"> <html lang="en">
<head> <head>
<title>initial-letter width test</title> <title>initial-letter width test</title>
<style> <style>
span { span {
position: absolute; position: absolute;
color: transparent; color: transparent;
} }
#control { #control {
background-color: green; background-color: green;
} }
</style> </style>
</head> </head>
<body> <body>
<p>There should be no red</p> <p>There should be no red</p>
<span id="control">Test.</span> <span id="control">Test.</span>
</body> </body>
</html> </html>

62
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-width.html
View file

@ -2,37 +2,37 @@
<meta charset="utf-8"> <meta charset="utf-8">
<html lang="en"> <html lang="en">
<head> <head>
<title>initial-letter width test</title> <title>initial-letter width test</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=362880"> <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=362880">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<link rel="match" href="first-letter-width-ref.html"> <link rel="match" href="first-letter-width-ref.html">
<meta name="assert" content="The width of an element with first-letter styling should render correctly."> <meta name="assert" content="The width of an element with first-letter styling should render correctly.">
<style> <style>
div { div {
position: relative; position: relative;
} }
span { span {
position: absolute; position: absolute;
color: transparent; color: transparent;
} }
#control { #control {
background-color: green; background-color: green;
} }
#test { #test {
background-color: red; background-color: red;
line-height: 1; line-height: 1;
top: 1px; top: 1px;
} }
#test::first-letter { #test::first-letter {
text-transform: uppercase; text-transform: uppercase;
} }
</style> </style>
</head> </head>
<body> <body>
<p>There should be no red</p> <p>There should be no red</p>
<div> <div>
<span id="test">Test</span> <span id="test">Test</span>
<span id="control">Test.</span> <span id="control">Test.</span>
</div> </div>
</body> </body>
</html> </html>

40
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-001.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="flags" content="dom"> <meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if shape is invalid"> <meta name="assert" content="shape-outside declaration is invalid if shape is invalid">
<title>CSS Shapes Test - shape-outside invalid shape</title> <title>CSS Shapes Test - shape-outside invalid shape</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com"> <link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
#shape{ #shape{
width: 300px; width: 300px;
height: 300px; height: 300px;
shape-outside: invalid(50px,50px,50px,50px); shape-outside: invalid(50px,50px,50px,50px);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="log"></div> <div id="log"></div>
<div id="shape"></div> <div id="shape"></div>
<script> <script>
var obj = document.getElementById('shape'); var obj = document.getElementById('shape');
var shapeOutside = getComputedStyle(obj).shapeOutside; var shapeOutside = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(shapeOutside, "none", "declaration should be Invalid")}); test(function() {assert_equals(shapeOutside, "none", "declaration should be Invalid")});
</script> </script>
</body> </body>
</html> </html>

44
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-circle-002.html
View file

@ -1,36 +1,36 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="flags" content="dom"> <meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if cy for circle function is invalid"> <meta name="assert" content="shape-outside declaration is invalid if cy for circle function is invalid">
<title>CSS Shapes Test - Circle - invalid cy value</title> <title>CSS Shapes Test - Circle - invalid cy value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com"> <link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
#shape{ #shape{
width: 300px; width: 300px;
height: 300px; height: 300px;
shape-outside: circle(50% at 50% 50); shape-outside: circle(50% at 50% 50);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="log"></div> <div id="log"></div>
<div id="shape"></div> <div id="shape"></div>
<script> <script>
var obj = document.getElementById('shape'); var obj = document.getElementById('shape');
var cy = getComputedStyle(obj).shapeOutside; var cy = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(cy, "none", "declaration should be Invalid")}); test(function() {assert_equals(cy, "none", "declaration should be Invalid")});
</script> </script>
</body> </body>
</html> </html>

46
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-circle-003.html
View file

@ -1,36 +1,36 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="flags" content="dom"> <meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if circle shape function has an invalid cx param"> <meta name="assert" content="shape-outside declaration is invalid if circle shape function has an invalid cx param">
<title>CSS Shapes Test: Circle - invalid cx value</title> <title>CSS Shapes Test: Circle - invalid cx value</title>
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com"> <link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen --> <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
#shape{ #shape{
width: 300px; width: 300px;
height: 300px; height: 300px;
shape-outside: circle(50, 50%); shape-outside: circle(50, 50%);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="log"></div> <div id="log"></div>
<div id="shape"></div> <div id="shape"></div>
<script> <script>
var obj = document.getElementById('shape'); var obj = document.getElementById('shape');
var cx = getComputedStyle(obj).shapeOutside; var cx = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(cx, "none", "declaration should be invalid")}); test(function() {assert_equals(cx, "none", "declaration should be invalid")});
</script> </script>
</body> </body>
</html> </html>

42
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-ellipse-004.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="flags" content="dom"> <meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if ellipse function has one invalid argument"> <meta name="assert" content="shape-outside declaration is invalid if ellipse function has one invalid argument">
<title>CSS Shapes Test - Ellipse - invalid 1 arg</title> <title>CSS Shapes Test - Ellipse - invalid 1 arg</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com"> <link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
#shape{ #shape{
width: 300px; width: 300px;
height: 300px; height: 300px;
shape-outside: ellipse(50); shape-outside: ellipse(50);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="log"></div> <div id="log"></div>
<div id="shape"></div> <div id="shape"></div>
<script> <script>
var obj = document.getElementById('shape'); var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside; var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")}); test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script> </script>
</body> </body>
</html> </html>

42
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-ellipse-005.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="flags" content="dom"> <meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if cy in ellipse function is invalid"> <meta name="assert" content="shape-outside declaration is invalid if cy in ellipse function is invalid">
<title>CSS Shapes Test - Ellipse - invalid cy value</title> <title>CSS Shapes Test - Ellipse - invalid cy value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com"> <link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
#shape{ #shape{
width: 300px; width: 300px;
height: 300px; height: 300px;
shape-outside: ellipse(50%, 50, 50%, 50%); shape-outside: ellipse(50%, 50, 50%, 50%);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="log"></div> <div id="log"></div>
<div id="shape"></div> <div id="shape"></div>
<script> <script>
var obj = document.getElementById('shape'); var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside; var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")}); test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script> </script>
</body> </body>
</html> </html>

42
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-ellipse-006.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="flags" content="dom"> <meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if cx in ellipse function is invalid"> <meta name="assert" content="shape-outside declaration is invalid if cx in ellipse function is invalid">
<title>CSS Shapes Test - Ellipse - invalid cx value</title> <title>CSS Shapes Test - Ellipse - invalid cx value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com"> <link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"> <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
#shape{ #shape{
width: 300px; width: 300px;
height: 300px; height: 300px;
shape-outside: ellipse(50, 50%, 50%, 50%); shape-outside: ellipse(50, 50%, 50%, 50%);
} }
</style> </style>
</head> </head>
<body> <body>
<div id="log"></div> <div id="log"></div>
<div id="shape"></div> <div id="shape"></div>
<script> <script>
var obj = document.getElementById('shape'); var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside; var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")}); test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script> </script>
</body> </body>
</html> </html>

4
tests/wpt/web-platform-tests/css/css-shapes/spec-examples/support/rounded-triangle.svg
View file

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
<g> <g>
<path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5 <path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5
C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/> C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/>
</g> </g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 314 B

Before After
Before After

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-001.html
View file

@ -3,26 +3,26 @@
<head> <head>
<title>CSS Test: voice-family age keywords</title> <title>CSS Test: voice-family age keywords</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca"> <link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com"> <link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com"> <link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family"> <link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech"> <meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family render the text in child, young, and old voices, respectively."> <meta name="assert" content="The child, young, and old values of voice-family render the text in child, young, and old voices, respectively.">
<style> <style>
p.child { voice-family: child; } p.child { voice-family: child; }
p.young { voice-family: young; } p.young { voice-family: young; }
p.old { voice-family: old; } p.old { voice-family: old; }
</style> </style>
</head> </head>
<body> <body>
<p class="child">This sentence should be read in a child's voice.</p> <p class="child">This sentence should be read in a child's voice.</p>
<p class="young">This sentence should be read in a young voice.</p> <p class="young">This sentence should be read in a young voice.</p>
<p class="old">This sentence should be read in a old voice.</p> <p class="old">This sentence should be read in a old voice.</p>
</body> </body>
</html> </html>

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-female-001.html
View file

@ -3,26 +3,26 @@
<head> <head>
<title>CSS Test: voice-family age keywords + femal</title> <title>CSS Test: voice-family age keywords + femal</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca"> <link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com"> <link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com"> <link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family"> <link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech"> <meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family +femal render the text in child, young, and old female voices, respectively."> <meta name="assert" content="The child, young, and old values of voice-family +femal render the text in child, young, and old female voices, respectively.">
<style> <style>
p.child_f { voice-family: child female; } p.child_f { voice-family: child female; }
p.young_f { voice-family: young female; } p.young_f { voice-family: young female; }
p.old_f { voice-family: old female; } p.old_f { voice-family: old female; }
</style> </style>
</head> </head>
<body> <body>
<p class="child_f">This sentence should be read in a child's female voice.</p> <p class="child_f">This sentence should be read in a child's female voice.</p>
<p class="young_f">This sentence should be read in a young female voice.</p> <p class="young_f">This sentence should be read in a young female voice.</p>
<p class="old_f">This sentence should be read in a old female voice.</p> <p class="old_f">This sentence should be read in a old female voice.</p>
</body> </body>
</html> </html>

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-male-001.html
View file

@ -3,26 +3,26 @@
<head> <head>
<title>CSS Test: voice-family age keywords + male</title> <title>CSS Test: voice-family age keywords + male</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca"> <link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com"> <link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com"> <link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family"> <link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech"> <meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family +male render the text in child, young, and old male voices, respectively."> <meta name="assert" content="The child, young, and old values of voice-family +male render the text in child, young, and old male voices, respectively.">
<style> <style>
p.child_m { voice-family: child male; } p.child_m { voice-family: child male; }
p.young_m { voice-family: young male; } p.young_m { voice-family: young male; }
p.old_m { voice-family: old male; } p.old_m { voice-family: old male; }
</style> </style>
</head> </head>
<body> <body>
<p class="child_m">This sentence should be read in a child's male voice.</p> <p class="child_m">This sentence should be read in a child's male voice.</p>
<p class="young_m">This sentence should be read in a young male voice.</p> <p class="young_m">This sentence should be read in a young male voice.</p>
<p class="old_m">This sentence should be read in a old male voice.</p> <p class="old_m">This sentence should be read in a old male voice.</p>
</body> </body>
</html> </html>

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-neutral-001.html
View file

@ -3,26 +3,26 @@
<head> <head>
<title>CSS Test: voice-family age keywords + neutral</title> <title>CSS Test: voice-family age keywords + neutral</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca"> <link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com"> <link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com"> <link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family"> <link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech"> <meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family + neutral render the text in child, young, and old neutral voices, respectively."> <meta name="assert" content="The child, young, and old values of voice-family + neutral render the text in child, young, and old neutral voices, respectively.">
<style> <style>
p.child_n { voice-family: child neutral; } p.child_n { voice-family: child neutral; }
p.young_n { voice-family: young neutral; } p.young_n { voice-family: young neutral; }
p.old_n { voice-family: old neutral; } p.old_n { voice-family: old neutral; }
</style> </style>
</head> </head>
<body> <body>
<p class="child_n">This sentence should be read in a child's neutral voice.</p> <p class="child_n">This sentence should be read in a child's neutral voice.</p>
<p class="young_n">This sentence should be read in a young neutral voice.</p> <p class="young_n">This sentence should be read in a young neutral voice.</p>
<p class="old_n">This sentence should be read in a old neutral voice.</p> <p class="old_n">This sentence should be read in a old neutral voice.</p>
</body> </body>
</html> </html>

16
tests/wpt/web-platform-tests/css/css-speech/generic-gender-declarations-001.html
View file

@ -8,18 +8,18 @@
<meta name="assert" content="The male, female, and neutral values of voice-family render the text in male, female, and neutral voices, respectively."> <meta name="assert" content="The male, female, and neutral values of voice-family render the text in male, female, and neutral voices, respectively.">
<style> <style>
p.male { voice-family: male; } p.male { voice-family: male; }
p.female { voice-family: female; } p.female { voice-family: female; }
p.neutral { voice-family: neutral; } p.neutral { voice-family: neutral; }
</style> </style>
</head> </head>
<body> <body>
<p class="male">This sentence should be read in a male voice.</p> <p class="male">This sentence should be read in a male voice.</p>
<p class="female">This sentence should be read in a female voice.</p> <p class="female">This sentence should be read in a female voice.</p>
<p class="neutral">This sentence should be read in a "neutral" voice.</p> <p class="neutral">This sentence should be read in a "neutral" voice.</p>
</body> </body>
</html> </html>

2
tests/wpt/web-platform-tests/css/css-speech/no-voice-family-specified-001.html
View file

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<p>This sentence should be read in the user's preferred voice.</p> <p>This sentence should be read in the user's preferred voice.</p>
</body> </body>
</html> </html>

6
tests/wpt/web-platform-tests/css/css-transitions/support/vendorPrefix.js
View file

@ -9,9 +9,9 @@ var prefixCache = {};
// convert "foo-bar" to "fooBar" // convert "foo-bar" to "fooBar"
function camelCase(str) { function camelCase(str) {
return str.replace(/\-(\w)/g, function(match, letter){ return str.replace(/\-(\w)/g, function(match, letter){
return letter.toUpperCase(); return letter.toUpperCase();
}); });
} }
// vendor-prefix a css property // vendor-prefix a css property

28
tests/wpt/web-platform-tests/css/css-values/attr-in-max.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: attr() in max()</title>
<meta name="assert" content="The attr() function notation is allowed inside a max() notation.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values/#attr-notation">
<link rel="help" href="https://drafts.csswg.org/css-values/#calc-notation">
<link rel="match" href="reference/200-200-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: white; overflow: hidden; }
#outer { position: relative; background: green; }
#outer { width: max(attr(data-test length)); height: 200px; }
</style>
</head>
<body>
<div id="outer" data-test="200px"></div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-values/calc-in-max.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: calc() in max()</title>
<meta name="assert" content="The calc() function notation is allowed inside a max() notation.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-syntax">
<link rel="match" href="reference/all-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: red; overflow: hidden; }
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
#outer { height: max(calc(100%)); }
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-values/max-20-arguments.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: max() with 20 arguments</title>
<meta name="assert" content="UAs must support math function expressions of at least 20 terms.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-syntax">
<link rel="match" href="reference/all-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: red; overflow: hidden; }
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
#outer { height: max(5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%); }
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-values/max-unitless-zero-invalid.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: min() with unitless 0</title>
<meta name="assert" content="Unitless 0 isn't supported in math functions.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values/#calc-type-checking">
<link rel="match" href="reference/all-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: red; overflow: hidden; }
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
#outer {
/* Assert that min() is supported */
height: min(100%);
/* The min() expression (thus the declaration) should be invalid */
height: min(0, 100%);
}
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

12
tests/wpt/web-platform-tests/css/css-variables/reference/vars-background-shorthand-001-ref.html
View file

@ -3,12 +3,12 @@
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me"> <link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
<style> <style>
div { div {
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 50px; padding: 50px;
margin: 10px; margin: 10px;
display: inline-block; display: inline-block;
background: green; background: green;
} }
</style> </style>
<p>Test passes if you see four green squares, and no red.</p> <p>Test passes if you see four green squares, and no red.</p>

20
tests/wpt/web-platform-tests/css/css-variables/reference/vars-font-shorthand-001-ref.html
View file

@ -2,19 +2,19 @@
<title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title> <title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title>
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me"> <link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
<style> <style>
div { div {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: 10px; margin: 10px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background: green; background: green;
text-align: center; text-align: center;
color: green; color: green;
overflow: hidden; overflow: hidden;
} }
</style> </style>

28
tests/wpt/web-platform-tests/css/css-variables/vars-background-shorthand-001.html
View file

@ -5,32 +5,32 @@
<link rel="match" href="reference/vars-background-shorthand-001-ref.html"> <link rel="match" href="reference/vars-background-shorthand-001-ref.html">
<style> <style>
div { div {
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 50px; padding: 50px;
margin: 10px; margin: 10px;
display: inline-block; display: inline-block;
background: red; background: red;
} }
div#d1 { div#d1 {
--foo: green; --foo: green;
background: var(--foo); background: var(--foo);
} }
div#d2 { div#d2 {
--foo: green, green; --foo: green, green;
background: linear-gradient(var(--foo)); background: linear-gradient(var(--foo));
} }
div#d3 { div#d3 {
--foo: linear-gradient(green, green); --foo: linear-gradient(green, green);
background: var(--foo); background: var(--foo);
} }
div#d4 { div#d4 {
--foo: center / 0 0; --foo: center / 0 0;
background: green linear-gradient(red, red) var(--foo, ); background: green linear-gradient(red, red) var(--foo, );
} }
</style> </style>
<p>Test passes if you see four green squares, and no red.</p> <p>Test passes if you see four green squares, and no red.</p>

50
tests/wpt/web-platform-tests/css/css-variables/vars-font-shorthand-001.html
View file

@ -8,49 +8,49 @@
<style> <style>
div { div {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: 10px; margin: 10px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background: red; background: red;
text-align: center; text-align: center;
color: green; color: green;
overflow: hidden; overflow: hidden;
} }
div#d1 { div#d1 {
--foo: Ahem; --foo: Ahem;
font-family: var(--foo); font-family: var(--foo);
font-size: 150px; font-size: 150px;
line-height: 1; line-height: 1;
} }
div#d2 { div#d2 {
--foo: 0 Ahem; --foo: 0 Ahem;
font: var(--foo); font: var(--foo);
font-size: 150px; font-size: 150px;
line-height: 150px; line-height: 150px;
} }
div#d3 { div#d3 {
--foo: Ahem, sans-serif; --foo: Ahem, sans-serif;
font: 150px/1 var(--foo); font: 150px/1 var(--foo);
} }
div#d4 { div#d4 {
--foo: Ahem; --foo: Ahem;
font: 150px/1 var(--foo), sans-serif; font: 150px/1 var(--foo), sans-serif;
} }
div#d5 { div#d5 {
--foo: 1 Ahem; --foo: 1 Ahem;
font: 150px/var(--foo); font: 150px/var(--foo);
} }
div#d6 { div#d6 {
--foo: 150px/1 Ahem; --foo: 150px/1 Ahem;
font: var(--foo); font: var(--foo);
} }
</style> </style>
<p>Test passes if you see six green squares, and no red.</p> <p>Test passes if you see six green squares, and no red.</p>

Some files were not shown because too many files have changed in this diff Show more