Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-25 17:44:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 070df683f5a7999245622eec274974903c3560c2

Browse source
This commit is contained in:
WPT Sync Bot 2019-12-28 08:23:13 +00:00
parent a0c99d2327
commit 53226b4df1
49 changed files with 2300 additions and 227 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

@ -2,6 +2,9 @@
[Revoke blob URL after creating Request, will fetch]
expected: FAIL
[Revoke blob URL after calling fetch, fetch should succeed]
expected: FAIL
[url-with-fetch.any.html]
[Revoke blob URL after creating Request, will fetch]

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

@ -319660,12 +319660,24 @@
{}
]
],
"css/css-align/animation/column-gap-composition.html": [
[
"css/css-align/animation/column-gap-composition.html",
{}
]
],
"css/css-align/animation/column-gap-interpolation.html": [
[
"css/css-align/animation/column-gap-interpolation.html",
{}
]
],
"css/css-align/animation/row-gap-composition.html": [
[
"css/css-align/animation/row-gap-composition.html",
{}
]
],
"css/css-align/animation/row-gap-interpolation.html": [
[
"css/css-align/animation/row-gap-interpolation.html",
@ -321298,18 +321310,66 @@
{}
]
],
"css/css-box/animation/margin-bottom-composition.html": [
[
"css/css-box/animation/margin-bottom-composition.html",
{}
]
],
"css/css-box/animation/margin-interpolation.html": [
[
"css/css-box/animation/margin-interpolation.html",
{}
]
],
"css/css-box/animation/margin-left-composition.html": [
[
"css/css-box/animation/margin-left-composition.html",
{}
]
],
"css/css-box/animation/margin-right-composition.html": [
[
"css/css-box/animation/margin-right-composition.html",
{}
]
],
"css/css-box/animation/margin-top-composition.html": [
[
"css/css-box/animation/margin-top-composition.html",
{}
]
],
"css/css-box/animation/padding-bottom-composition.html": [
[
"css/css-box/animation/padding-bottom-composition.html",
{}
]
],
"css/css-box/animation/padding-interpolation.html": [
[
"css/css-box/animation/padding-interpolation.html",
{}
]
],
"css/css-box/animation/padding-left-composition.html": [
[
"css/css-box/animation/padding-left-composition.html",
{}
]
],
"css/css-box/animation/padding-right-composition.html": [
[
"css/css-box/animation/padding-right-composition.html",
{}
]
],
"css/css-box/animation/padding-top-composition.html": [
[
"css/css-box/animation/padding-top-composition.html",
{}
]
],
"css/css-box/box-chrome-crash-001.html": [
[
"css/css-box/box-chrome-crash-001.html",
@ -328824,12 +328884,24 @@
{}
]
],
"css/css-shapes/animation/shape-margin-composition.html": [
[
"css/css-shapes/animation/shape-margin-composition.html",
{}
]
],
"css/css-shapes/animation/shape-margin-interpolation.html": [
[
"css/css-shapes/animation/shape-margin-interpolation.html",
{}
]
],
"css/css-shapes/animation/shape-outside-composition.html": [
[
"css/css-shapes/animation/shape-outside-composition.html",
{}
]
],
"css/css-shapes/animation/shape-outside-interpolation.html": [
[
"css/css-shapes/animation/shape-outside-interpolation.html",
@ -329490,36 +329562,72 @@
{}
]
],
"css/css-sizing/animation/height-composition.html": [
[
"css/css-sizing/animation/height-composition.html",
{}
]
],
"css/css-sizing/animation/height-interpolation.html": [
[
"css/css-sizing/animation/height-interpolation.html",
{}
]
],
"css/css-sizing/animation/max-height-composition.html": [
[
"css/css-sizing/animation/max-height-composition.html",
{}
]
],
"css/css-sizing/animation/max-height-interpolation.html": [
[
"css/css-sizing/animation/max-height-interpolation.html",
{}
]
],
"css/css-sizing/animation/max-width-composition.html": [
[
"css/css-sizing/animation/max-width-composition.html",
{}
]
],
"css/css-sizing/animation/max-width-interpolation.html": [
[
"css/css-sizing/animation/max-width-interpolation.html",
{}
]
],
"css/css-sizing/animation/min-height-composition.html": [
[
"css/css-sizing/animation/min-height-composition.html",
{}
]
],
"css/css-sizing/animation/min-height-interpolation.html": [
[
"css/css-sizing/animation/min-height-interpolation.html",
{}
]
],
"css/css-sizing/animation/min-width-composition.html": [
[
"css/css-sizing/animation/min-width-composition.html",
{}
]
],
"css/css-sizing/animation/min-width-interpolation.html": [
[
"css/css-sizing/animation/min-width-interpolation.html",
{}
]
],
"css/css-sizing/animation/width-composition.html": [
[
"css/css-sizing/animation/width-composition.html",
{}
]
],
"css/css-sizing/animation/width-interpolation.html": [
[
"css/css-sizing/animation/width-interpolation.html",
@ -335162,6 +335270,12 @@
{}
]
],
"css/css-ui/animation/caret-color-composition.html": [
[
"css/css-ui/animation/caret-color-composition.html",
{}
]
],
"css/css-ui/animation/caret-color-interpolation.html": [
[
"css/css-ui/animation/caret-color-interpolation.html",
@ -335174,12 +335288,24 @@
{}
]
],
"css/css-ui/animation/outline-offset-composition.html": [
[
"css/css-ui/animation/outline-offset-composition.html",
{}
]
],
"css/css-ui/animation/outline-offset-interpolation.html": [
[
"css/css-ui/animation/outline-offset-interpolation.html",
{}
]
],
"css/css-ui/animation/outline-width-composition.html": [
[
"css/css-ui/animation/outline-width-composition.html",
{}
]
],
"css/css-ui/animation/outline-width-interpolation.html": [
[
"css/css-ui/animation/outline-width-interpolation.html",
@ -374566,14 +374692,6 @@
{}
]
],
"layout-instability/observe-layout-shift.html": [
[
"layout-instability/observe-layout-shift.html",
{
"testdriver": true
}
]
],
"layout-instability/partially-clipped-visual-rect.html": [
[
"layout-instability/partially-clipped-visual-rect.html",
@ -374596,6 +374714,14 @@
}
]
],
"layout-instability/recent-input.html": [
[
"layout-instability/recent-input.html",
{
"testdriver": true
}
]
],
"layout-instability/rtl-distance.html": [
[
"layout-instability/rtl-distance.html",
@ -558293,10 +558419,18 @@
"bd26585d9e639e3133a650c26d3f3cb93579e4ae",
"support"
],
"css/css-align/animation/column-gap-composition.html": [
"0054206cca8b3448ad5d19e055e9f435a6e123b1",
"testharness"
],
"css/css-align/animation/column-gap-interpolation.html": [
"c2f02d3ba87f4dee555be80caa45d6909e2495ae",
"testharness"
],
"css/css-align/animation/row-gap-composition.html": [
"238253adf0cda81aca80d9345219ac8cd8e0df50",
"testharness"
],
"css/css-align/animation/row-gap-interpolation.html": [
"1d85ffa3b07e8695e7b3a6ad82c02ae4da8d7b21",
"testharness"
@ -563165,14 +563299,46 @@
"dde409360faf79a301c3ae3ea34a995d154d7bb4",
"support"
],
"css/css-box/animation/margin-bottom-composition.html": [
"c95f8de23efe6e853dd4b05eed07af01c1d02af7",
"testharness"
],
"css/css-box/animation/margin-interpolation.html": [
"088836cbbd18d0daf203de7dbacfb65733e35813",
"testharness"
],
"css/css-box/animation/margin-left-composition.html": [
"8f3c646dfec219d30d2fefafdcb89c9e7cabb2b5",
"testharness"
],
"css/css-box/animation/margin-right-composition.html": [
"c903303313bcc06ecf67f86efc55b21537e4af4c",
"testharness"
],
"css/css-box/animation/margin-top-composition.html": [
"5f050bd6c7d9663025d53a04ecd2ec6352275fba",
"testharness"
],
"css/css-box/animation/padding-bottom-composition.html": [
"855b5d3dc2948a9dc4ae391aaaa5caee06f88665",
"testharness"
],
"css/css-box/animation/padding-interpolation.html": [
"3bf284117960fe78300e95140244d309f8f439a4",
"testharness"
],
"css/css-box/animation/padding-left-composition.html": [
"417777ae253428cf6c852e6846960494a8ea53f7",
"testharness"
],
"css/css-box/animation/padding-right-composition.html": [
"3c80849bb2bc68a68c098f42a1a29b9247e6a224",
"testharness"
],
"css/css-box/animation/padding-top-composition.html": [
"b5083ae79b3db8a55f7af45373804d223cbbbc47",
"testharness"
],
"css/css-box/box-chrome-crash-001.html": [
"351df37f1550ab40818b7f7f1c51191cfae5583e",
"testharness"
@ -594537,10 +594703,18 @@
"edac744592f76704ba82b0c4a7e5a53c7db6ba79",
"testharness"
],
"css/css-shapes/animation/shape-margin-composition.html": [
"395bad063f4c1bfb036d650d6b0319cd3d572fe2",
"testharness"
],
"css/css-shapes/animation/shape-margin-interpolation.html": [
"48b3d0c460794b18261ce7a6beedf980d8335d36",
"testharness"
],
"css/css-shapes/animation/shape-outside-composition.html": [
"0115148ec1adde1a32b1c1fb4b3c33ea8b56ece0",
"testharness"
],
"css/css-shapes/animation/shape-outside-interpolation.html": [
"3380acdba00db8e9440b33c60275f6fd6340d345",
"testharness"
@ -595837,26 +596011,50 @@
"086e654a8e039f259b5e828d024f808c2e95016b",
"support"
],
"css/css-sizing/animation/height-composition.html": [
"094e247dcf22d9bd665b244993b6239265ee73bb",
"testharness"
],
"css/css-sizing/animation/height-interpolation.html": [
"10ceed5b2cc0d5511b8020aeaced36be39834c3a",
"testharness"
],
"css/css-sizing/animation/max-height-composition.html": [
"fb5b241d00865fe68c198a9fee88d932a8977f7e",
"testharness"
],
"css/css-sizing/animation/max-height-interpolation.html": [
"c4cab0e1cf4534d3705801f3159b6b8724977b66",
"testharness"
],
"css/css-sizing/animation/max-width-composition.html": [
"8b6d8b704c8771491419db0aa2a3c783a1dea2b3",
"testharness"
],
"css/css-sizing/animation/max-width-interpolation.html": [
"111199baa7ed89c6023d43b56313413cc5aeeeeb",
"testharness"
],
"css/css-sizing/animation/min-height-composition.html": [
"1e92b0ec2fd664e7b3dd6dc1cd8310c7b9526e7c",
"testharness"
],
"css/css-sizing/animation/min-height-interpolation.html": [
"6fd5b4e2f5366f6b18678f60b982e82905558e51",
"testharness"
],
"css/css-sizing/animation/min-width-composition.html": [
"e8bd41030bbd8a273f7e7c45f5f445d706d044eb",
"testharness"
],
"css/css-sizing/animation/min-width-interpolation.html": [
"d11fb3d5cb139f870d1eb40618bf547176f109b1",
"testharness"
],
"css/css-sizing/animation/width-composition.html": [
"bfe45cb31471d0c8623dbb9e84000bc1208bb76f",
"testharness"
],
"css/css-sizing/animation/width-interpolation.html": [
"d165c994b5de6fe1561498aa04c075196357f5f6",
"testharness"
@ -612309,6 +612507,10 @@
"7ce4b54a22c78576dc2318ebd651dfd1cce374ad",
"support"
],
"css/css-ui/animation/caret-color-composition.html": [
"6c69578677896e2463331deba85731e13fd94a25",
"testharness"
],
"css/css-ui/animation/caret-color-interpolation.html": [
"b3a4e30130843163d76a0a24196c66853bd4160a",
"testharness"
@ -612317,10 +612519,18 @@
"f49aa79a382c8e5a8f4c9d834f5f12aea551818f",
"testharness"
],
"css/css-ui/animation/outline-offset-composition.html": [
"984a63fdc34274fab133308dbb0b9a5c2eca03b9",
"testharness"
],
"css/css-ui/animation/outline-offset-interpolation.html": [
"46c1c51c6eefaa490fc9d55e4cadfb0cb7804337",
"testharness"
],
"css/css-ui/animation/outline-width-composition.html": [
"b770feda61ca6c74467c597749a053d3569af012",
"testharness"
],
"css/css-ui/animation/outline-width-interpolation.html": [
"c024c7cf6a08e0f6e02ccb451ca04d0b4a8c9251",
"testharness"
@ -635478,15 +635688,15 @@
"reftest"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py": [
"dd823c78a68d555e3a235cd917edd09297f7c34e",
"12fb6a3ad850b357808c47a90a818dd73be2de5b",
"support"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py": [
"62363a207bd15c3d8733ecd496e73e3f61eb5744",
"527959068762f5a7185bf11bdc2536054d2db258",
"support"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py": [
"b5c59e6f50185f4a63badfb860375959f3af4a02",
"fdbaec052e4e4bdfdcad1e9fc9731bf26a518509",
"support"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-010-tests.sh": [
@ -635494,7 +635704,7 @@
"support"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py": [
"34e047ab003e0c515cf03e448796aaa5b23a6df7",
"1b1d6fc16f24b91eef28cd99c428f426cc61c349",
"support"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/text-decoration-propagation-01-ref.html": [
@ -636538,7 +636748,7 @@
"support"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py": [
"75168420287b275af5782891adf73eb4cf7ca2e6",
"6e13861374a6f6d5def71d7c2c1a59fbd57b2895",
"support"
],
"css/vendor-imports/mozilla/mozilla-central-reftests/text3/text-align-match-parent-01.html": [
@ -671178,11 +671388,11 @@
"testharness"
],
"layout-instability/buffer-layout-shift.html": [
"0cfce2f7124226cf4256284c1238ba1ef024c42b",
"b6a33f579b4009d1497fdc104c07633793d53f01",
"testharness"
],
"layout-instability/buffered-flag.html": [
"dabc8068931ff3b15eb4b80481ed2102a7725a62",
"cd1260e3613f58c191688ab2f492647b0cc72c0c",
"testharness"
],
"layout-instability/clip-negative-bottom-margin.html": [
@ -671213,10 +671423,6 @@
"36475d4c826c11807e9c0a7fbf4457c33c92c2c0",
"testharness"
],
"layout-instability/observe-layout-shift.html": [
"1c35fe2aa234c96fce8798e6a1c35362f418e6f1",
"testharness"
],
"layout-instability/partially-clipped-visual-rect.html": [
"3b18b98dd93312c37b9e2f25918df50266a09243",
"testharness"
@ -671229,6 +671435,10 @@
"e2e7a911dc043bb21cebfd4a5b625795f3523a14",
"testharness"
],
"layout-instability/recent-input.html": [
"a4fa0d8b0d92a83984034926de30958b840c1028",
"testharness"
],
"layout-instability/resources/slow-image.py": [
"ee7988c551f6429eea2b929af083ad30cbd5c73d",
"support"
@ -671266,7 +671476,7 @@
"testharness"
],
"layout-instability/toJSON.html": [
"3d39d623e13314b183463fa1c365df3a7b725243",
"374a7de0cd1c4d5d5b089b7d026c8eb5709e91f1",
"testharness"
],
"layout-instability/transform.html": [

61
tests/wpt/metadata/css/css-align/animation/column-gap-composition.html.ini Normal file
View file

@ -0,0 +1,61 @@
[column-gap-composition.html]
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (0.5) should be [normal\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (0) should be [200px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (-0.3) should be [200px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (1) should be [normal\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
expected: FAIL
[Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (1.5) should be [normal\]]
expected: FAIL
[Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
expected: FAIL

61
tests/wpt/metadata/css/css-align/animation/row-gap-composition.html.ini Normal file
View file

@ -0,0 +1,61 @@
[row-gap-composition.html]
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (1) should be [normal\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (-0.3) should be [200px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (0) should be [200px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (0.5) should be [normal\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (1.5) should be [normal\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
expected: FAIL
[Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
expected: FAIL

31
tests/wpt/metadata/css/css-ui/animation/caret-color-composition.html.ini Normal file
View file

@ -0,0 +1,31 @@
[caret-color-composition.html]
[Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (-0.3) should be [rgb(120, 120, 120)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1.5) should be [rgb(250, 250, 250)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (-0.3) should be [rgb(70, 70, 70)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0) should be [rgb(100, 100, 100)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1) should be [rgb(200, 200, 200)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0.5) should be [rgb(200, 200, 200)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0.5) should be [rgb(150, 150, 150)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1.5) should be [rgb(255, 255, 255)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0) should be [rgb(150, 150, 150)\]]
expected: FAIL
[Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1) should be [rgb(250, 250, 250)\]]
expected: FAIL

61
tests/wpt/metadata/css/css-ui/animation/outline-offset-composition.html.ini Normal file
View file

@ -0,0 +1,61 @@
[outline-offset-composition.html]
[Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (1.5) should be [calc(-50px + 40em)\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (0) should be [calc(100px + 10em)\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (0.5) should be [calc(50px + 20em)\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (-0.3) should be [calc(130px + 4em)\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (1) should be [30em\]]
expected: FAIL
[Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
expected: FAIL

79
tests/wpt/metadata/css/css-ui/animation/outline-width-composition.html.ini Normal file
View file

@ -0,0 +1,79 @@
[outline-width-composition.html]
[Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (0) should be [calc(100px + 10em)\]]
expected: FAIL
[Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (-0.3) should be [19px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (1) should be [30em\]]
expected: FAIL
[Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (1.5) should be [1px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (2) should be [0px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (0.5) should be [calc(50px + 20em)\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (0.5) should be [11px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (1) should be [6px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (1.5) should be [calc(-50px + 40em)\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (0) should be [16px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (-0.3) should be [calc(130px + 4em)\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
expected: FAIL
[Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
expected: FAIL

4
tests/wpt/metadata/css/cssom-view/CaretPosition-001.html.ini
View file

@ -1,4 +0,0 @@
[CaretPosition-001.html]
[Element at (400, 100)]
expected: FAIL

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

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

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

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

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

@ -11,6 +11,9 @@
[X-Content-Type-Options%3A%20nosniff%0C]
expected: FAIL
[X-Content-Type-Options%3A%0D%0AX-Content-Type-Options%3A%20nosniff]
[X-Content-Type-Options%3A%20%40%23%24%23%25%25%26%5E%26%5E*()()11!%2Cnosniff]
expected: FAIL
[X-Content-Type-Options%3A%20%2Cnosniff]
expected: FAIL

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

@ -8,7 +8,7 @@
expected: FAIL
[Embedded credentials are treated as network errors in new windows.]
expected: FAIL
expected: TIMEOUT
[Embedded credentials matching the top-level are treated as network errors for cross-origin URLs.]
expected: TIMEOUT

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

@ -1,4 +0,0 @@
[traverse_the_history_1.html]
[Multiple history traversals from the same task]
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

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

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

4
tests/wpt/metadata/html/semantics/scripting-1/the-script-element/execution-timing/077.html.ini
View file

@ -1,4 +0,0 @@
[077.html]
[ adding several types of scripts through the DOM and removing some of them confuses scheduler ]
expected: FAIL

1
tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini
View file

@ -1,4 +1,5 @@
[realtimeanalyser-fft-scaling.html]
expected: TIMEOUT
[X 2048-point FFT peak position is not equal to 64. Got 0.]
expected: FAIL

2
tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini
View file

@ -1,2 +0,0 @@
[Worker-constructor.html]
expected: ERROR

65
tests/wpt/web-platform-tests/css/css-align/animation/column-gap-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>column-gap composition</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap">
<meta name="assert" content="column-gap supports animation by computed value type">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'column-gap',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'column-gap',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'column-gap',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'column-gap',
underlying: '100px',
addFrom: '100px',
addTo: 'normal',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'normal'},
{at: 1, expect: 'normal'},
{at: 1.5, expect: 'normal'},
]);
</script>
</body>

65
tests/wpt/web-platform-tests/css/css-align/animation/row-gap-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>row-gap composition</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap">
<meta name="assert" content="row-gap supports animation by computed value type">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'row-gap',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'row-gap',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'row-gap',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'row-gap',
underlying: '100px',
addFrom: '100px',
addTo: 'normal',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'normal'},
{at: 1, expect: 'normal'},
{at: 1.5, expect: 'normal'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-box/animation/margin-bottom-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>margin-bottom composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-bottom supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'margin-bottom',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'margin-bottom',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'},
]);
test_composition({
property: 'margin-bottom',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'margin-bottom',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'margin-bottom',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-box/animation/margin-left-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>margin-left composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-left supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'margin-left',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'margin-left',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'},
]);
test_composition({
property: 'margin-left',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'margin-left',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'margin-left',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-box/animation/margin-right-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>margin-right composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-right supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'margin-right',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'margin-right',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'},
]);
test_composition({
property: 'margin-right',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'margin-right',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'margin-right',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-box/animation/margin-top-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>margin-top composition</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
<meta name="assert" content="margin-top supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'margin-top',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'margin-top',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'},
]);
test_composition({
property: 'margin-top',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'margin-top',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'margin-top',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

65
tests/wpt/web-platform-tests/css/css-box/animation/padding-bottom-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-bottom composition</title>
<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
<meta name="assert" content="padding-bottom supports animation as a list of lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'padding-bottom',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'padding-bottom',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'padding-bottom',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'padding-bottom',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
</script>
</body>

65
tests/wpt/web-platform-tests/css/css-box/animation/padding-left-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-left composition</title>
<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
<meta name="assert" content="padding-left supports animation as a list of lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'padding-left',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'padding-left',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'padding-left',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'padding-left',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
</script>
</body>

65
tests/wpt/web-platform-tests/css/css-box/animation/padding-right-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-right composition</title>
<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
<meta name="assert" content="padding-right supports animation as a list of lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'padding-right',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'padding-right',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'padding-right',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'padding-right',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
</script>
</body>

65
tests/wpt/web-platform-tests/css/css-box/animation/padding-top-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>padding-top composition</title>
<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
<meta name="assert" content="padding-top supports animation as a list of lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'padding-top',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'padding-top',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'padding-top',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'padding-top',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
</script>
</body>

65
tests/wpt/web-platform-tests/css/css-shapes/animation/shape-margin-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>shape-margin composition</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property">
<meta name="assert" content="shape-margin supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'shape-margin',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'shape-margin',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'shape-margin',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'shape-margin',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
</script>
</body>

189
tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html Normal file
View file

@ -0,0 +1,189 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>shape-outside composition</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property">
<meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'shape-outside',
underlying: 'circle(100px at 25px 25%)',
addFrom: 'circle(10px at 25px 75%)',
addTo: 'circle(50px at 50px center)',
}, [
{at: -0.3, expect: 'circle(98px at 42.5px 107.5%)'},
{at: 0, expect: 'circle(110px at 50px 100%)'},
{at: 0.3, expect: 'circle(122px at 57.5px 92.5%)'},
{at: 0.6, expect: 'circle(134px at 65px 85%)'},
{at: 1, expect: 'circle(150px at 75px 75%)'},
{at: 1.5, expect: 'circle(170px at 87.5px 62.5%)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'circle(100px at 20px 20%)',
addFrom: 'circle(50px at 50px 50%)',
replaceTo: 'circle(50% at 150px 150%)',
}, [
{at: -0.3, expect: 'circle(calc(195px + -15%) at 46px 46%)'},
{at: 0, expect: 'circle(calc(150px + 0%) at 70px 70%)'},
{at: 0.3, expect: 'circle(calc(105px + 15%) at 94px 94%)'},
{at: 0.6, expect: 'circle(calc(60px + 30%) at 118px 118%)'},
{at: 1, expect: 'circle(50% at 150px 150%)'},
{at: 1.5, expect: 'circle(calc(-75px + 75%) at 190px 190%)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'circle(farthest-side at 25px 75%)',
addFrom: 'circle(farthest-side at 25px 75%)',
addTo: 'circle(farthest-side at 50px center)',
}, [
{at: 0.25, expect: 'circle(farthest-side at 25px 75%)'},
{at: 0.75, expect: 'circle(farthest-side at 50px 50%)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'circle(50px at 10px 20px)',
addFrom: 'circle(50px at 10px 20px)',
addTo: 'circle(farthest-side at 30px 40px)',
}, [
{at: 0.25, expect: 'circle(100px at 20px 40px)'},
{at: 0.75, expect: 'circle(farthest-side at 30px 40px)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'ellipse(10px 20px at 30px 40px)',
addFrom: 'ellipse(40px 30px at 20px 10px)',
addTo: 'ellipse(140px 130px at 120px 110px)',
}, [
{at: -0.3, expect: 'ellipse(20px 20px at 20px 20px)'},
{at: 0, expect: 'ellipse(50px 50px at 50px 50px)'},
{at: 0.3, expect: 'ellipse(80px 80px at 80px 80px)'},
{at: 0.6, expect: 'ellipse(110px 110px at 110px 110px)'},
{at: 1, expect: 'ellipse(150px 150px at 150px 150px)'},
{at: 1.5, expect: 'ellipse(200px 200px at 200px 200px)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'ellipse(10px 20px at 30px 40px)',
replaceFrom: 'ellipse(40px 30px at 20px 10px)',
addTo: 'ellipse(40px 30px at 20px 10px)',
}, [
{at: -0.3, expect: 'ellipse(37px 24px at 11px -2px)'},
{at: 0, expect: 'ellipse(40px 30px at 20px 10px)'},
{at: 0.3, expect: 'ellipse(43px 36px at 29px 22px)'},
{at: 0.6, expect: 'ellipse(46px 42px at 38px 34px)'},
{at: 1, expect: 'ellipse(50px 50px at 50px 50px)'},
{at: 1.5, expect: 'ellipse(55px 60px at 65px 70px)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'ellipse(25px 75%)',
addFrom: 'ellipse()',
addTo: 'ellipse(closest-side farthest-side)',
}, [
{at: 0.25, expect: 'ellipse(at 50% 50%)'},
{at: 0.75, expect: 'ellipse(closest-side farthest-side at 50% 50%)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'inset(20px)',
addFrom: 'inset(20px)',
addTo: 'inset(40%)',
}, [
{at: -0.3, expect: 'inset(calc(46px + -12%))'},
{at: 0, expect: 'inset(calc(40px + 0%))'},
{at: 0.3, expect: 'inset(calc(34px + 12%))'},
{at: 0.6, expect: 'inset(calc(28px + 24%))'},
{at: 1, expect: 'inset(calc(20px + 40%))'},
{at: 1.5, expect: 'inset(calc(10px + 60%))'},
]);
test_composition({
property: 'shape-outside',
underlying: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)',
addFrom: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)',
replaceTo: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)',
}, [
{at: -0.3, expect: 'inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)'},
{at: 0, expect: 'inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)'},
{at: 0.25, expect: 'inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)'},
{at: 0.75, expect: 'inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)'},
{at: 1, expect: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)'},
{at: 1.5, expect: 'inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'inset(1px 2px round 100px 200px)',
addFrom: 'inset(1px 2px round 100px 200px)',
addTo: 'inset(101px 102px 101px 102px)',
}, [
{at: -0.3, expect: 'inset(-28px -26px round 230px 460px)'},
{at: 0, expect: 'inset(2px 4px round 200px 400px)'},
{at: 0.3, expect: 'inset(32px 34px round 170px 340px)'},
{at: 0.6, expect: 'inset(62px 64px round 140px 280px)'},
{at: 1, expect: 'inset(102px 104px round 100px 200px)'},
{at: 1.5, expect: 'inset(152px 154px round 50px 100px)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'polygon(10px 20%, 30px 40%)',
addFrom: 'polygon(10px 20%, 30px 40%)',
addTo: 'polygon(110px 120%, 130px 140%)',
}, [
{at: -0.3, expect: 'polygon(-10px 10%, 30px 50%)'},
{at: 0, expect: 'polygon(20px 40%, 60px 80%)'},
{at: 0.3, expect: 'polygon(50px 70%, 90px 110%)'},
{at: 0.6, expect: 'polygon(80px 100%, 120px 140%)'},
{at: 1, expect: 'polygon(120px 140%, 160px 180%)'},
{at: 1.5, expect: 'polygon(170px 190%, 210px 230%)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'polygon(evenodd, 10px 20px)',
addFrom: 'polygon(evenodd, 10px 20px)',
addTo: 'polygon(evenodd, 110px 120px)',
}, [
{at: -0.3, expect: 'polygon(evenodd, -10px 10px)'},
{at: 0, expect: 'polygon(evenodd, 20px 40px)'},
{at: 0.3, expect: 'polygon(evenodd, 50px 70px)'},
{at: 0.6, expect: 'polygon(evenodd, 80px 100px)'},
{at: 1, expect: 'polygon(evenodd, 120px 140px)'},
{at: 1.5, expect: 'polygon(evenodd, 170px 190px)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'polygon(evenodd, 10px 20px)',
addFrom: 'polygon(evenodd, 10px 20px)',
addTo: 'polygon(nonzero, 30px 40px)',
}, [
{at: 0.25, expect: 'polygon(evenodd, 20px 40px)'},
{at: 0.75, expect: 'polygon(30px 40px)'},
]);
test_composition({
property: 'shape-outside',
underlying: 'polygon(10px 20px, 30px 40px)',
addFrom: 'polygon(10px 20px, 30px 40px)',
addTo: 'polygon(30px 40px)',
}, [
{at: 0.25, expect: 'polygon(20px 40px, 60px 80px)'},
{at: 0.75, expect: 'polygon(30px 40px)'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-sizing/animation/height-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>height composition</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height">
<meta name="assert" content="height supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'height',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'height',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'height',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'height',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'height',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-sizing/animation/max-height-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>max-height composition</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height">
<meta name="assert" content="max-height supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'max-height',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'max-height',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'max-height',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'max-height',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'max-height',
underlying: '100px',
addFrom: '100px',
addTo: 'none',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'none'},
{at: 1, expect: 'none'},
{at: 1.5, expect: 'none'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-sizing/animation/max-width-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>max-width composition</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width">
<meta name="assert" content="max-width supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'max-width',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'max-width',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'max-width',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'max-width',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'max-width',
underlying: '100px',
addFrom: '100px',
addTo: 'none',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'none'},
{at: 1, expect: 'none'},
{at: 1.5, expect: 'none'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-sizing/animation/min-height-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>min-height composition</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height">
<meta name="assert" content="min-height supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'min-height',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'min-height',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'min-height',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'min-height',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'min-height',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-sizing/animation/min-width-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>min-width composition</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width">
<meta name="assert" content="min-width supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'min-width',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'min-width',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'min-width',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'min-width',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'min-width',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

78
tests/wpt/web-platform-tests/css/css-sizing/animation/width-composition.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>width composition</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
<meta name="assert" content="width supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'width',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'width',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'width',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, expect: 'calc(130px + 4%)'},
{at: 0, expect: 'calc(100px + 10%)'},
{at: 0.5, expect: 'calc(50px + 20%)'},
{at: 1, expect: '30%'},
{at: 1.5, expect: 'calc(-50px + 40%)'},
]);
test_composition({
property: 'width',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'width',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, expect: '200px'},
{at: 0, expect: '200px'},
{at: 0.5, expect: 'auto'},
{at: 1, expect: 'auto'},
{at: 1.5, expect: 'auto'},
]);
</script>
</body>

53
tests/wpt/web-platform-tests/css/css-ui/animation/caret-color-composition.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>caret-color composition</title>
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-caret-color">
<meta name="assert" content="caret-color supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<style>
.target {
display: inline-block;
font-size: 60pt;
color: rgb(50, 50, 50);
}
.expected {
margin-right: 15px;
}
</style>
<body contenteditable>
<template id="target-template">T</template>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
test_composition({
property: 'caret-color',
underlying: 'rgb(50, 50, 50)',
addFrom: 'rgb(100, 100, 100)',
addTo: 'rgb(200, 200, 200)',
}, [
{at: -0.3, expect: 'rgb(120, 120, 120)'},
{at: 0, expect: 'rgb(150, 150, 150)'},
{at: 0.5, expect: 'rgb(200, 200, 200)'},
{at: 1, expect: 'rgb(250, 250, 250)'},
{at: 1.5, expect: 'rgb(255, 255, 255)'},
]);
test_composition({
property: 'caret-color',
underlying: 'auto',
addFrom: 'rgb(100, 100, 100)',
addTo: 'rgb(200, 200, 200)',
}, [
{at: -0.3, expect: 'rgb(70, 70, 70)'},
{at: 0, expect: 'rgb(100, 100, 100)'},
{at: 0.5, expect: 'rgb(150, 150, 150)'},
{at: 1, expect: 'rgb(200, 200, 200)'},
{at: 1.5, expect: 'rgb(250, 250, 250)'},
]);
</script>
</body>

65
tests/wpt/web-platform-tests/css/css-ui/animation/outline-offset-composition.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>outline-offset composition</title>
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset">
<meta name="assert" content="outline-offset supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
property: 'outline-offset',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'outline-offset',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'},
]);
test_composition({
property: 'outline-offset',
underlying: '10em',
addFrom: '100px',
addTo: '20em',
}, [
{at: -0.3, expect: 'calc(130px + 4em)'},
{at: 0, expect: 'calc(100px + 10em)'},
{at: 0.5, expect: 'calc(50px + 20em)'},
{at: 1, expect: '30em'},
{at: 1.5, expect: 'calc(-50px + 40em)'},
]);
test_composition({
property: 'outline-offset',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
</script>
</body>

85
tests/wpt/web-platform-tests/css/css-ui/animation/outline-width-composition.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>outline-width composition</title>
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-width">
<meta name="assert" content="outline-width supports animation by computed value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<style>
.target {
/* If outline-style is none (the default), the computed style of outline-width is 0. */
outline-style: solid;
}
</style>
<script>
test_composition({
property: 'outline-width',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, expect: '120px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '200px'},
{at: 1, expect: '250px'},
{at: 1.5, expect: '300px'},
]);
test_composition({
property: 'outline-width',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, expect: '114px'},
{at: 0, expect: '110px'},
{at: 0.5, expect: '106px'},
{at: 1, expect: '102px'},
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
]);
test_composition({
property: 'outline-width',
underlying: '10em',
addFrom: '100px',
addTo: '20em',
}, [
{at: -0.3, expect: 'calc(130px + 4em)'},
{at: 0, expect: 'calc(100px + 10em)'},
{at: 0.5, expect: 'calc(50px + 20em)'},
{at: 1, expect: '30em'},
{at: 1.5, expect: 'calc(-50px + 40em)'},
]);
test_composition({
property: 'outline-width',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, expect: '135px'},
{at: 0, expect: '150px'},
{at: 0.5, expect: '175px'},
{at: 1, expect: '200px'},
{at: 1.5, expect: '225px'},
]);
test_composition({
property: 'outline-width',
underlying: 'thick', // 5px
addFrom: '11px',
addTo: 'thin', // 1px
}, [
{at: -0.3, expect: '19px'},
{at: 0, expect: '16px'},
{at: 0.5, expect: '11px'},
{at: 1, expect: '6px'},
{at: 1.5, expect: '1px'},
{at: 2, expect: '0px'}, // CSS outline-width can't be negative.
]);
</script>
</body>

2
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py
View file

@ -8,7 +8,7 @@ script outputs a list of all tests it generated in the format of Mozilla
reftest.list to the stdout.
"""
from __future__ import unicode_literals
from __future__ import unicode_literals, print_function, absolute_import
TEST_FILE = 'text-emphasis-line-height-{:03}{}.html'
TEST_TEMPLATE = '''<!DOCTYPE html>

2
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py
View file

@ -9,7 +9,7 @@ test files are generated by this script. It also outputs a list of all
tests it generated in the format of Mozilla reftest.list to the stdout.
"""
from __future__ import unicode_literals
from __future__ import unicode_literals, print_function, absolute_import
import itertools

2
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py
View file

@ -7,7 +7,7 @@ emphasis marks with ruby in four directions. It outputs a list of all
tests it generated in the format of Mozilla reftest.list to the stdout.
"""
from __future__ import unicode_literals
from __future__ import unicode_literals, print_function, absolute_import
TEST_FILE = 'text-emphasis-ruby-{:03}{}.html'
TEST_TEMPLATE = '''<!DOCTYPE html>

2
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py
View file

@ -8,7 +8,7 @@ and <string>, with horizontal writing mode. It outputs a list of all
tests it generated in the format of Mozilla reftest.list to the stdout.
"""
from __future__ import unicode_literals
from __future__ import unicode_literals, print_function, absolute_import
TEST_FILE = 'text-emphasis-style-property-{:03}{}.html'
TEST_TEMPLATE = '''<!DOCTYPE html>

2
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py
View file

@ -18,7 +18,7 @@ So there are 49 different combinations. It outputs a list of all
tests it generated in the format of Mozilla reftest.list to the stdout.
"""
from __future__ import unicode_literals
from __future__ import unicode_literals, print_function, absolute_import
TEST_FILE = 'segment-break-transformation-rules-{:03}.html'
TEST_TEMPLATE = '''<!DOCTYPE html>

57
tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html
View file

@ -8,38 +8,35 @@
<div id='myDiv'></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Delay onload by inserting a slow image.-->
<img src="resources/slow-image.py">
<script src="resources/util.js"></script>
<script>
async_test(function (t) {
if (!window.LayoutShift)
assert_unreached('LayoutShift entries are not supported');
const startTime = performance.now();
new PerformanceObserver(list => {
const endTime = performance.now();
assert_equals(list.getEntries().length, 1);
const entry = list.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime)
assert_less_than_equal(entry.startTime, endTime)
assert_equals(entry.duration, 0.0);
const maxDimension = Math.max(document.documentElement.clientWidth,
document.documentElement.clientHeight);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, 300 * (100 + 60) * (60 / maxDimension) /
(document.documentElement.clientWidth * document.documentElement.clientHeight));
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
// The entry should not be available via getEntries* methods.
assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries');
assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries');
assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries');
t.done();
}).observe({type: 'layout-shift'});
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
}, 'Layout shift before onload is not buffered into the performance timeline.');
const startTime = performance.now();
new PerformanceObserver(t.step_func_done(list => {
const endTime = performance.now();
assert_equals(list.getEntries().length, 1);
const entry = list.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
// The entry should not be available via getEntries* methods.
assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries');
assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries');
assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries');
})).observe({type: 'layout-shift'});
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
}, 'Layout shift before onload is not buffered into the performance timeline.');
</script>
</body>

14
tests/wpt/web-platform-tests/layout-instability/buffered-flag.html
View file

@ -8,10 +8,13 @@
<div id='myDiv'></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
async_test(t => {
if (!window.LayoutShift)
assert_unreached('LayoutShift entries are not supported');
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
const startTime = performance.now();
// First observer creates second in callback to ensure the entry has been dispatched by the time
// the second observer begins observing.
@ -22,9 +25,10 @@ async_test(t => {
assert_equals(list.getEntries().length, 1);
const entry = list.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_greater_than_equal(entry.startTime, startTime)
assert_less_than_equal(entry.startTime, endTime)
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
})).observe({'type': 'layout-shift', buffered: true});
}).observe({type: 'layout-shift'});
// Modify the position of the div to cause a layout-shift entry.

111
tests/wpt/web-platform-tests/layout-instability/observe-layout-shift.html
View file

@ -1,111 +0,0 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Layout Instability: observe layout shift value via PerformanceObserver</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
/* Disable the button's focus ring, which otherwise expands its visual rect by
* 1px on all sides, triggering a layout shift event.
*/
#button { outline: none; }
</style>
<div id='myDiv'></div>
<button id='button'>Generate a 'click' event</button>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src=/resources/testdriver.js></script>
<script src=/resources/testdriver-vendor.js></script><script>
let timeAfterClick;
function mainThreadBusy(duration) {
const now = performance.now();
while (performance.now() < now + duration);
}
function clickOnElement(id, callback) {
const element = document.getElementById(id);
const rect = element.getBoundingClientRect();
const xCenter = rect.x + rect.width / 2;
const yCenter = rect.y + rect.height / 2;
const leftButton = 0;
const clickHandler = () => {
mainThreadBusy(120);
if (callback)
callback();
element.removeEventListener("mousedown", clickHandler);
};
element.addEventListener("mousedown", clickHandler);
test_driver.click(element);
}
function clickAndBlockMain(id) {
return new Promise((resolve, reject) => {
clickOnElement(id, resolve);
});
}
async_test(function (t) {
if (!window.LayoutShift)
assert_unreached('LayoutShift entries are not supported');
const startTime = performance.now();
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const endTime = performance.now();
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime)
assert_less_than_equal(entry.startTime, endTime)
assert_equals(entry.duration, 0.0);
const maxDimension = Math.max(document.documentElement.clientWidth,
document.documentElement.clientHeight);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, 300 * (100 + 60) * (60 / maxDimension) /
(document.documentElement.clientWidth * document.documentElement.clientHeight));
})
);
observer.observe({entryTypes: ['layout-shift']});
window.onload = () => {
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
};
}, 'Layout shift is observable via PerformanceObserver.');
async_test(function (t) {
const startTime = performance.now();
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const endTime = performance.now();
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime)
assert_less_than_equal(entry.startTime, endTime)
assert_equals(entry.duration, 0.0);
const maxDimension = Math.max(document.documentElement.clientWidth,
document.documentElement.clientHeight);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, 300 * (100 + 60) * (60 / maxDimension) /
(document.documentElement.clientWidth * document.documentElement.clientHeight));
// We should see that there was a click input entry
assert_equals(entry.hadRecentInput, true);
assert_greater_than_equal(timeAfterClick, entry.lastInputTime);
})
);
observer.observe({entryTypes: ['layout-shift']});
window.onload = () => {
// User input event
clickAndBlockMain('button').then( () => {
timeAfterClick = performance.now();
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
});
};
}, 'Layout shift within user input is observable via PerformanceObserver.');
</script>
</body>

58
tests/wpt/web-platform-tests/layout-instability/recent-input.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Layout Instability: observe after user input</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
/* Disable the button's focus ring, which otherwise expands its visual rect by
* 1px on all sides, triggering a layout shift event.
*/
#button { outline: none; }
</style>
<div id='myDiv'></div>
<button id='button'>Generate a 'click' event</button>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src=/resources/testdriver.js></script>
<script src=/resources/testdriver-vendor.js></script>
<script src=resources/util.js></script>
<script src=/event-timing/resources/event-timing-test-utils.js></script>
<script>
let timeAfterClick;
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
const startTime = performance.now();
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const endTime = performance.now();
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
// We should see that there was a click input entry.
assert_equals(entry.hadRecentInput, true);
assert_greater_than_equal(timeAfterClick, entry.lastInputTime);
})
);
observer.observe({entryTypes: ['layout-shift']});
// User input event
clickAndBlockMain('button').then(() => {
timeAfterClick = performance.now();
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
});
}, 'Layout shift right after user input is observable via PerformanceObserver.');
</script>
</body>

61
tests/wpt/web-platform-tests/layout-instability/toJSON.html
View file

@ -8,35 +8,38 @@
<div id='myDiv'></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
async_test(function (t) {
if (!window.LayoutShift)
assert_unreached('LayoutShift entries are not supported');
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const entry = entryList.getEntries()[0];
assert_equals(typeof(entry.toJSON), 'function');
const json = entry.toJSON();
assert_equals(typeof(json), 'object');
const keys = [
// PerformanceEntry
'name',
'entryType',
'startTime',
'duration',
// LayoutShift
'value',
'hadRecentInput',
'lastInputTime',
];
for (const key of keys) {
assert_equals(json[key], entry[key],
'LayoutShift ${key} entry does not match its toJSON value');
}
})
);
observer.observe({type: 'layout-shift'});
document.getElementById('myDiv').style = "top: 60px";
}, 'Test toJSON() in LayoutShift.');
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const entry = entryList.getEntries()[0];
assert_equals(typeof(entry.toJSON), 'function');
const json = entry.toJSON();
assert_equals(typeof(json), 'object');
const keys = [
// PerformanceEntry
'name',
'entryType',
'startTime',
'duration',
// LayoutShift
'value',
'hadRecentInput',
'lastInputTime',
];
for (const key of keys) {
assert_equals(json[key], entry[key],
'LayoutShift ${key} entry does not match its toJSON value');
}
})
);
observer.observe({type: 'layout-shift'});
document.getElementById('myDiv').style = "top: 60px";
}, 'Test toJSON() in LayoutShift.');
</script>
</body>