diff options
33 files changed, 1155 insertions, 963 deletions
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json index 6c75798b1b1..b120cdca546 100644 --- a/tests/wpt/metadata/MANIFEST.json +++ b/tests/wpt/metadata/MANIFEST.json @@ -117941,6 +117941,78 @@ {} ] ], + "css/css-layout-api/position-fragment-htb-ltr.https.html": [ + [ + "/css/css-layout-api/position-fragment-htb-ltr.https.html", + [ + [ + "/css/css-layout-api/position-fragment-ref.html", + "==" + ] + ], + {} + ] + ], + "css/css-layout-api/position-fragment-htb-rtl.https.html": [ + [ + "/css/css-layout-api/position-fragment-htb-rtl.https.html", + [ + [ + "/css/css-layout-api/position-fragment-ref.html", + "==" + ] + ], + {} + ] + ], + "css/css-layout-api/position-fragment-vlr-ltr.https.html": [ + [ + "/css/css-layout-api/position-fragment-vlr-ltr.https.html", + [ + [ + "/css/css-layout-api/position-fragment-ref.html", + "==" + ] + ], + {} + ] + ], + "css/css-layout-api/position-fragment-vlr-rtl.https.html": [ + [ + "/css/css-layout-api/position-fragment-vlr-rtl.https.html", + [ + [ + "/css/css-layout-api/position-fragment-ref.html", + "==" + ] + ], + {} + ] + ], + "css/css-layout-api/position-fragment-vrl-ltr.https.html": [ + [ + "/css/css-layout-api/position-fragment-vrl-ltr.https.html", + [ + [ + "/css/css-layout-api/position-fragment-ref.html", + "==" + ] + ], + {} + ] + ], + "css/css-layout-api/position-fragment-vrl-rtl.https.html": [ + [ + "/css/css-layout-api/position-fragment-vrl-rtl.https.html", + [ + [ + "/css/css-layout-api/position-fragment-ref.html", + "==" + ] + ], + {} + ] + ], "css/css-layout-api/style-map-multi.https.html": [ [ "/css/css-layout-api/style-map-multi.https.html", @@ -122777,18 +122849,6 @@ {} ] ], - "css/css-position/position-sticky-nested-bottom.html": [ - [ - "/css/css-position/position-sticky-nested-bottom.html", - [ - [ - "/css/css-position/position-sticky-nested-bottom-ref.html", - "==" - ] - ], - {} - ] - ], "css/css-position/position-sticky-nested-inline.html": [ [ "/css/css-position/position-sticky-nested-inline.html", @@ -122801,30 +122861,6 @@ {} ] ], - "css/css-position/position-sticky-nested-left.html": [ - [ - "/css/css-position/position-sticky-nested-left.html", - [ - [ - "/css/css-position/position-sticky-nested-left-ref.html", - "==" - ] - ], - {} - ] - ], - "css/css-position/position-sticky-nested-right.html": [ - [ - "/css/css-position/position-sticky-nested-right.html", - [ - [ - "/css/css-position/position-sticky-nested-right-ref.html", - "==" - ] - ], - {} - ] - ], "css/css-position/position-sticky-nested-table.html": [ [ "/css/css-position/position-sticky-nested-table.html", @@ -122837,18 +122873,6 @@ {} ] ], - "css/css-position/position-sticky-nested-top.html": [ - [ - "/css/css-position/position-sticky-nested-top.html", - [ - [ - "/css/css-position/position-sticky-nested-top-ref.html", - "==" - ] - ], - {} - ] - ], "css/css-position/position-sticky-rendering.html": [ [ "/css/css-position/position-sticky-rendering.html", @@ -248314,6 +248338,11 @@ {} ] ], + "css/css-layout-api/position-fragment-ref.html": [ + [ + {} + ] + ], "css/css-layout-api/style-map-multi-ref.html": [ [ {} @@ -248334,6 +248363,11 @@ {} ] ], + "css/css-layout-api/support/layout-position-child-worklet.js": [ + [ + {} + ] + ], "css/css-lists/OWNERS": [ [ {} @@ -249784,36 +249818,16 @@ {} ] ], - "css/css-position/position-sticky-nested-bottom-ref.html": [ - [ - {} - ] - ], "css/css-position/position-sticky-nested-inline-ref.html": [ [ {} ] ], - "css/css-position/position-sticky-nested-left-ref.html": [ - [ - {} - ] - ], - "css/css-position/position-sticky-nested-right-ref.html": [ - [ - {} - ] - ], "css/css-position/position-sticky-nested-table-ref.html": [ [ {} ] ], - "css/css-position/position-sticky-nested-top-ref.html": [ - [ - {} - ] - ], "css/css-position/position-sticky-rendering-ref.html": [ [ {} @@ -292669,6 +292683,11 @@ {} ] ], + "service-workers/service-worker/resources/navigation-timing-worker.js": [ + [ + {} + ] + ], "service-workers/service-worker/resources/notification_icon.py": [ [ {} @@ -297969,11 +297988,21 @@ {} ] ], + "workers/modules/resources/dynamic-import-given-url-worker.js": [ + [ + {} + ] + ], "workers/modules/resources/dynamic-import-worker.js": [ [ {} ] ], + "workers/modules/resources/import-meta-url-worker.js": [ + [ + {} + ] + ], "workers/modules/resources/nested-dynamic-import-worker.js": [ [ {} @@ -314246,6 +314275,30 @@ {} ] ], + "css/css-position/position-sticky-nested-bottom.html": [ + [ + "/css/css-position/position-sticky-nested-bottom.html", + {} + ] + ], + "css/css-position/position-sticky-nested-left.html": [ + [ + "/css/css-position/position-sticky-nested-left.html", + {} + ] + ], + "css/css-position/position-sticky-nested-right.html": [ + [ + "/css/css-position/position-sticky-nested-right.html", + {} + ] + ], + "css/css-position/position-sticky-nested-top.html": [ + [ + "/css/css-position/position-sticky-nested-top.html", + {} + ] + ], "css/css-position/position-sticky-offset-overflow.html": [ [ "/css/css-position/position-sticky-offset-overflow.html", @@ -317528,6 +317581,12 @@ {} ] ], + "css/css-typed-om/the-stylepropertymap/properties/column-width.html": [ + [ + "/css/css-typed-om/the-stylepropertymap/properties/column-width.html", + {} + ] + ], "css/css-typed-om/the-stylepropertymap/properties/direction.html": [ [ "/css/css-typed-om/the-stylepropertymap/properties/direction.html", @@ -317852,6 +317911,12 @@ {} ] ], + "css/css-typed-om/the-stylepropertymap/properties/radius.html": [ + [ + "/css/css-typed-om/the-stylepropertymap/properties/radius.html", + {} + ] + ], "css/css-typed-om/the-stylepropertymap/properties/resize.html": [ [ "/css/css-typed-om/the-stylepropertymap/properties/resize.html", @@ -361178,6 +361243,12 @@ {} ] ], + "service-workers/service-worker/navigation-timing.https.html": [ + [ + "/service-workers/service-worker/navigation-timing.https.html", + {} + ] + ], "service-workers/service-worker/onactivate-script-error.https.html": [ [ "/service-workers/service-worker/onactivate-script-error.https.html", @@ -370170,6 +370241,12 @@ {} ] ], + "workers/modules/dedicated-worker-import-meta.html": [ + [ + "/workers/modules/dedicated-worker-import-meta.html", + {} + ] + ], "workers/modules/dedicated-worker-import.html": [ [ "/workers/modules/dedicated-worker-import.html", @@ -502713,6 +502790,34 @@ "a25a85095781de557edde6dd02b82ee052642bf1", "reftest" ], + "css/css-layout-api/position-fragment-htb-ltr.https.html": [ + "761ed3e46d6485b1208953c292015432da5f99e0", + "reftest" + ], + "css/css-layout-api/position-fragment-htb-rtl.https.html": [ + "8a2684c25ef3603e498cf33d32dc8a2c4b4a50d5", + "reftest" + ], + "css/css-layout-api/position-fragment-ref.html": [ + "42b0dbfd4a950f8e72c2de942682565c91b06bd1", + "support" + ], + "css/css-layout-api/position-fragment-vlr-ltr.https.html": [ + "afe6dc92c2d732a81ae2ca2c1747a12ef421c073", + "reftest" + ], + "css/css-layout-api/position-fragment-vlr-rtl.https.html": [ + "9db1e576eabcfb88ab8fcee3355195533798a427", + "reftest" + ], + "css/css-layout-api/position-fragment-vrl-ltr.https.html": [ + "c6c5f3c2d2adb96f140ab02f8ffa0ee1724c2f2b", + "reftest" + ], + "css/css-layout-api/position-fragment-vrl-rtl.https.html": [ + "bfeb2a9f1c84ebe1423ca6b92d8751f5106f1275", + "reftest" + ], "css/css-layout-api/style-map-multi-ref.html": [ "d33f700e795484641d3cc7db1c26e09dca952209", "support" @@ -502737,6 +502842,10 @@ "87af0bfedbe9d4ea23e904edc5b22382a5d5d56c", "support" ], + "css/css-layout-api/support/layout-position-child-worklet.js": [ + "7c05d553e6cba23d69bd40b9ad90e701440e9071", + "support" + ], "css/css-layout-api/supports.https.html": [ "be6b57f5a85f99a64e755da22411ace3fba2992f", "testharness" @@ -505674,20 +505783,16 @@ "testharness" ], "css/css-position/position-sticky-left.html": [ - "2a04672cdac818a6887eac7d6824ea85d3d0559d", + "d28b5ee55d5fed4b263b130df700092e14b9e784", "testharness" ], "css/css-position/position-sticky-margins.html": [ "3f6bc9537adf2a4d477f99866d73f42b65c26db3", "testharness" ], - "css/css-position/position-sticky-nested-bottom-ref.html": [ - "59a8e46358a8a5bf8638a2d1982c63becef5bc77", - "support" - ], "css/css-position/position-sticky-nested-bottom.html": [ - "3604a921be04927dd19b805b7c9abaed6d0e7c72", - "reftest" + "82b1bdada6bfc0c2b6fc04ee3fdd9036e807c1e4", + "testharness" ], "css/css-position/position-sticky-nested-inline-ref.html": [ "8fb9378e91a20b71ef886b9aac0147b25d00a9a3", @@ -505697,21 +505802,13 @@ "50be9f2fb6ab9295081f6f13705be4853e48fdde", "reftest" ], - "css/css-position/position-sticky-nested-left-ref.html": [ - "52804c5589c3035818cd653c1801a70645a9fe99", - "support" - ], "css/css-position/position-sticky-nested-left.html": [ - "c32881097147e285b6ee66e6239af4808d780c83", - "reftest" - ], - "css/css-position/position-sticky-nested-right-ref.html": [ - "5703ad6457deca332232e510dc479c39b7020d24", - "support" + "dabe2ee93d0f0078beacf5c715fd040558ad9c08", + "testharness" ], "css/css-position/position-sticky-nested-right.html": [ - "39683624316599779b0efcb347010b92694e02a6", - "reftest" + "023e0eea58b52a249c2313c533be38a033f40da0", + "testharness" ], "css/css-position/position-sticky-nested-table-ref.html": [ "7b8956bc720e2e25e7ff0bc5889812c26837ab58", @@ -505721,13 +505818,9 @@ "87a80629bcfcace28d4f13bce99325d55d317574", "reftest" ], - "css/css-position/position-sticky-nested-top-ref.html": [ - "66ea8b8c72023089d52e6ebdf5bfff5d56259bfc", - "support" - ], "css/css-position/position-sticky-nested-top.html": [ - "88e35164b6ede3adf9727989cf59ff9956bdbae7", - "reftest" + "ae24eeaea7f25860fa770141d0894abf9e961c5e", + "testharness" ], "css/css-position/position-sticky-offset-overflow.html": [ "cab620b2008a9df57abc6907b1199e35a4099241", @@ -505754,7 +505847,7 @@ "reftest" ], "css/css-position/position-sticky-right.html": [ - "80caf6fb1e6c84dbf3e371a11166ac5b71bba687", + "8bd2ae1a53ade0a524d98f5c8b0fe2ebce66d338", "testharness" ], "css/css-position/position-sticky-root-scroller.html": [ @@ -505862,7 +505955,7 @@ "reftest" ], "css/css-position/resources/sticky-util.js": [ - "c7b441a3a07276cad9528dd3ef7d82844d06e2d8", + "7f8a5b4d9047c07378473362acb3d001e70d5663", "support" ], "css/css-properties-values-api/register-property-syntax-parsing.html": [ @@ -523049,6 +523142,10 @@ "276ec2870bc105b046669daa0bdbeffdb080479c", "testharness" ], + "css/css-typed-om/the-stylepropertymap/properties/column-width.html": [ + "3f6faf5b2371d8be9483148f3bfa562710c9c3ef", + "testharness" + ], "css/css-typed-om/the-stylepropertymap/properties/direction.html": [ "b7c49aba4e8785f819beeb444c113d937d441089", "testharness" @@ -523265,6 +523362,10 @@ "4e3eccee58cec470febe4cd9a9149f4b4436487e", "testharness" ], + "css/css-typed-om/the-stylepropertymap/properties/radius.html": [ + "ae21056fb993efb7112e0bc42fe1269f6bc0c72e", + "testharness" + ], "css/css-typed-om/the-stylepropertymap/properties/resize.html": [ "533f287facbc82118469f75f9f88a1372848d3b2", "testharness" @@ -572718,7 +572819,7 @@ "support" ], "interfaces/payment-handler.idl": [ - "ddd283da0dadaffb3403652651c30f0f59007331", + "6d9157e515e419c7a2fffc61a1f8e3b23a4550ba", "support" ], "interfaces/payment-request.idl": [ @@ -582434,7 +582535,7 @@ "testharness" ], "payment-handler/can-make-payment-event.https.html": [ - "1433a0dcee409e808adc6ed5b65a532128a1d350", + "7a361f57439425d5ec5c583ad363d9acf9fa7e1d", "testharness" ], "payment-handler/interfaces.https.any.js": [ @@ -582450,11 +582551,11 @@ "support" ], "payment-handler/payment-instruments.https.html": [ - "14a67dbd2670c661d61ac8dc61c950e572369279", + "372d636227a5be6ede37e7d67cf24d03030eccf5", "testharness" ], "payment-handler/payment-request-event.https.html": [ - "f9556317297607b5e5f649343ae6f365a4df9552", + "37e76b630197399daa3eb5ea49e8a4150c61c29c", "testharness" ], "payment-handler/register-and-activate-service-worker.js": [ @@ -593421,6 +593522,10 @@ "109f463deeaad2d60d4dab644c782ad633e97a7d", "testharness" ], + "service-workers/service-worker/navigation-timing.https.html": [ + "cf5224b43bf0ba01ec409bf07faeed65e50162ed", + "testharness" + ], "service-workers/service-worker/onactivate-script-error.https.html": [ "bfef14af67c3a21523b5a7283d7cf86ac288f081", "testharness" @@ -594189,6 +594294,10 @@ "56447ddcf101a60c64b4d2f7168c21deb4b3c0a8", "support" ], + "service-workers/service-worker/resources/navigation-timing-worker.js": [ + "efe2c9dc9e63ee0f25a15ce1ed37f116e43e7255", + "support" + ], "service-workers/service-worker/resources/notification_icon.py": [ "ec72a4c120ccfac3a165576f59a0e02b945343b3", "support" @@ -608605,6 +608714,10 @@ "6bffa3be83d81e2faa93119e710e4fee93fb855e", "testharness" ], + "workers/modules/dedicated-worker-import-meta.html": [ + "ba8b24064e23f018ffd3ac9e4184d6f856123bff", + "testharness" + ], "workers/modules/dedicated-worker-import.html": [ "752698b4f8f7298ca2ecc74d41887117a636118a", "testharness" @@ -608617,10 +608730,18 @@ "f4df69196f64cd81e92705186325004ac94db659", "support" ], + "workers/modules/resources/dynamic-import-given-url-worker.js": [ + "372686abd1b2d2d09228a44f6420c646319e0bd1", + "support" + ], "workers/modules/resources/dynamic-import-worker.js": [ "444e313fe51923097e3672d88d0afd30aac5ecab", "support" ], + "workers/modules/resources/import-meta-url-worker.js": [ + "83f231a886c36543721c2b0204c18b97d10968f8", + "support" + ], "workers/modules/resources/nested-dynamic-import-worker.js": [ "4ee05f3be8a1b41a9e2fa3e24d40ec5103f67eac", "support" diff --git a/tests/wpt/metadata/html/dom/dynamic-markup-insertion/opening-the-input-stream/010.html.ini b/tests/wpt/metadata/html/dom/dynamic-markup-insertion/opening-the-input-stream/010.html.ini deleted file mode 100644 index 33164945eb6..00000000000 --- a/tests/wpt/metadata/html/dom/dynamic-markup-insertion/opening-the-input-stream/010.html.ini +++ /dev/null @@ -1,4 +0,0 @@ -[010.html] - [Salvagability of document.opened document] - expected: FAIL - diff --git a/tests/wpt/metadata/workers/modules/dedicated-worker-import-meta.html.ini b/tests/wpt/metadata/workers/modules/dedicated-worker-import-meta.html.ini new file mode 100644 index 00000000000..5d11920aaf0 --- /dev/null +++ b/tests/wpt/metadata/workers/modules/dedicated-worker-import-meta.html.ini @@ -0,0 +1,8 @@ +[dedicated-worker-import-meta.html] + expected: ERROR + [Test import.meta.url on the top-level module script.] + expected: TIMEOUT + + [Test import.meta.url on the imported module script.] + expected: NOTRUN + diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-htb-ltr.https.html b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-htb-ltr.https.html new file mode 100644 index 00000000000..b09cb7067d5 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-htb-ltr.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="position-fragment-ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: horizontal-tb; + direction: ltr; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 5; + --block-offset: 25; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 50; + --block-offset: 60; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-htb-rtl.https.html b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-htb-rtl.https.html new file mode 100644 index 00000000000..2d65b8cb988 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-htb-rtl.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="position-fragment-ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: horizontal-tb; + direction: rtl; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 85; + --block-offset: 25; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 35; + --block-offset: 60; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-ref.html b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-ref.html new file mode 100644 index 00000000000..4ce0a6e39de --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<style> +.result { + position: relative; + background: green; + width: 100px; + height: 100px; +} + +.result-child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + position: absolute; + top: 25px; + left: 5px; +} + +.result-child-2 { + background: rebeccapurple; + width: 15px; + height: 25px; + + position: absolute; + top: 60px; + left: 50px; +} +</style> +<div class="result"> + <div class="result-child-1"></div> + <div class="result-child-2"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vlr-ltr.https.html b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vlr-ltr.https.html new file mode 100644 index 00000000000..62a5980307d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vlr-ltr.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="position-fragment-ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-lr; + direction: ltr; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 25; + --block-offset: 5; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 60; + --block-offset: 50; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vlr-rtl.https.html b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vlr-rtl.https.html new file mode 100644 index 00000000000..a9983b1eb20 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vlr-rtl.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="position-fragment-ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-lr; + direction: rtl; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 55; + --block-offset: 5; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 15; + --block-offset: 50; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vrl-ltr.https.html b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vrl-ltr.https.html new file mode 100644 index 00000000000..090128562f8 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vrl-ltr.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="position-fragment-ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-rl; + direction: ltr; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 25; + --block-offset: 85; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 60; + --block-offset: 35; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vrl-rtl.https.html b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vrl-rtl.https.html new file mode 100644 index 00000000000..e16f26b1d4f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/position-fragment-vrl-rtl.https.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment"> +<link rel="match" href="position-fragment-ref.html"> +<meta name="assert" content="This test checks that child fragments get positioned correctly." /> +<style> +.test { + background: red; + width: 100px; + height: 100px; +} + +.test { + writing-mode: vertical-rl; + direction: rtl; +} + +.child-1 { + background: rebeccapurple; + width: 10px; + height: 20px; + + --inline-offset: 55; + --block-offset: 85; +} + +.child-2 { + writing-mode: vertical-rl; + background: rebeccapurple; + width: 15px; + height: 25px; + + --inline-offset: 15; + --block-offset: 35; +} + +@supports (display: layout(test)) { + .test { + background: green; + display: layout(test); + } +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> + +<div class="test"> + <div class="child-1"></div> + <div class="child-2"></div> +</div> + +<script> +importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'}); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-layout-api/support/layout-position-child-worklet.js b/tests/wpt/web-platform-tests/css/css-layout-api/support/layout-position-child-worklet.js new file mode 100644 index 00000000000..1ccfeab5aeb --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-layout-api/support/layout-position-child-worklet.js @@ -0,0 +1,22 @@ +registerLayout('test', class { + static get childInputProperties() { + return [ + '--inline-offset', + '--block-offset', + ]; + } + + *intrinsicSizes() {} + *layout(children, edges, constraints, styleMap) { + const childFragments = yield children.map((child) => { + return child.layoutNextFragment({}); + }); + + for (let i = 0; i < children.length; i++) { + childFragments[i].inlineOffset = parseInt(children[i].styleMap.get('--inline-offset').toString()); + childFragments[i].blockOffset = parseInt(children[i].styleMap.get('--block-offset').toString()); + } + + return {autoBlockSize: 0, childFragments}; + } +}); diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-left.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-left.html index 0c8bb58b7cd..054cf10eabc 100644 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-left.html +++ b/tests/wpt/web-platform-tests/css/css-position/position-sticky-left.html @@ -12,29 +12,29 @@ <script> test(() => { - const elements = setupStickyTest('left', 50, true); + const elements = setupStickyTest('left', 50); elements.scroller.scrollLeft = 100; - const nonStickyLeftY = elements.container.offsetLeft + + const nonStickyLeftX = elements.container.offsetLeft + elements.filler.clientWidth; - assert_equals(elements.sticky.offsetLeft, nonStickyLeftY); + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); }, 'before reaching the sticking point the sticky box should not be offset'); test(() => { - const elements = setupStickyTest('left', 50, true); + const elements = setupStickyTest('left', 50); elements.scroller.scrollLeft = 200; // This math actually cancels to sticky.offsetLeft == (scroller.scrollLeft + 50), // but for clarity the calculations are left explicit. - const nonStickyLeftY = elements.container.offsetLeft + + const nonStickyLeftX = elements.container.offsetLeft + elements.filler.clientWidth; - const targetLeftY = elements.scroller.scrollLeft + 50; - const stickyOffset = targetLeftY - nonStickyLeftY; + const targetLeftX = elements.scroller.scrollLeft + 50; + const stickyOffset = targetLeftX - nonStickyLeftX; - assert_equals(elements.sticky.offsetLeft, nonStickyLeftY + stickyOffset); + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX + stickyOffset); }, 'after reaching the sticking point the sticky box should be offset'); test(() => { - const elements = setupStickyTest('left', 50, true); + const elements = setupStickyTest('left', 50); elements.scroller.scrollLeft = 300; const maxOffsetInContainer = elements.container.offsetLeft + elements.container.clientWidth - elements.sticky.clientWidth; diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-bottom-ref.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-bottom-ref.html deleted file mode 100644 index 6be2b5a7b1d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-bottom-ref.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<title>Reference for nested bottom-constrained position:sticky elements should render correctly</title> - -<style> -.group { - display: inline-block; - position: relative; - width: 150px; - height: 250px; -} - -.scroller { - position: relative; - width: 100px; - height: 200px; - overflow-x: hidden; - overflow-y: auto; -} - -.contents { - height: 500px; -} - -.outerIndicator { - background-color: green; - position: absolute; - left: 0; - width: 100%; - height: 100px; -} - -.innerIndicator { - background-color: blue; - position: absolute; - left: 0; - width: 100%; - height: 50px; -} -</style> - -<script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollTop = 75; - document.getElementById('scroller2').scrollTop = 175; - document.getElementById('scroller3').scrollTop = 250; -}); -</script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="top: 200px;"></div> - <div class="innerIndicator" style="top: 200px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="top: 250px;"></div> - <div class="innerIndicator" style="top: 290px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="top: 300px;"></div> - <div class="innerIndicator" style="top: 350px;"></div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-bottom.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-bottom.html index d4d20e571a3..edea11fe132 100644 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-bottom.html +++ b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-bottom.html @@ -1,135 +1,68 @@ <!DOCTYPE html> <title>Nested bottom-constrained position:sticky elements should render correctly</title> -<link rel="match" href="position-sticky-nested-bottom-ref.html" /> + <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> <meta name="assert" content="This test checks that nested position:sticky elements with a bottom constraint render correctly" /> -<style> -.group { - display: inline-block; - position: relative; - width: 150px; - height: 250px; -} - -.scroller { - position: relative; - width: 100px; - height: 200px; - overflow-x: hidden; - overflow-y: auto; -} - -.contents { - height: 500px; -} - -.prepadding { - height: 200px; -} - -.container { - height: 200px; -} - -.filler { - height: 100px; -} - -.outerIndicator { - background-color: red; - position: absolute; - left: 0; - width: 100%; - height: 100px; -} +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> -.innerIndicator { - background-color: red; - position: absolute; - left: 0; - width: 100%; - height: 50px; -} +<script src="resources/sticky-util.js"></script> -.outerSticky { - background-color: green; - position: sticky; - bottom: 25px; - width: 100%; - height: 100px; -} - -.innerFiller { - height: 50px; -} - -.innerSticky { - background-color: blue; - position: sticky; - bottom: 35px; - width: 100%; - height: 50px; -} -</style> +<body></body> <script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollTop = 75; - document.getElementById('scroller2').scrollTop = 175; - document.getElementById('scroller3').scrollTop = 250; -}); +test(() => { + const elements = setupNestedStickyTest('bottom', 25, 35); + elements.scroller.scrollTop = 300; + const nonStickyTopY = elements.container.offsetTop + + elements.filler.clientHeight; + assert_equals(elements.sticky.offsetTop, nonStickyTopY); + // The inner sticky should not be offset from the outer. + const nonStickyInnerTopY = elements.sticky.clientHeight - + elements.innerSticky.clientHeight; + assert_equals(elements.innerSticky.offsetTop, nonStickyInnerTopY); +}, 'before reaching the sticking point, neither sticky box should be offset'); + +test(() => { + const elements = setupNestedStickyTest('bottom', 25, 50); + elements.scroller.scrollTop = 150; + const nonStickyTopY = elements.container.offsetTop + + elements.filler.clientHeight; + assert_equals(elements.sticky.offsetTop, nonStickyTopY); + assert_equals(elements.innerSticky.offsetTop, 35); +}, 'the inner sticky can stick before the outer one if necessary'); + +test(() => { + const elements = setupNestedStickyTest('bottom', 25, 35); + elements.scroller.scrollTop = 100; + + const nonStickyTopY = elements.container.offsetTop + + elements.filler.clientHeight; + const nonStickyBottomY = nonStickyTopY + elements.sticky.clientHeight; + const targetBottomY = elements.scroller.clientHeight + + elements.scroller.scrollTop - 25; + const stickyOffset = nonStickyBottomY - targetBottomY; + assert_equals(elements.sticky.offsetTop, nonStickyTopY - stickyOffset); + + // The inner sticky has similar math, but its offsetTop is relative to the + // sticky element and in this test is (height - the difference between the + // top values). + assert_equals(elements.innerSticky.offsetTop, 40); +}, 'both sticky boxes can be stuck at the same time'); + +test(() => { + const elements = setupNestedStickyTest('bottom', 25, 35); + elements.scroller.scrollTop = 0; + assert_equals(elements.sticky.offsetTop, elements.container.offsetTop); + assert_equals(elements.innerSticky.offsetTop, 0); +}, 'neither sticky can escape their containing block'); + +test(() => { + const elements = setupNestedStickyTest('bottom', 25, 500); + elements.scroller.scrollTop = 200; + // It doesn't matter how big the inner sticky offset is, it cannot escape its + // containing block (the outer sticky). + assert_equals(elements.innerSticky.offsetTop, 0); +}, 'the inner sticky cannot be pushed outside the outer sticky'); </script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="outerIndicator" style="top: 200px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="filler"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="top: 0;"></div> - <div class="innerFiller"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="outerIndicator" style="top: 250px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="filler"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="top: 40px;"></div> - <div class="innerFiller"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="outerIndicator" style="top: 300px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="filler"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="top: 50px;"></div> - <div class="innerFiller"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-left-ref.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-left-ref.html deleted file mode 100644 index d3ab0d593d6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-left-ref.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<title>Reference for nested left-constrained position:sticky elements should render correctly</title> - -<style> -.group { - position: relative; - width: 250px; - height: 150px; -} - -.scroller { - position: relative; - width: 200px; - height: 100px; - overflow-x: auto; - overflow-y: hidden; -} - -.contents { - height: 100%; - width: 500px; -} - -.outerIndicator { - background-color: green; - position: absolute; - top: 0; - height: 100%; - width: 100px; -} - -.innerIndicator { - background-color: blue; - position: absolute; - top: 0; - height: 100%; - width: 50px; -} -</style> - -<script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollLeft = 50; - document.getElementById('scroller2').scrollLeft = 125; - document.getElementById('scroller3').scrollLeft = 225; -}); -</script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="left: 150px;"></div> - <div class="innerIndicator" style="left: 150px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="left: 175px;"></div> - <div class="innerIndicator" style="left: 185px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="left: 200px;"></div> - <div class="innerIndicator" style="left: 250px;"></div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-left.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-left.html index b5a23abeccf..755b69ac3c5 100644 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-left.html +++ b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-left.html @@ -1,141 +1,75 @@ <!DOCTYPE html> <title>Nested left-constrained position:sticky elements should render correctly</title> -<link rel="match" href="position-sticky-nested-left-ref.html" /> + <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> <meta name="assert" content="This test checks that nested position:sticky elements with a left constraint render correctly" /> -<style> -.group { - position: relative; - width: 250px; - height: 150px; -} - -.scroller { - position: relative; - width: 200px; - height: 100px; - overflow-x: auto; - overflow-y: hidden; -} - -.contents { - height: 100%; - width: 500px; - /* Allow nice formatting of inline divs. Fonts are not used in this test. */ - font-size: 0; -} - -.prepadding { - display: inline-block; - height: 100%; - width: 100px; -} - -.container { - display: inline-block; - height: 100%; - width: 200px; -} - -.innerpadding { - display: inline-block; - height: 100%; - width: 50px; -} - -.outerIndicator { - background-color: red; - position: absolute; - top: 0; - display: inline-block; - height: 100%; - width: 100px; -} +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> -.innerIndicator { - background-color: red; - position: absolute; - top: 0; - display: inline-block; - height: 100%; - width: 50px; -} +<script src="resources/sticky-util.js"></script> -.outerSticky { - background-color: green; - position: sticky; - left: 50px; - display: inline-block; - height: 100%; - width: 100px; -} - -.innerSticky { - background-color: blue; - position: sticky; - left: 60px; - display: inline-block; - height: 100%; - width: 50px; -} - -</style> +<body></body> <script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollLeft = 50; - document.getElementById('scroller2').scrollLeft = 125; - document.getElementById('scroller3').scrollLeft = 225; -}); +test(() => { + const elements = setupNestedStickyTest('left', 50, 60); + elements.scroller.scrollLeft = 100; + const nonStickyLeftX = elements.container.offsetLeft + + elements.filler.clientWidth; + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); + // The inner sticky should not be offset from the outer. + assert_equals(elements.innerSticky.offsetLeft, 0); +}, 'before reaching the sticking point, neither sticky box should be offset'); + +test(() => { + const elements = setupNestedStickyTest('left', 50, 60); + elements.scroller.scrollLeft = 145; + const nonStickyLeftX = elements.container.offsetLeft + + elements.filler.clientWidth; + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); + assert_equals(elements.innerSticky.offsetLeft, 5); +}, 'the inner sticky can stick before the outer one if necessary'); + +test(() => { + const elements = setupNestedStickyTest('left', 50, 60); + elements.scroller.scrollLeft = 200; + + // This math cancels to sticky.offsetLeft == (scroller.scrollLeft + 50), but + // for clarity the calculations are left explicit. + const nonStickyLeftX = elements.container.offsetLeft + + elements.filler.clientWidth; + const targetLeftX = elements.scroller.scrollLeft + 50; + const stickyOffset = targetLeftX - nonStickyLeftX; + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX + stickyOffset); + + // The inner sticky has similar math, but its offsetLeft is relative to the + // sticky element and in this test is the difference between the left values. + assert_equals(elements.innerSticky.offsetLeft, 10); +}, 'both sticky boxes can be stuck at the same time'); + +test(() => { + const elements = setupNestedStickyTest('left', 50, 60); + elements.scroller.scrollLeft = 300; + const maxOffsetInContainer = elements.container.offsetLeft + + elements.container.clientWidth - elements.sticky.clientWidth; + assert_equals(elements.sticky.offsetLeft, maxOffsetInContainer); + const maxOffsetInOuterSticky = elements.sticky.clientWidth - + elements.innerSticky.clientWidth; + assert_equals(elements.innerSticky.offsetLeft, maxOffsetInOuterSticky); +}, 'neither sticky can escape their containing block'); + +test(() => { + const elements = setupNestedStickyTest('left', 50, 300); + elements.scroller.scrollLeft = 100; + // The outer sticky has not stuck yet. + const nonStickyLeftX = elements.container.offsetLeft + + elements.filler.clientWidth; + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); + // But the inner sticky still cannot escape the outer sticky (as it is the + // containing block). + const maxOffsetInOuterSticky = elements.sticky.clientWidth - + elements.innerSticky.clientWidth; + assert_equals(elements.innerSticky.offsetLeft, maxOffsetInOuterSticky); +}, 'the inner sticky cannot be pushed outside the outer sticky'); </script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="outerIndicator" style="left: 150px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="innerpadding"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="left: 0;"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="outerIndicator" style="left: 175px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="innerpadding"> - </div><div class="outerSticky"> - <div class="innerIndicator" style="left: 10px;"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="outerIndicator" style="left: 200px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="innerpadding"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="left: 50px;"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-right-ref.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-right-ref.html deleted file mode 100644 index 07852ba6041..00000000000 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-right-ref.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<title>Reference for position:sticky elements should respect the right constraint</title> - -<style> -.group { - position: relative; - width: 250px; - height: 150px; -} - -.scroller { - position: relative; - width: 200px; - height: 100px; - overflow-x: auto; - overflow-y: hidden; -} - -.contents { - height: 100%; - width: 500px; -} - -.outerIndicator { - background-color: green; - position: absolute; - top: 0; - height: 100%; - width: 100px; -} - -.innerIndicator { - background-color: blue; - position: absolute; - top: 0; - height: 100%; - width: 50px; -} -</style> - -<script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollLeft = 75; - document.getElementById('scroller2').scrollLeft = 175; - document.getElementById('scroller3').scrollLeft = 250; -}); -</script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="left: 200px;"></div> - <div class="innerIndicator" style="left: 200px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="left: 250px;"></div> - <div class="innerIndicator" style="left: 290px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="contents"> - <div class="outerIndicator" style="left: 300px;"></div> - <div class="innerIndicator" style="left: 350px;"></div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-right.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-right.html index 411f722eec7..9878aa774d8 100644 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-right.html +++ b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-right.html @@ -1,149 +1,69 @@ <!DOCTYPE html> <title>Nested right-constrained position:sticky elements should render correctly</title> -<link rel="match" href="position-sticky-nested-right-ref.html" /> + <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> <meta name="assert" content="This test checks that nested position:sticky elements with a right constraint render correctly" /> -<style> -.group { - position: relative; - width: 250px; - height: 150px; -} - -.scroller { - position: relative; - width: 200px; - height: 100px; - overflow-x: auto; - overflow-y: hidden; -} - -.contents { - height: 100%; - width: 500px; - /* Allow nice formatting of inline divs. Fonts are not used in this test. */ - font-size: 0; -} - -.prepadding { - display: inline-block; - height: 100%; - width: 200px; -} - -.container { - display: inline-block; - height: 100%; - width: 200px; -} - -.filler { - display: inline-block; - height: 100%; - width: 100px; -} - -.outerIndicator { - background-color: red; - position: absolute; - top: 0; - display: inline-block; - height: 100%; - width: 100px; -} +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> -.innerIndicator { - background-color: red; - position: absolute; - top: 0; - display: inline-block; - height: 100%; - width: 50px; -} +<script src="resources/sticky-util.js"></script> -.outerSticky { - background-color: green; - position: sticky; - right: 25px; - display: inline-block; - height: 100%; - width: 100px; -} - -.innerFiller { - display: inline-block; - height: 100%; - width: 50px; -} - -.innerSticky { - background-color: blue; - position: sticky; - right: 35px; - display: inline-block; - height: 100%; - width: 50px; -} -</style> +<body></body> <script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollLeft = 75; - document.getElementById('scroller2').scrollLeft = 175; - document.getElementById('scroller3').scrollLeft = 250; -}); -</script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="outerIndicator" style="left: 200px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="filler"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="left: 0;"></div> - <div class="innerFiller"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> +test(() => { + const elements = setupNestedStickyTest('right', 25, 35); + elements.scroller.scrollLeft = 200; + const nonStickyLeftX = elements.container.offsetLeft + + elements.filler.clientWidth; + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); + // The inner sticky should not be offset from the outer. + const nonStickyInnerLeftX = elements.sticky.clientWidth - + elements.innerSticky.clientWidth; + assert_equals(elements.innerSticky.offsetLeft, nonStickyInnerLeftX); +}, 'before reaching the sticking point, neither sticky box should be offset'); + +test(() => { + const elements = setupNestedStickyTest('right', 25, 50); + elements.scroller.scrollLeft = 150; + const nonStickyLeftX = elements.container.offsetLeft + + elements.filler.clientWidth; + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); + assert_equals(elements.innerSticky.offsetLeft, 35); +}, 'the inner sticky can stick before the outer one if necessary'); + +test(() => { + const elements = setupNestedStickyTest('right', 25, 35); + elements.scroller.scrollLeft = 100; + + const nonStickyLeftX = elements.container.offsetLeft + + elements.filler.clientWidth; + const nonStickyBottomX = nonStickyLeftX + elements.sticky.clientWidth; + const targetBottomX = elements.scroller.clientWidth + + elements.scroller.scrollLeft - 25; + const stickyOffset = nonStickyBottomX - targetBottomX; + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX - stickyOffset); + + // The inner sticky has similar math, but its offsetLeft is relative to the + // sticky element and in this test is (height - the difference between the + // top values). + assert_equals(elements.innerSticky.offsetLeft, 40); +}, 'both sticky boxes can be stuck at the same time'); + +test(() => { + const elements = setupNestedStickyTest('right', 25, 35); + elements.scroller.scrollLeft = 0; + assert_equals(elements.sticky.offsetLeft, elements.container.offsetLeft); + assert_equals(elements.innerSticky.offsetLeft, 0); +}, 'neither sticky can escape their containing block'); + +test(() => { + const elements = setupNestedStickyTest('right', 25, 500); + elements.scroller.scrollLeft = 200; + // It doesn't matter how big the inner sticky offset is, it cannot escape its + // containing block (the outer sticky). + assert_equals(elements.innerSticky.offsetLeft, 0); +}, 'the inner sticky cannot be pushed outside the outer sticky'); -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="outerIndicator" style="left: 250px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="filler"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="left: 40px;"></div> - <div class="innerFiller"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="outerIndicator" style="left: 300px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="filler"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="left: 50px;"></div> - <div class="innerFiller"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> +</script> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-top-ref.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-top-ref.html deleted file mode 100644 index f4696ce7d0a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-top-ref.html +++ /dev/null @@ -1,83 +0,0 @@ -<!DOCTYPE html> -<title>Reference for nested top-constrained position:sticky elements should render correctly</title> - -<style> -.group { - display: inline-block; - position: relative; - width: 150px; - height: 250px; -} - -.scroller { - position: relative; - width: 100px; - height: 200px; - overflow-x: hidden; - overflow-y: auto; -} - -.contents { - height: 500px; -} - -.green { - background-color: green; -} - -.blue { - background-color: blue; -} - -.indicator { - position: absolute; - left: 0; -} - -.bigBox { - width: 100%; - height: 100px; -} - -.smallBox { - width: 100%; - height: 50px; -} -</style> - -<script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollTop = 50; - document.getElementById('scroller2').scrollTop = 125; - document.getElementById('scroller3').scrollTop = 225; -}); -</script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="contents"> - <div class="green indicator bigBox" style="top: 150px;"></div> - <div class="blue indicator smallBox" style="top: 150px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="contents"> - <div class="green indicator bigBox" style="top: 175px;"></div> - <div class="blue indicator smallBox" style="top: 185px;"></div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="contents"> - <div class="green indicator bigBox" style="top: 200px;"></div> - <div class="blue indicator smallBox" style="top: 250px;"></div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-top.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-top.html index 1ed9dc2a210..5332b46cd0c 100644 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-top.html +++ b/tests/wpt/web-platform-tests/css/css-position/position-sticky-nested-top.html @@ -1,128 +1,74 @@ <!DOCTYPE html> <title>Nested top-constrainted position:sticky elements should render correctly</title> -<link rel="match" href="position-sticky-nested-top-ref.html" /> <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> <meta name="assert" content="This test checks that nested position:sticky elements with a top constraint render correctly" /> -<style> -.group { - display: inline-block; - position: relative; - width: 150px; - height: 250px; -} +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> -.scroller { - position: relative; - width: 100px; - height: 200px; - overflow-x: hidden; - overflow-y: auto; -} +<script src="resources/sticky-util.js"></script> -.contents { - height: 500px; -} +<body></body> -.prepadding { - height: 100px; -} - -.container { - height: 200px; -} +<script> +test(() => { + const elements = setupNestedStickyTest('top', 50, 60); + elements.scroller.scrollTop = 100; + const nonStickyTopY = elements.container.offsetTop + + elements.filler.clientHeight; + assert_equals(elements.sticky.offsetTop, nonStickyTopY); + // The inner sticky should not be offset from the outer. + assert_equals(elements.innerSticky.offsetTop, 0); +}, 'before reaching the sticking point, neither sticky box should be offset'); -.innerpadding { - height: 50px; -} +test(() => { + const elements = setupNestedStickyTest('top', 50, 60); + elements.scroller.scrollTop = 145; + const nonStickyTopY = elements.container.offsetTop + + elements.filler.clientHeight; + assert_equals(elements.sticky.offsetTop, nonStickyTopY); + assert_equals(elements.innerSticky.offsetTop, 5); +}, 'the inner sticky can stick before the outer one if necessary'); -.outerIndicator { - background-color: red; - position: absolute; - left: 0; - height: 100px; - width: 100%; -} +test(() => { + const elements = setupNestedStickyTest('top', 50, 60); + elements.scroller.scrollTop = 200; -.innerIndicator { - background-color: red; - position: absolute; - left: 0; - height: 50px; - width: 100%; -} + // This math cancels to sticky.offsetTop == (scroller.scrollTop + 50), but + // for clarity the calculations are left explicit. + const nonStickyTopY = elements.container.offsetTop + + elements.filler.clientHeight; + const targetTopY = elements.scroller.scrollTop + 50; + const stickyOffset = targetTopY - nonStickyTopY; + assert_equals(elements.sticky.offsetTop, nonStickyTopY + stickyOffset); -.outerSticky { - background-color: green; - position: sticky; - top: 50px; - width: 100%; - height: 100px; -} + // The inner sticky has similar math, but its offsetTop is relative to the + // sticky element and in this test is the difference between the top values. + assert_equals(elements.innerSticky.offsetTop, 10); +}, 'both sticky boxes can be stuck at the same time'); -.innerSticky { - background-color: blue; - position: sticky; - top: 60px; - width: 100%; - height: 50px; -} -</style> +test(() => { + const elements = setupNestedStickyTest('top', 50, 60); + elements.scroller.scrollTop = 300; + const maxOffsetInContainer = elements.container.offsetTop + + elements.container.clientHeight - elements.sticky.clientHeight; + assert_equals(elements.sticky.offsetTop, maxOffsetInContainer); + const maxOffsetInOuterSticky = elements.sticky.clientHeight - + elements.innerSticky.clientHeight; + assert_equals(elements.innerSticky.offsetTop, maxOffsetInOuterSticky); +}, 'neither sticky can escape their containing block'); -<script> -window.addEventListener('load', function() { - document.getElementById('scroller1').scrollTop = 50; - document.getElementById('scroller2').scrollTop = 125; - document.getElementById('scroller3').scrollTop = 225; -}); +test(() => { + const elements = setupNestedStickyTest('top', 50, 300); + elements.scroller.scrollTop = 100; + // The outer sticky has not stuck yet. + const nonStickyTopY = elements.container.offsetTop + + elements.filler.clientHeight; + assert_equals(elements.sticky.offsetTop, nonStickyTopY); + // But the inner sticky still cannot escape the outer sticky (as it is the + // containing block). + const maxOffsetInOuterSticky = elements.sticky.clientHeight - + elements.innerSticky.clientHeight; + assert_equals(elements.innerSticky.offsetTop, maxOffsetInOuterSticky); +}, 'the inner sticky cannot be pushed outside the outer sticky'); </script> - -<div class="group"> - <div id="scroller1" class="scroller"> - <div class="outerIndicator" style="top: 150px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="innerpadding"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="top: 0;"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller2" class="scroller"> - <div class="outerIndicator" style="top: 175px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="innerpadding"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="top: 10px;"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div class="group"> - <div id="scroller3" class="scroller"> - <div class="outerIndicator" style="top: 200px;"></div> - <div class="contents"> - <div class="prepadding"></div> - <div class="container"> - <div class="innerpadding"></div> - <div class="outerSticky"> - <div class="innerIndicator" style="top: 50px;"></div> - <div class="innerSticky"></div> - </div> - </div> - </div> - </div> -</div> - -<div>You should see three green and three blue boxes above. No red should be visible.</div> diff --git a/tests/wpt/web-platform-tests/css/css-position/position-sticky-right.html b/tests/wpt/web-platform-tests/css/css-position/position-sticky-right.html index afa0f8807ce..d280a1f3fdd 100644 --- a/tests/wpt/web-platform-tests/css/css-position/position-sticky-right.html +++ b/tests/wpt/web-platform-tests/css/css-position/position-sticky-right.html @@ -12,29 +12,29 @@ <script> test(() => { - const elements = setupStickyTest('right', 25, true); + const elements = setupStickyTest('right', 25); elements.scroller.scrollLeft = 200; - const nonStickyLeftY = elements.container.offsetLeft + + const nonStickyLeftX = elements.container.offsetLeft + elements.filler.clientWidth; - assert_equals(elements.sticky.offsetLeft, nonStickyLeftY); + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); }, 'before reaching the sticking point the sticky box should not be offset'); test(() => { - const elements = setupStickyTest('right', 25, true); + const elements = setupStickyTest('right', 25); elements.scroller.scrollLeft = 75; - const nonStickyLeftY = elements.container.offsetLeft + + const nonStickyLeftX = elements.container.offsetLeft + elements.filler.clientWidth; - const nonStickyBottomY = nonStickyLeftY + elements.sticky.clientWidth; - const targetBottomY = elements.scroller.clientWidth + + const nonStickyRightX = nonStickyLeftX + elements.sticky.clientWidth; + const targetRightX = elements.scroller.clientWidth + elements.scroller.scrollLeft - 25; - const stickyOffset = nonStickyBottomY - targetBottomY; + const stickyOffset = nonStickyRightX - targetRightX; - assert_equals(elements.sticky.offsetLeft, nonStickyLeftY - stickyOffset); + assert_equals(elements.sticky.offsetLeft, nonStickyLeftX - stickyOffset); }, 'after reaching the sticking point the sticky box should be offset'); test(() => { - const elements = setupStickyTest('right', 25, true); + const elements = setupStickyTest('right', 25); elements.scroller.scrollLeft = 15; assert_equals(elements.sticky.offsetLeft, elements.container.offsetLeft); }, 'the sticky box should not be pushed outside its containing block'); diff --git a/tests/wpt/web-platform-tests/css/css-position/resources/sticky-util.js b/tests/wpt/web-platform-tests/css/css-position/resources/sticky-util.js index 821fa9b59a4..969cededcbe 100644 --- a/tests/wpt/web-platform-tests/css/css-position/resources/sticky-util.js +++ b/tests/wpt/web-platform-tests/css/css-position/resources/sticky-util.js @@ -11,14 +11,15 @@ * </div> * </div> * - * If 'inline' is true, the necessary blocks will be marked as inline-block, - * and the dimensions above are flipped. + * If the sticky direction is 'left' or 'right', the necessary blocks will be + * marked as inline-block and the dimensions above are flipped. * * Returns an 'elements' object which has each of the above elements as an * accessible property. */ -function setupStickyTest(stickyDirection, stickyOffset, inline = false) { +function setupStickyTest(stickyDirection, stickyOffset) { const elements = {}; + const inline = stickyDirection === 'left' || stickyDirection === 'right'; elements.scroller = document.createElement('div'); elements.scroller.style.position = 'relative'; @@ -67,3 +68,39 @@ function setupStickyTest(stickyDirection, stickyOffset, inline = false) { return elements; } + +/** + * Similar to above, but nests a second sticky (named innerSticky) inside the + * sticky element. + * + * In the 'bottom' and 'right' cases, we also inject some padding before the + * innerSticky element, to give it something to push into. This inner padding is + * not exposed. + */ +function setupNestedStickyTest(stickyDirection, outerStickyOffset, + innerStickyOffset) { + const elements = setupStickyTest(stickyDirection, outerStickyOffset); + + const inline = stickyDirection === 'left' || stickyDirection === 'right'; + if (stickyDirection === 'bottom' || stickyDirection === 'right') { + const innerPadding = document.createElement('div'); + innerPadding.style.height = (inline ? '100%' : '50px'); + innerPadding.style.width = (inline ? '50px' : '100%'); + if (inline) + innerPadding.style.display = 'inline-block'; + elements.sticky.appendChild(innerPadding); + } + + elements.innerSticky = document.createElement('div'); + elements.innerSticky.style = `${stickyDirection}: ${innerStickyOffset}px;`; + elements.innerSticky.style.position = 'sticky'; + elements.innerSticky.style.height = (inline ? '100%' : '50px'); + elements.innerSticky.style.width = (inline ? '50px' : '100%'); + elements.innerSticky.style.backgroundColor = 'blue'; + if (inline) + elements.innerSticky.style.display = 'inline-block'; + + elements.sticky.appendChild(elements.innerSticky); + + return elements; +} diff --git a/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/column-width.html b/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/column-width.html new file mode 100644 index 00000000000..97a00ffdc1f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/column-width.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<title>'column-width' property</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#dom-stylepropertymapreadonly-get"> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#dom-stylepropertymap-set"> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#reify-stylevalue"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/testhelper.js"></script> +<script src="resources/testsuite.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +runPropertyTests('column-width', [ + { syntax: 'auto' }, + { + syntax: '<length>', + specified: assert_is_equal_with_range_handling + }, +]); + +</script> diff --git a/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/radius.html b/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/radius.html new file mode 100644 index 00000000000..ca785924cb5 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/radius.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset="utf-8"> +<title>'radius' property</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get"> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set"> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../resources/testhelper.js"></script> +<script src="resources/testsuite.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +runPropertyTests('r', [ + { + syntax: '<percentage>', + specified: assert_is_equal_with_range_handling + }, + { + syntax: '<length>', + specified: assert_is_equal_with_range_handling + }, +]); + +runPropertyTests('rx', [ + { syntax: 'auto' }, + { + syntax: '<percentage>', + specified: assert_is_equal_with_range_handling + }, + { + syntax: '<length>', + specified: assert_is_equal_with_range_handling + }, +]); + +runPropertyTests('ry', [ + { syntax: 'auto' }, + { + syntax: '<percentage>', + specified: assert_is_equal_with_range_handling + }, + { + syntax: '<length>', + specified: assert_is_equal_with_range_handling + }, +]); + +</script> diff --git a/tests/wpt/web-platform-tests/interfaces/payment-handler.idl b/tests/wpt/web-platform-tests/interfaces/payment-handler.idl index 8cf44ee116a..ec42e215b09 100644 --- a/tests/wpt/web-platform-tests/interfaces/payment-handler.idl +++ b/tests/wpt/web-platform-tests/interfaces/payment-handler.idl @@ -19,7 +19,7 @@ interface PaymentInstruments { dictionary PaymentInstrument { required DOMString name; sequence<ImageObject> icons; - sequence<DOMString> enabledMethods; + DOMString method; object capabilities; }; dictionary ImageObject { diff --git a/tests/wpt/web-platform-tests/payment-handler/can-make-payment-event.https.html b/tests/wpt/web-platform-tests/payment-handler/can-make-payment-event.https.html index 3266c2cf40a..c10851eb896 100644 --- a/tests/wpt/web-platform-tests/payment-handler/can-make-payment-event.https.html +++ b/tests/wpt/web-platform-tests/payment-handler/can-make-payment-event.https.html @@ -24,7 +24,7 @@ async function registerApp(methodName) { } await registration.paymentManager.instruments.set(instrumentKey, { name: 'Test Payment Method', - enabledMethods: [methodName], + method: methodName, }); return registration; } @@ -310,7 +310,7 @@ promise_test(async t => { const registration = await registerApp(methodName); await registration.paymentManager.instruments.set(instrumentKey, { name: 'Test Payment Method', - enabledMethods: [methodName], + method: methodName, capabilities: { supportedTypes: [cardType], supportedNetworks: [cardNetwork], @@ -360,7 +360,7 @@ promise_test(async t => { const registration = await registerApp(methodName); await registration.paymentManager.instruments.set(instrumentKey, { name: 'Test Payment Method', - enabledMethods: [methodName], + method: methodName, capabilities: { supportedTypes: [cardType], supportedNetworks: [cardNetwork], diff --git a/tests/wpt/web-platform-tests/payment-handler/payment-instruments.https.html b/tests/wpt/web-platform-tests/payment-handler/payment-instruments.https.html index abe25cee5cd..13a278758b1 100644 --- a/tests/wpt/web-platform-tests/payment-handler/payment-instruments.https.html +++ b/tests/wpt/web-platform-tests/payment-handler/payment-instruments.https.html @@ -76,7 +76,7 @@ function runTests(registration) { type: 'image/png', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', capabilities: {supportedNetworks: ['mir'], supportedTypes: ['prepaid']}, }, ); @@ -103,7 +103,7 @@ function runTests(registration) { icons: [ {src: '/images/green-16x16.png', sizes: '16x16', type: 'image/png'}, ], - enabledMethods: ['basic-card'], + method: 'basic-card', capabilities: {supportedNetworks: ['mir'], supportedTypes: ['prepaid']}, }, ); @@ -118,7 +118,7 @@ function runTests(registration) { ); assert_equals(result.icons[0].sizes, '16x16'); assert_equals(result.icons[0].type, 'image/png'); - assert_array_equals(result.enabledMethods, ['basic-card']); + assert_equals(result.method, 'basic-card'); assert_array_equals(result.capabilities.supportedNetworks, ['mir']); assert_array_equals(result.capabilities.supportedTypes, ['prepaid']); await registration.paymentManager.instruments.set( @@ -132,7 +132,7 @@ function runTests(registration) { type: 'image/png', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', capabilities: {supportedNetworks: ['visa'], supportedTypes: ['credit']}, }, ); @@ -147,7 +147,7 @@ function runTests(registration) { ); assert_equals(result.icons[0].sizes, '256x256'); assert_equals(result.icons[0].type, 'image/png'); - assert_array_equals(result.enabledMethods, ['basic-card']); + assert_equals(result.method, 'basic-card'); assert_array_equals(result.capabilities.supportedNetworks, ['visa']); assert_array_equals(result.capabilities.supportedTypes, ['credit']); }, 'Resetting an existing instrument updates the instrument'); @@ -165,7 +165,7 @@ function runTests(registration) { type: 'image/png', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', capabilities: {supportedNetworks: ['mir'], supportedTypes: ['prepaid']}, }, ); @@ -189,7 +189,7 @@ function runTests(registration) { type: 'image/jif', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', }, ); return promise_rejects(t, new TypeError(), setPromise); @@ -208,7 +208,7 @@ function runTests(registration) { type: 'image/pn' + 'g'.repeat(1000), }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', }, ); return promise_rejects(t, new TypeError(), setPromise); @@ -225,7 +225,7 @@ function runTests(registration) { type: 'image/png', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', }); }, "Don't crash when registering an instrument with a very long icon size 888...x888..."); @@ -242,7 +242,7 @@ function runTests(registration) { type: 'image/png', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', }, ); return promise_rejects(t, new TypeError(), setPromise); @@ -261,7 +261,7 @@ function runTests(registration) { type: 'image/png', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', }, ); return promise_rejects(t, new TypeError(), setPromise); @@ -280,7 +280,7 @@ function runTests(registration) { type: 'image/png', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', }, ); return promise_rejects(t, new TypeError(), setPromise); @@ -300,7 +300,7 @@ function runTests(registration) { type: 'image/gif', }, ], - enabledMethods: ['basic-card'], + method: 'basic-card', }, ); return promise_rejects(t, new TypeError(), setPromise); @@ -313,7 +313,7 @@ function runTests(registration) { icons: [ {src: '/images/rgrg-256x256.png', sizes: '256x256', type: 'image/png'}, ], - enabledMethods: [existingKey], + method: existingKey, capabilities: {aCapabilityName: existingKey}, }); const hasExistingInstrument = await registration.paymentManager.instruments.has( diff --git a/tests/wpt/web-platform-tests/payment-handler/payment-request-event.https.html b/tests/wpt/web-platform-tests/payment-handler/payment-request-event.https.html index 952ee385229..4e9cc21a1e5 100644 --- a/tests/wpt/web-platform-tests/payment-handler/payment-request-event.https.html +++ b/tests/wpt/web-platform-tests/payment-handler/payment-request-event.https.html @@ -15,7 +15,7 @@ async function setInstrumentsAndRunTests(registration) { icons: [ {src: '/images/rgrg-256x256.png', sizes: '256x256', type: 'image/png'}, ], - enabledMethods: ['basic-card'], + method: 'basic-card', capabilities: {supportedNetworks: ['mir'], supportedTypes: ['prepaid']}, }); runTests(); diff --git a/tests/wpt/web-platform-tests/service-workers/service-worker/navigation-timing.https.html b/tests/wpt/web-platform-tests/service-workers/service-worker/navigation-timing.https.html new file mode 100644 index 00000000000..ac3456e9d1a --- /dev/null +++ b/tests/wpt/web-platform-tests/service-workers/service-worker/navigation-timing.https.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/test-helpers.sub.js"></script> + +<script> +const timingEventOrder = [ + 'startTime', + 'workerStart', + 'fetchStart', + 'requestStart', + 'responseStart', + 'responseEnd', +]; + +function verify(timing) { + for (let i = 0; i < timingEventOrder.length - 1; i++) { + assert_true(timing[timingEventOrder[i]] <= timing[timingEventOrder[i + 1]], + `Expected ${timingEventOrder[i]} <= ${timingEventOrder[i + 1]}`); + } +} + +function navigate_in_frame(frame, url) { + frame.contentWindow.location = url; + return new Promise((resolve) => { + frame.addEventListener('load', () => { + const timing = frame.contentWindow.performance.getEntriesByType('navigation')[0]; + resolve(timing); + }); + }); +} + +const worker_url = 'resources/navigation-timing-worker.js'; + +promise_test(t => { + const scope = 'resources/empty.html'; + let frame; + + return service_worker_unregister_and_register(t, worker_url, scope) + .then(r => { + return wait_for_state(t, r.installing, 'activated'); + }) + .then(() => with_iframe(scope)) + .then(f => { + frame = f; + return navigate_in_frame(frame, 'resources/empty.html'); + }) + .then(timing => { + verify(timing); + }) + .catch(unreached_rejection(t)) + .then(() => { + if (frame) + frame.remove(); + return service_worker_unregister(t, scope); + }); +}, 'Service worker controlled navigation timing'); + +promise_test(t => { + const scope = 'resources/empty.html?network-fallback'; + let frame; + + return service_worker_unregister_and_register(t, worker_url, scope) + .then(r => { + return wait_for_state(t, r.installing, 'activated'); + }) + .then(() => with_iframe(scope)) + .then(f => { + frame = f; + return navigate_in_frame(frame, 'resources/empty.html?network-fallback'); + }) + .then(timing => { + verify(timing); + }) + .catch(unreached_rejection(t)) + .then(() => { + if (frame) + frame.remove(); + return service_worker_unregister(t, scope); + }); +}, 'Service worker controlled navigation timing network fallback'); + +promise_test(t => { + const scope = 'resources/redirect.py?Redirect=empty.html'; + let frame; + + return service_worker_unregister_and_register(t, worker_url, scope) + .then(r => { + return wait_for_state(t, r.installing, 'activated'); + }) + .then(() => with_iframe(scope)) + .then(f => { + frame = f; + return navigate_in_frame(frame, 'resources/redirect.py?Redirect=empty.html'); + }) + .then(timing => { + verify(timing); + // Additional checks for redirected navigation. + assert_true(timing.redirectStart <= timing.redirectEnd, + 'Expected redirectStart <= redirectEnd'); + assert_true(timing.redirectEnd <= timing.fetchStart, + 'Expected redirectEnd <= fetchStart'); + }) + .catch(unreached_rejection(t)) + .then(() => { + if (frame) + frame.remove(); + return service_worker_unregister(t, scope); + }); +}, 'Service worker controlled navigation timing redirect'); +</script> diff --git a/tests/wpt/web-platform-tests/service-workers/service-worker/resources/navigation-timing-worker.js b/tests/wpt/web-platform-tests/service-workers/service-worker/resources/navigation-timing-worker.js new file mode 100644 index 00000000000..8539b40066d --- /dev/null +++ b/tests/wpt/web-platform-tests/service-workers/service-worker/resources/navigation-timing-worker.js @@ -0,0 +1,15 @@ +self.addEventListener('fetch', (event) => { + const url = event.request.url; + + // Network fallback. + if (url.indexOf('network-fallback') >= 0) { + return; + } + + // Don't intercept redirect. + if (url.indexOf('redirect.py') >= 0) { + return; + } + + event.respondWith(fetch(url)); +}); diff --git a/tests/wpt/web-platform-tests/workers/modules/dedicated-worker-import-meta.html b/tests/wpt/web-platform-tests/workers/modules/dedicated-worker-import-meta.html new file mode 100644 index 00000000000..ae59fdaa570 --- /dev/null +++ b/tests/wpt/web-platform-tests/workers/modules/dedicated-worker-import-meta.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>DedicatedWorker: import.meta</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + +promise_test(() => { + const script_url = 'resources/import-meta-url-worker.js'; + const worker = new Worker(script_url, { type: 'module' }); + return new Promise(resolve => worker.onmessage = resolve) + .then(msg_event => assert_true(msg_event.data.endsWith(script_url))); +}, 'Test import.meta.url on the top-level module script.'); + +promise_test(() => { + const script_url = 'import-meta-url-worker.js'; + const worker = new Worker('resources/dynamic-import-given-url-worker.js', + { type: 'module' }); + worker.postMessage('./' + script_url); + return new Promise(resolve => worker.onmessage = resolve) + .then(msg_event => assert_true(msg_event.data.endsWith(script_url))); +}, 'Test import.meta.url on the imported module script.'); + +</script> diff --git a/tests/wpt/web-platform-tests/workers/modules/resources/dynamic-import-given-url-worker.js b/tests/wpt/web-platform-tests/workers/modules/resources/dynamic-import-given-url-worker.js new file mode 100644 index 00000000000..888f6042110 --- /dev/null +++ b/tests/wpt/web-platform-tests/workers/modules/resources/dynamic-import-given-url-worker.js @@ -0,0 +1,4 @@ +// Dynamically import the script URL sent by postMessage(). +self.addEventListener('message', e => { + import(e.data); +}); diff --git a/tests/wpt/web-platform-tests/workers/modules/resources/import-meta-url-worker.js b/tests/wpt/web-platform-tests/workers/modules/resources/import-meta-url-worker.js new file mode 100644 index 00000000000..9d909778eda --- /dev/null +++ b/tests/wpt/web-platform-tests/workers/modules/resources/import-meta-url-worker.js @@ -0,0 +1 @@ +postMessage(import.meta.url); |