diff options
49 files changed, 2300 insertions, 227 deletions
diff --git a/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini b/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini index abf0d50aff3..4c1aa18e695 100644 --- a/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini +++ b/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini @@ -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] diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json index 39991835803..8a7ba34a58a 100644 --- a/tests/wpt/metadata/MANIFEST.json +++ b/tests/wpt/metadata/MANIFEST.json @@ -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": [ diff --git a/tests/wpt/metadata/css/css-align/animation/column-gap-composition.html.ini b/tests/wpt/metadata/css/css-align/animation/column-gap-composition.html.ini new file mode 100644 index 00000000000..efdef9e8059 --- /dev/null +++ b/tests/wpt/metadata/css/css-align/animation/column-gap-composition.html.ini @@ -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 + diff --git a/tests/wpt/metadata/css/css-align/animation/row-gap-composition.html.ini b/tests/wpt/metadata/css/css-align/animation/row-gap-composition.html.ini new file mode 100644 index 00000000000..ea7c97b7b94 --- /dev/null +++ b/tests/wpt/metadata/css/css-align/animation/row-gap-composition.html.ini @@ -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 + diff --git a/tests/wpt/metadata/css/css-ui/animation/caret-color-composition.html.ini b/tests/wpt/metadata/css/css-ui/animation/caret-color-composition.html.ini new file mode 100644 index 00000000000..ae82fda3148 --- /dev/null +++ b/tests/wpt/metadata/css/css-ui/animation/caret-color-composition.html.ini @@ -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 + diff --git a/tests/wpt/metadata/css/css-ui/animation/outline-offset-composition.html.ini b/tests/wpt/metadata/css/css-ui/animation/outline-offset-composition.html.ini new file mode 100644 index 00000000000..ebb722b54a0 --- /dev/null +++ b/tests/wpt/metadata/css/css-ui/animation/outline-offset-composition.html.ini @@ -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 + diff --git a/tests/wpt/metadata/css/css-ui/animation/outline-width-composition.html.ini b/tests/wpt/metadata/css/css-ui/animation/outline-width-composition.html.ini new file mode 100644 index 00000000000..307f72aadda --- /dev/null +++ b/tests/wpt/metadata/css/css-ui/animation/outline-width-composition.html.ini @@ -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 + diff --git a/tests/wpt/metadata/css/cssom-view/CaretPosition-001.html.ini b/tests/wpt/metadata/css/cssom-view/CaretPosition-001.html.ini deleted file mode 100644 index 4c79907309b..00000000000 --- a/tests/wpt/metadata/css/cssom-view/CaretPosition-001.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[CaretPosition-001.html] - [Element at (400, 100)] - expected: FAIL - diff --git a/tests/wpt/metadata/fetch/content-type/response.window.js.ini b/tests/wpt/metadata/fetch/content-type/response.window.js.ini index 5db729456de..35c569d8e34 100644 --- a/tests/wpt/metadata/fetch/content-type/response.window.js.ini +++ b/tests/wpt/metadata/fetch/content-type/response.window.js.ini @@ -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 diff --git a/tests/wpt/metadata/fetch/content-type/script.window.js.ini b/tests/wpt/metadata/fetch/content-type/script.window.js.ini index 2d5faa72ac7..d2df9b78483 100644 --- a/tests/wpt/metadata/fetch/content-type/script.window.js.ini +++ b/tests/wpt/metadata/fetch/content-type/script.window.js.ini @@ -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 diff --git a/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini b/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini index b7052af5b5c..ecd755157c7 100644 --- a/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini +++ b/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini @@ -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 diff --git a/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini b/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini index 6bd06899fdd..80ebd73cb00 100644 --- a/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini +++ b/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini @@ -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 diff --git a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_1.html.ini b/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_1.html.ini deleted file mode 100644 index 87b07c3e670..00000000000 --- a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_1.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[traverse_the_history_1.html] - [Multiple history traversals from the same task] - expected: FAIL - diff --git a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini b/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini deleted file mode 100644 index 385376c7321..00000000000 --- a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[traverse_the_history_4.html] - [Multiple history traversals, last would be aborted] - expected: FAIL - diff --git a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini index 71edac2c5ed..e440b1e38c6 100644 --- a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini +++ b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini @@ -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 diff --git a/tests/wpt/metadata/html/semantics/scripting-1/the-script-element/execution-timing/077.html.ini b/tests/wpt/metadata/html/semantics/scripting-1/the-script-element/execution-timing/077.html.ini deleted file mode 100644 index bcd2fd0eab8..00000000000 --- a/tests/wpt/metadata/html/semantics/scripting-1/the-script-element/execution-timing/077.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[077.html] - [ adding several types of scripts through the DOM and removing some of them confuses scheduler ] - expected: FAIL - diff --git a/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini b/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini index 66bd350083b..a56bad443a2 100644 --- a/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini +++ b/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini @@ -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 diff --git a/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini b/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini deleted file mode 100644 index 80f9a4f15b8..00000000000 --- a/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[Worker-constructor.html] - expected: ERROR diff --git a/tests/wpt/web-platform-tests/css/css-align/animation/column-gap-composition.html b/tests/wpt/web-platform-tests/css/css-align/animation/column-gap-composition.html new file mode 100644 index 00000000000..0054206cca8 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/animation/column-gap-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-align/animation/row-gap-composition.html b/tests/wpt/web-platform-tests/css/css-align/animation/row-gap-composition.html new file mode 100644 index 00000000000..238253adf0c --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/animation/row-gap-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-bottom-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-bottom-composition.html new file mode 100644 index 00000000000..c95f8de23ef --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-bottom-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-left-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-left-composition.html new file mode 100644 index 00000000000..8f3c646dfec --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-left-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-right-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-right-composition.html new file mode 100644 index 00000000000..c903303313b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-right-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-top-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-top-composition.html new file mode 100644 index 00000000000..5f050bd6c7d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-top-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-bottom-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-bottom-composition.html new file mode 100644 index 00000000000..855b5d3dc29 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-bottom-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-left-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-left-composition.html new file mode 100644 index 00000000000..417777ae253 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-left-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-right-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-right-composition.html new file mode 100644 index 00000000000..3c80849bb2b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-right-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-top-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-top-composition.html new file mode 100644 index 00000000000..b5083ae79b3 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-top-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-margin-composition.html b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-margin-composition.html new file mode 100644 index 00000000000..395bad063f4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-margin-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html new file mode 100644 index 00000000000..0115148ec1a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/height-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/height-composition.html new file mode 100644 index 00000000000..094e247dcf2 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/height-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/max-height-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-height-composition.html new file mode 100644 index 00000000000..fb5b241d008 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-height-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/max-width-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-width-composition.html new file mode 100644 index 00000000000..8b6d8b704c8 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-width-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/min-height-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-height-composition.html new file mode 100644 index 00000000000..1e92b0ec2fd --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-height-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/min-width-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-width-composition.html new file mode 100644 index 00000000000..e8bd41030bb --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-width-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/width-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/width-composition.html new file mode 100644 index 00000000000..bfe45cb3147 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/width-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-ui/animation/caret-color-composition.html b/tests/wpt/web-platform-tests/css/css-ui/animation/caret-color-composition.html new file mode 100644 index 00000000000..6c695786778 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-ui/animation/caret-color-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-ui/animation/outline-offset-composition.html b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-offset-composition.html new file mode 100644 index 00000000000..984a63fdc34 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-offset-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/css-ui/animation/outline-width-composition.html b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-width-composition.html new file mode 100644 index 00000000000..b770feda61c --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-width-composition.html @@ -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> diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py index dd823c78a68..12fb6a3ad85 100644 --- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py +++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py @@ -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> diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py index 62363a207bd..52795906876 100644 --- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py +++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py @@ -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 diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py index b5c59e6f501..fdbaec052e4 100644 --- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py +++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py @@ -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> diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py index 34e047ab003..1b1d6fc16f2 100644 --- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py +++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py @@ -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> diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py index 75168420287..6e13861374a 100644 --- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py +++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py @@ -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> diff --git a/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html b/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html index 0cfce2f7124..b6a33f579b4 100644 --- a/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html +++ b/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html @@ -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> diff --git a/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html b/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html index dabc8068931..cd1260e3613 100644 --- a/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html +++ b/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html @@ -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. diff --git a/tests/wpt/web-platform-tests/layout-instability/observe-layout-shift.html b/tests/wpt/web-platform-tests/layout-instability/observe-layout-shift.html deleted file mode 100644 index 1c35fe2aa23..00000000000 --- a/tests/wpt/web-platform-tests/layout-instability/observe-layout-shift.html +++ /dev/null @@ -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> diff --git a/tests/wpt/web-platform-tests/layout-instability/recent-input.html b/tests/wpt/web-platform-tests/layout-instability/recent-input.html new file mode 100644 index 00000000000..a4fa0d8b0d9 --- /dev/null +++ b/tests/wpt/web-platform-tests/layout-instability/recent-input.html @@ -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> diff --git a/tests/wpt/web-platform-tests/layout-instability/toJSON.html b/tests/wpt/web-platform-tests/layout-instability/toJSON.html index 3d39d623e13..374a7de0cd1 100644 --- a/tests/wpt/web-platform-tests/layout-instability/toJSON.html +++ b/tests/wpt/web-platform-tests/layout-instability/toJSON.html @@ -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> |