diff options
35 files changed, 1957 insertions, 43 deletions
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json index ac47357a908..ba00fbcc937 100644 --- a/tests/wpt/metadata/MANIFEST.json +++ b/tests/wpt/metadata/MANIFEST.json @@ -307623,6 +307623,102 @@ {} ] ], + "css/css-align/gaps/column-gap-animation-001.html": [ + [ + "/css/css-align/gaps/column-gap-animation-001.html", + {} + ] + ], + "css/css-align/gaps/column-gap-animation-002.html": [ + [ + "/css/css-align/gaps/column-gap-animation-002.html", + {} + ] + ], + "css/css-align/gaps/column-gap-animation-003.html": [ + [ + "/css/css-align/gaps/column-gap-animation-003.html", + {} + ] + ], + "css/css-align/gaps/column-gap-parsing-001.html": [ + [ + "/css/css-align/gaps/column-gap-parsing-001.html", + {} + ] + ], + "css/css-align/gaps/gap-animation-001.html": [ + [ + "/css/css-align/gaps/gap-animation-001.html", + {} + ] + ], + "css/css-align/gaps/gap-animation-002.html": [ + [ + "/css/css-align/gaps/gap-animation-002.html", + {} + ] + ], + "css/css-align/gaps/gap-animation-003.html": [ + [ + "/css/css-align/gaps/gap-animation-003.html", + {} + ] + ], + "css/css-align/gaps/gap-animation-004.html": [ + [ + "/css/css-align/gaps/gap-animation-004.html", + {} + ] + ], + "css/css-align/gaps/gap-parsing-001.html": [ + [ + "/css/css-align/gaps/gap-parsing-001.html", + {} + ] + ], + "css/css-align/gaps/grid-column-gap-parsing-001.html": [ + [ + "/css/css-align/gaps/grid-column-gap-parsing-001.html", + {} + ] + ], + "css/css-align/gaps/grid-gap-parsing-001.html": [ + [ + "/css/css-align/gaps/grid-gap-parsing-001.html", + {} + ] + ], + "css/css-align/gaps/grid-row-gap-parsing-001.html": [ + [ + "/css/css-align/gaps/grid-row-gap-parsing-001.html", + {} + ] + ], + "css/css-align/gaps/row-gap-animation-001.html": [ + [ + "/css/css-align/gaps/row-gap-animation-001.html", + {} + ] + ], + "css/css-align/gaps/row-gap-animation-002.html": [ + [ + "/css/css-align/gaps/row-gap-animation-002.html", + {} + ] + ], + "css/css-align/gaps/row-gap-animation-003.html": [ + [ + "/css/css-align/gaps/row-gap-animation-003.html", + {} + ] + ], + "css/css-align/gaps/row-gap-parsing-001.html": [ + [ + "/css/css-align/gaps/row-gap-parsing-001.html", + {} + ] + ], "css/css-align/self-alignment/parse-align-self-001.html": [ [ "/css/css-align/self-alignment/parse-align-self-001.html", @@ -311983,6 +312079,12 @@ {} ] ], + "css/css-transforms/transform-origin-in-shadow.html": [ + [ + "/css/css-transforms/transform-origin-in-shadow.html", + {} + ] + ], "css/css-transforms/transform_translate.html": [ [ "/css/css-transforms/transform_translate.html", @@ -314881,6 +314983,12 @@ {} ] ], + "custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg": [ + [ + "/custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg", + {} + ] + ], "custom-elements/parser/parser-uses-registry-of-owner-document.html": [ [ "/custom-elements/parser/parser-uses-registry-of-owner-document.html", @@ -322451,6 +322559,12 @@ {} ] ], + "html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js": [ + [ + "/html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.html", + {} + ] + ], "html/browsers/windows/auxiliary-browsing-contexts/opener.html": [ [ "/html/browsers/windows/auxiliary-browsing-contexts/opener.html", @@ -345203,6 +345317,14 @@ } ] ], + "picture-in-picture/leave-picture-in-picture.html": [ + [ + "/picture-in-picture/leave-picture-in-picture.html", + { + "testdriver": true + } + ] + ], "picture-in-picture/not-processing-user-gesture.html": [ [ "/picture-in-picture/not-processing-user-gesture.html", @@ -475228,6 +475350,70 @@ "6fd28a5bf615ce822ed935de90ce5c1a41d39104", "reftest" ], + "css/css-align/gaps/column-gap-animation-001.html": [ + "00023e39b6fafbfb31cabb30ed4ddf77a71b248f", + "testharness" + ], + "css/css-align/gaps/column-gap-animation-002.html": [ + "97e93d1aff94b4e88fe56f981cd61dbd09f07bf9", + "testharness" + ], + "css/css-align/gaps/column-gap-animation-003.html": [ + "110e9460fdc86b6eda713f089b7293c075b49e82", + "testharness" + ], + "css/css-align/gaps/column-gap-parsing-001.html": [ + "d0b1255896cde1a3b3f2539c8533fdf65dd77f94", + "testharness" + ], + "css/css-align/gaps/gap-animation-001.html": [ + "9145456dea1f21bdef2159b6033853a73efc716b", + "testharness" + ], + "css/css-align/gaps/gap-animation-002.html": [ + "de302cf09e0410430064dccc5517c87e2998b32d", + "testharness" + ], + "css/css-align/gaps/gap-animation-003.html": [ + "1c31795623818f5e08e47cc5221831c11299602a", + "testharness" + ], + "css/css-align/gaps/gap-animation-004.html": [ + "e2c2dc0ed64e3c8e70959c64108cbb798ea49827", + "testharness" + ], + "css/css-align/gaps/gap-parsing-001.html": [ + "bd3a5bb6b7e4605e6f1a44f232d34c5e7d6342af", + "testharness" + ], + "css/css-align/gaps/grid-column-gap-parsing-001.html": [ + "13ce1945b50ed1c4d40f837cac8777b6b8a90066", + "testharness" + ], + "css/css-align/gaps/grid-gap-parsing-001.html": [ + "441feb52cc17178d4486f92d10a1c132600788a3", + "testharness" + ], + "css/css-align/gaps/grid-row-gap-parsing-001.html": [ + "7302a4efd2ea5eccf65ec269175e6c15cc1771b4", + "testharness" + ], + "css/css-align/gaps/row-gap-animation-001.html": [ + "c7aa90cd3b586b6fd8f81d190895ecc56643b8c1", + "testharness" + ], + "css/css-align/gaps/row-gap-animation-002.html": [ + "e5c9a9eb63a876798a79a5260486668b4fca53e2", + "testharness" + ], + "css/css-align/gaps/row-gap-animation-003.html": [ + "d1605b849b3a328857772b850af2a7d329ac2cb8", + "testharness" + ], + "css/css-align/gaps/row-gap-parsing-001.html": [ + "46a9930dd28a133d1df2c9209b35716093457d5c", + "testharness" + ], "css/css-align/reference/ttwf-reftest-alignContent-ref.html": [ "d87177e45f584e4a67695529b8dbf2d3c3c52839", "support" @@ -511640,6 +511826,10 @@ "391c925801c9f166285b9aa5ea4bec194af13748", "reftest" ], + "css/css-transforms/transform-origin-in-shadow.html": [ + "3a30f869d047c0677f7e989e919f0345d32fb28a", + "testharness" + ], "css/css-transforms/transform-origin-name-001.html": [ "ca659829faa1079070d79ff0ed9ddeedc02d670c", "reftest" @@ -514525,7 +514715,7 @@ "testharness" ], "css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html": [ - "fdc7e5f43de941a0d79b0c4c13ae515038e028d1", + "71591a5fdc7f90841dcc204c70f1a3e611024edc", "testharness" ], "css/css-typed-om/stylevalue-serialization/cssUnitValue.tentative.html": [ @@ -536736,6 +536926,10 @@ "ed5476ab5b9a8d23ab7d84665c5d3224bb53dd18", "testharness" ], + "custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg": [ + "51ecc75f42124e8071a767ef908ecc915cbf0fc1", + "testharness" + ], "custom-elements/parser/parser-uses-registry-of-owner-document.html": [ "a62669ffcc75d54df38b65e33463566238c8644c", "testharness" @@ -537121,7 +537315,7 @@ "support" ], "dom/abort/event.any.js": [ - "25e9c1104acb9b0092d1303190588a3953cf635d", + "d41904ddfc56e5ef3e89d965a4e5fa392e996ef9", "testharness" ], "dom/collections/HTMLCollection-as-proto-length-get-throws.html": [ @@ -537349,7 +537543,7 @@ "testharness" ], "dom/interfaces.html": [ - "7d00e3a778083a91156f4e042c7abd270060a7fc", + "3308c9f3341c12ce99217309eba608e50cca669d", "testharness" ], "dom/lists/DOMTokenList-Iterable.html": [ @@ -546116,6 +546310,10 @@ "a0c935eac75021b6dcef4e170848acbdec5b3e4a", "testharness" ], + "html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js": [ + "013632c1b8c86241d757ecbdf66b2a0a2dcc77cb", + "testharness" + ], "html/browsers/windows/auxiliary-browsing-contexts/opener.html": [ "a8ffd6dfa93df903e592af7f9dd6855dbcbb05ea", "testharness" @@ -572729,7 +572927,7 @@ "testharness" ], "payment-request/interfaces.https.html": [ - "87fb3213b7442ceb3f096d88b6bae3074f96d29c", + "d269e8378f2a84ba96c981536667817e0db9e2d1", "testharness" ], "payment-request/payment-request-abort-method.https.html": [ @@ -572929,13 +573127,17 @@ "testharness" ], "picture-in-picture/enter-picture-in-picture.html": [ - "c0d29867a380b7e780ed14c229fa5598626a75aa", + "1286b5349d7787be49ad00f910e2bd7ec80ed87e", "testharness" ], "picture-in-picture/exit-picture-in-picture.html": [ "b1103b96927872de07fc6eb5f34668a0267da6a2", "testharness" ], + "picture-in-picture/leave-picture-in-picture.html": [ + "178275fc27367da45895150124e1d2a0051f73d5", + "testharness" + ], "picture-in-picture/not-processing-user-gesture.html": [ "0bfb194f9fd96db340177d8ff9e62becb1dd9f5e", "testharness" @@ -584141,7 +584343,7 @@ "support" ], "service-workers/service-worker/resources/local-url-inherit-controller-frame.html": [ - "12822899ad84cef80d4f67cb33475a93ca1d56ed", + "595ab725fd213218d5f6016945cc2ce02b50452c", "support" ], "service-workers/service-worker/resources/local-url-inherit-controller-worker.js": [ @@ -595669,11 +595871,11 @@ "reftest" ], "webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html": [ - "5b8a5f597777418b7dba44e6e07d05625c599ce7", + "c5af748ae8fd0d476c20926f2cc7ad2103b22aa4", "support" ], "webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html": [ - "5f9e48b0160ac1916034ac29cce97282ce9b1ecf", + "e1eb138e07d42f488051ab6cb4ead266981c5ed8", "reftest" ], "webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html": [ diff --git a/tests/wpt/metadata/css/css-transforms/transform-origin-in-shadow.html.ini b/tests/wpt/metadata/css/css-transforms/transform-origin-in-shadow.html.ini new file mode 100644 index 00000000000..b2be2c2114f --- /dev/null +++ b/tests/wpt/metadata/css/css-transforms/transform-origin-in-shadow.html.ini @@ -0,0 +1,5 @@ +[transform-origin-in-shadow.html] + expected: ERROR + ['transform-origin' on <svg> being direct descendant of shadow root] + expected: FAIL + diff --git a/tests/wpt/metadata/custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg.ini b/tests/wpt/metadata/custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg.ini new file mode 100644 index 00000000000..916fe7b6d09 --- /dev/null +++ b/tests/wpt/metadata/custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg.ini @@ -0,0 +1,2 @@ +[parser-uses-create-an-element-for-a-token-svg.svg] + expected: TIMEOUT diff --git a/tests/wpt/metadata/dom/abort/event.any.js.ini b/tests/wpt/metadata/dom/abort/event.any.js.ini index b2330c67e73..350ec2d56a2 100644 --- a/tests/wpt/metadata/dom/abort/event.any.js.ini +++ b/tests/wpt/metadata/dom/abort/event.any.js.ini @@ -3,9 +3,39 @@ [AbortController() basics] expected: FAIL + [AbortController abort() should fire event synchronously] + expected: FAIL + + [controller.signal should always return the same object] + expected: FAIL + + [controller.abort() should do nothing the second time it is called] + expected: FAIL + + [event handler should not be called if added after controller.abort()] + expected: FAIL + + [the abort event should have the right properties] + expected: FAIL + [event.any.worker.html] type: testharness [AbortController() basics] expected: FAIL + [AbortController abort() should fire event synchronously] + expected: FAIL + + [controller.signal should always return the same object] + expected: FAIL + + [controller.abort() should do nothing the second time it is called] + expected: FAIL + + [event handler should not be called if added after controller.abort()] + expected: FAIL + + [the abort event should have the right properties] + expected: FAIL + diff --git a/tests/wpt/metadata/html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js.ini b/tests/wpt/metadata/html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js.ini new file mode 100644 index 00000000000..9d293d228ba --- /dev/null +++ b/tests/wpt/metadata/html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js.ini @@ -0,0 +1,22 @@ +[opener-setter.window.html] + [Setting window.opener to undefined] + expected: FAIL + + [Setting window.opener to 42] + expected: FAIL + + [Setting window.opener to function () { return "hi" }] + expected: FAIL + + [Setting window.opener to hi] + expected: FAIL + + [Setting window.opener to [object Object\]] + expected: FAIL + + [Setting window.opener to ] + expected: FAIL + + [Setting window.opener to Symbol()] + expected: FAIL + diff --git a/tests/wpt/metadata/html/semantics/embedded-content/image-maps/image-map-processing-model/hash-name-reference.html.ini b/tests/wpt/metadata/html/semantics/embedded-content/image-maps/image-map-processing-model/hash-name-reference.html.ini index 1de3f8d68b2..559c27de134 100644 --- a/tests/wpt/metadata/html/semantics/embedded-content/image-maps/image-map-processing-model/hash-name-reference.html.ini +++ b/tests/wpt/metadata/html/semantics/embedded-content/image-maps/image-map-processing-model/hash-name-reference.html.ini @@ -172,3 +172,63 @@ [XHTML img usemap="http://example.org/#garbage-before-hash-id"] expected: FAIL + [HTML (quirks) IMG usemap="no-hash-name"] + expected: FAIL + + [HTML (quirks) IMG usemap="no-hash-id"] + expected: FAIL + + [HTML (quirks) IMG usemap="hash-last#"] + expected: FAIL + + [HTML (quirks) IMG usemap=""] + expected: FAIL + + [HTML (quirks) IMG usemap="#"] + expected: FAIL + + [HTML (quirks) IMG usemap="#percent-escape-name-%41"] + expected: FAIL + + [HTML (quirks) IMG usemap="#percent-escape-id-%41"] + expected: FAIL + + [HTML (quirks) IMG usemap="#no-such-map"] + expected: FAIL + + [HTML (quirks) IMG usemap="#different-CASE-name"] + expected: FAIL + + [HTML (quirks) IMG usemap="#different-CASE-id"] + expected: FAIL + + [XHTML img usemap="no-hash-name"] + expected: FAIL + + [XHTML img usemap="no-hash-id"] + expected: FAIL + + [XHTML img usemap="hash-last#"] + expected: FAIL + + [XHTML img usemap=""] + expected: FAIL + + [XHTML img usemap="#"] + expected: FAIL + + [XHTML img usemap="#percent-escape-name-%41"] + expected: FAIL + + [XHTML img usemap="#percent-escape-id-%41"] + expected: FAIL + + [XHTML img usemap="#no-such-map"] + expected: FAIL + + [XHTML img usemap="#different-CASE-name"] + expected: FAIL + + [XHTML img usemap="#different-CASE-id"] + expected: FAIL + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-001.html new file mode 100644 index 00000000000..03c06249cc0 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that column-gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-0-to-100 { + from { column-gap: 0px; } + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "50px"); + }, "column-gap is interpolable"); + </script> +</body> + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-002.html b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-002.html new file mode 100644 index 00000000000..133b98a31c4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for column-gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-normal-to-100 { + from { column-gap: normal; } + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "column-gap: normal is not interpolable"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-003.html b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-003.html new file mode 100644 index 00000000000..ef8f0e52e4b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-animation-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for column-gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-to-100 { + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "Default column-gap is not interpolable"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-parsing-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-parsing-001.html new file mode 100644 index 00000000000..f0bcea4d98d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/column-gap-parsing-001.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .columnGapPx { column-gap: 12px; } + #columnGapEm { column-gap: 2em; font: 10px/1 Monospace; } + #columnGapVw { column-gap: 2vw; } + #columnGapPercent { column-gap: 15%; } + #columnGapCalc { column-gap: calc(10px + 4px); } + .columnGapInitial { column-gap: initial; } + .columnGapInherit { column-gap: inherit; } + + #invalidColumnGapNegative { column-gap: -10px; } + #invalidColumnGapMaxContent { column-gap: max-content; } + #invalidColumnGapNone { column-gap: none; } + #invalidColumnGapMultiple { column-gap: 10px 1px; } + #invalidColumnGapAngle { column-gap: 3rad; } + #invalidColumnGapResolution { column-gap: 2dpi; } + #invalidColumnGapTime { column-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="columnGapPx" class="columnGapPx"></div> + <div id="columnGapEm"></div> + <div id="columnGapVw"></div> + <div id="columnGapPercent"></div> + <div id="columnGapCalc"></div> + <div id="columnGapInitial" class="columnGapInitial"></div> + <div class="columnGapPx"> + <div id="columnGapInitialPx" class="columnGapInitial"></div> + </div> + <div id="columnGapInherit" class="columnGapInherit"></div> + <div class="columnGapPx"> + <div id="columnGapInheritPx" class="columnGapInherit"></div> + </div> + + <div id="invalidColumnGapNegative"></div> + <div id="invalidColumnGapMaxContent"></div> + <div id="invalidColumnGapNone"></div> + <div id="invalidColumnGapMultiple"></div> + <div id="invalidColumnGapAngle"></div> + <div id="invalidColumnGapResolution"></div> + <div id="invalidColumnGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("columnGapEm"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "column-gap accepts em"); + test( + function(){ + var target = document.getElementById("columnGapVw"); + // The columnGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap accepts vw"); + test( + function(){ + var target = document.getElementById("columnGapPercent"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "column-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("columnGapCalc"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "column-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("columnGapInitial"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInitialPx"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("columnGapInherit"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInheritPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidColumnGapNegative"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMaxContent"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapNone"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMultiple"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapAngle"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapResolution"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapTime"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time column-gap is invalid"); + </script> +</body> + + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-001.html new file mode 100644 index 00000000000..881bb18446e --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-0-to-100 { + from { gap: 0px; } + to { gap: 100px; } + } + + #target { + animation-name: gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "50px 50px"); + assert_equals(getComputedStyle(target).rowGap, "50px"); + assert_equals(getComputedStyle(target).columnGap, "50px"); + }, "gap is interpolable"); + </script> +</body> + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-002.html b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-002.html new file mode 100644 index 00000000000..44d8c70b3a8 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-normal-to-100 { + from { gap: normal; } + to { gap: 100px; } + } + + #target { + animation-name: gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "100px 100px"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "gap: normal is not interpolable"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-003.html b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-003.html new file mode 100644 index 00000000000..c047946fb7f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-to-100 { + to { gap: 100px; } + } + + #target { + animation-name: gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "100px 100px"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "Default gap is not interpolable"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-004.html b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-004.html new file mode 100644 index 00000000000..8b6fbe440f9 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-animation-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that gap property is interpolable for each longhand (row-gap and column-gap) independently."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-100-200-to-200-400 { + from { gap: 100px 200px; } + to { gap: 200px 400px; } + } + + #target { + animation-name: gap-100-200-to-200-400; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "150px 300px"); + assert_equals(getComputedStyle(target).rowGap, "150px"); + assert_equals(getComputedStyle(target).columnGap, "300px"); + }, "gap is interpolable"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/gap-parsing-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-parsing-001.html new file mode 100644 index 00000000000..48856128184 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/gap-parsing-001.html @@ -0,0 +1,226 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap shorthand parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#row-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .gapPx { gap: 12px; } + #gapPxTwo { gap: 12px 8px; } + #gapPxPercent { gap: 12px 10%; } + #gapEm { gap: 2em; font: 10px/1 Monospace; } + #gapEmTwo { gap: 2em 4em; font: 10px/1 Monospace; } + #gapVw { gap: 2vw; } + #gapVwTwo { gap: 2vw 1vh; } + #gapPercent { gap: 15%; } + #gapPercentTwo { gap: 15% 10%; } + #gapCalc { gap: calc(10px + 4px); } + #gapCalcTwo { gap: calc(10px + 4px) calc(20px - 8px); } + .gapInitial { gap: initial; } + .gapInherit { gap: inherit; } + + #invalidGapNegative { gap: -10px; } + #invalidGapMaxContent { gap: max-content; } + #invalidGapNone { gap: none; } + #invalidGapAngle { gap: 3rad; } + #invalidGapResolution { gap: 2dpi; } + #invalidGapTime { gap: 200ms; } + #invalidGapThree { gap: 10px 1px 5px; } + #invalidGapSlash { gap: 10px / 5px; } + #invalidGapOneWrong { gap: 10px -5px; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="gapPx" class="gapPx"></div> + <div id="gapPxTwo"></div> + <div id="gapPxPercent"></div> + <div id="gapEm"></div> + <div id="gapEmTwo"></div> + <div id="gapVw"></div> + <div id="gapVwTwo"></div> + <div id="gapPercent"></div> + <div id="gapPercentTwo"></div> + <div id="gapCalc"></div> + <div id="gapCalcTwo"></div> + <div id="gapInitial" class="gapInitial"></div> + <div class="gapPx"> + <div id="gapInitialPx" class="gapInitial"></div> + </div> + <div id="gapInherit" class="gapInherit"></div> + <div class="gapPx"> + <div id="gapInheritPx" class="gapInherit"></div> + </div> + + <div id="invalidGapNegative"></div> + <div id="invalidGapMaxContent"></div> + <div id="invalidGapNone"></div> + <div id="invalidGapAngle"></div> + <div id="invalidGapResolution"></div> + <div id="invalidGapTime"></div> + <div id="invalidGapThree"></div> + <div id="invalidGapSlash"></div> + <div id="invalidGapOneWrong"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts pixels"); + test( + function(){ + var target = document.getElementById("gapPxTwo"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "8px"); + }, "gap accepts pixels 2"); + test( + function(){ + var target = document.getElementById("gapPxPercent"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts pixels combined with percentage"); + test( + function(){ + var target = document.getElementById("gapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "gap accepts em"); + test( + function(){ + var target = document.getElementById("gapEmTwo"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "40px"); + }, "gap accepts em 2"); + test( + function(){ + var target = document.getElementById("gapVw"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw"); + test( + function(){ + var target = document.getElementById("gapVwTwo"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw and vh"); + test( + function(){ + var target = document.getElementById("gapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "gap accepts percentage"); + test( + function(){ + var target = document.getElementById("gapPercentTwo"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts percentage 2"); + test( + function(){ + var target = document.getElementById("gapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "gap accepts calc()"); + test( + function(){ + var target = document.getElementById("gapCalcTwo"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts calc() 2"); + test( + function(){ + var target = document.getElementById("gapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("gapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap is inheritable"); + + test( + function(){ + var target = document.getElementById("invalidGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapThree"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with three values is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapSlash"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with slash is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapOneWrong"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with one wrong value is invalid"); + </script> +</body> + + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/grid-column-gap-parsing-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/grid-column-gap-parsing-001.html new file mode 100644 index 00000000000..a552463950c --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/grid-column-gap-parsing-001.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .columnGapPx { column-gap: 12px; } + #columnGapEm { column-gap: 2em; font: 10px/1 Monospace; } + #columnGapVw { column-gap: 2vw; } + #columnGapPercent { column-gap: 15%; } + #columnGapCalc { column-gap: calc(10px + 4px); } + .columnGapInitial { column-gap: initial; } + .columnGapInherit { column-gap: inherit; } + + #invalidColumnGapNegative { column-gap: -10px; } + #invalidColumnGapMaxContent { column-gap: max-content; } + #invalidColumnGapNone { column-gap: none; } + #invalidColumnGapMultiple { column-gap: 10px 1px; } + #invalidColumnGapAngle { column-gap: 3rad; } + #invalidColumnGapResolution { column-gap: 2dpi; } + #invalidColumnGapTime { column-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="columnGapPx" class="columnGapPx"></div> + <div id="columnGapEm"></div> + <div id="columnGapVw"></div> + <div id="columnGapPercent"></div> + <div id="columnGapCalc"></div> + <div id="columnGapInitial" class="columnGapInitial"></div> + <div class="columnGapPx"> + <div id="columnGapInitialPx" class="columnGapInitial"></div> + </div> + <div id="columnGapInherit" class="columnGapInherit"></div> + <div class="columnGapPx"> + <div id="columnGapInheritPx" class="columnGapInherit"></div> + </div> + + <div id="invalidColumnGapNegative"></div> + <div id="invalidColumnGapMaxContent"></div> + <div id="invalidColumnGapNone"></div> + <div id="invalidColumnGapMultiple"></div> + <div id="invalidColumnGapAngle"></div> + <div id="invalidColumnGapResolution"></div> + <div id="invalidColumnGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("columnGapEm"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "column-gap accepts em"); + test( + function(){ + var target = document.getElementById("columnGapVw"); + // The columnGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap accepts vw"); + test( + function(){ + var target = document.getElementById("columnGapPercent"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "column-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("columnGapCalc"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "column-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("columnGapInitial"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInitialPx"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("columnGapInherit"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInheritPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidColumnGapNegative"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMaxContent"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapNone"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMultiple"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapAngle"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapResolution"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapTime"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time column-gap is invalid"); + </script> +</body> + + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/grid-gap-parsing-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/grid-gap-parsing-001.html new file mode 100644 index 00000000000..614b23a7a4f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/grid-gap-parsing-001.html @@ -0,0 +1,226 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap shorthand parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .gapPx { grid-gap: 12px; } + #gapPxTwo { grid-gap: 12px 8px; } + #gapPxPercent { grid-gap: 12px 10%; } + #gapEm { grid-gap: 2em; font: 10px/1 Monospace; } + #gapEmTwo { grid-gap: 2em 4em; font: 10px/1 Monospace; } + #gapVw { grid-gap: 2vw; } + #gapVwTwo { grid-gap: 2vw 1vh; } + #gapPercent { grid-gap: 15%; } + #gapPercentTwo { grid-gap: 15% 10%; } + #gapCalc { grid-gap: calc(10px + 4px); } + #gapCalcTwo { grid-gap: calc(10px + 4px) calc(20px - 8px); } + .gapInitial { grid-gap: initial; } + .gapInherit { grid-gap: inherit; } + + #invalidGridGapNegative { grid-gap: -10px; } + #invalidGridGapMaxContent { grid-gap: max-content; } + #invalidGridGapNone { grid-gap: none; } + #invalidGridGapAngle { grid-gap: 3rad; } + #invalidGridGapResolution { grid-gap: 2dpi; } + #invalidGridGapTime { grid-gap: 200ms; } + #invalidGridGapThree { grid-gap: 10px 1px 5px; } + #invalidGridGapSlash { grid-gap: 10px / 5px; } + #invalidGridGapOneWrong { grid-gap: 10px -5px; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="gapPx" class="gapPx"></div> + <div id="gapPxTwo"></div> + <div id="gapPxPercent"></div> + <div id="gapEm"></div> + <div id="gapEmTwo"></div> + <div id="gapVw"></div> + <div id="gapVwTwo"></div> + <div id="gapPercent"></div> + <div id="gapPercentTwo"></div> + <div id="gapCalc"></div> + <div id="gapCalcTwo"></div> + <div id="gapInitial" class="gapInitial"></div> + <div class="gapPx"> + <div id="gapInitialPx" class="gapInitial"></div> + </div> + <div id="gapInherit" class="gapInherit"></div> + <div class="gapPx"> + <div id="gapInheritPx" class="gapInherit"></div> + </div> + + <div id="invalidGridGapNegative"></div> + <div id="invalidGridGapMaxContent"></div> + <div id="invalidGridGapNone"></div> + <div id="invalidGridGapAngle"></div> + <div id="invalidGridGapResolution"></div> + <div id="invalidGridGapTime"></div> + <div id="invalidGridGapThree"></div> + <div id="invalidGridGapSlash"></div> + <div id="invalidGridGapOneWrong"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts pixels"); + test( + function(){ + var target = document.getElementById("gapPxTwo"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "8px"); + }, "gap accepts pixels 2"); + test( + function(){ + var target = document.getElementById("gapPxPercent"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts pixels combined with percentage"); + test( + function(){ + var target = document.getElementById("gapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "gap accepts em"); + test( + function(){ + var target = document.getElementById("gapEmTwo"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "40px"); + }, "gap accepts em 2"); + test( + function(){ + var target = document.getElementById("gapVw"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw"); + test( + function(){ + var target = document.getElementById("gapVwTwo"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw and vh"); + test( + function(){ + var target = document.getElementById("gapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "gap accepts percentage"); + test( + function(){ + var target = document.getElementById("gapPercentTwo"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts percentage 2"); + test( + function(){ + var target = document.getElementById("gapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "gap accepts calc()"); + test( + function(){ + var target = document.getElementById("gapCalcTwo"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts calc() 2"); + test( + function(){ + var target = document.getElementById("gapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("gapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap is inheritable"); + + test( + function(){ + var target = document.getElementById("invalidGridGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapThree"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with three values is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapSlash"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with slash is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapOneWrong"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with one wrong value is invalid"); + </script> +</body> + + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/grid-row-gap-parsing-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/grid-row-gap-parsing-001.html new file mode 100644 index 00000000000..9dc8c8da59a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/grid-row-gap-parsing-001.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .rowGapPx { row-gap: 12px; } + #rowGapEm { row-gap: 2em; font: 10px/1 Monospace; } + #rowGapVw { row-gap: 2vw; } + #rowGapPercent { row-gap: 15%; } + #rowGapCalc { row-gap: calc(10px + 4px); } + .rowGapInitial { row-gap: initial; } + .rowGapInherit { row-gap: inherit; } + + #invalidRowGapNegative { row-gap: -10px; } + #invalidRowGapMaxContent { row-gap: max-content; } + #invalidRowGapNone { row-gap: none; } + #invalidRowGapMultiple { row-gap: 10px 1px; } + #invalidRowGapAngle { row-gap: 3rad; } + #invalidRowGapResolution { row-gap: 2dpi; } + #invalidRowGapTime { row-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="rowGapPx" class="rowGapPx"></div> + <div id="rowGapEm"></div> + <div id="rowGapVw"></div> + <div id="rowGapPercent"></div> + <div id="rowGapCalc"></div> + <div id="rowGapInitial" class="rowGapInitial"></div> + <div class="rowGapPx"> + <div id="rowGapInitialPx" class="rowGapInitial"></div> + </div> + <div id="rowGapInherit" class="rowGapInherit"></div> + <div class="rowGapPx"> + <div id="rowGapInheritPx" class="rowGapInherit"></div> + </div> + + <div id="invalidRowGapNegative"></div> + <div id="invalidRowGapMaxContent"></div> + <div id="invalidRowGapNone"></div> + <div id="invalidRowGapMultiple"></div> + <div id="invalidRowGapAngle"></div> + <div id="invalidRowGapResolution"></div> + <div id="invalidRowGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Default row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("rowGapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + }, "row-gap accepts em"); + test( + function(){ + var target = document.getElementById("rowGapVw"); + // The rowGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap accepts vw"); + test( + function(){ + var target = document.getElementById("rowGapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + }, "row-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("rowGapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + }, "row-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("rowGapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("rowGapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial inherited row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidRowGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Negative row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'max-content' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'none' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMultiple"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Angle row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Resolution row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Time row-gap is invalid"); + </script> +</body> + + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-001.html new file mode 100644 index 00000000000..da4a235deda --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that row-gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-0-to-100 { + from { row-gap: 0px; } + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "50px"); + }, "row-gap is interpolable"); + </script> +</body> + diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-002.html b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-002.html new file mode 100644 index 00000000000..330e1054f14 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for row-gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-normal-to-100 { + from { row-gap: normal; } + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + }, "row-gap: normal is not interpolable"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-003.html b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-003.html new file mode 100644 index 00000000000..574e3ff7c85 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-animation-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default row-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for row-gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-to-100 { + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + }, "Default row-gap is not interpolable"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-parsing-001.html b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-parsing-001.html new file mode 100644 index 00000000000..6de848c3c2a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-align/gaps/row-gap-parsing-001.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .rowGapPx { row-gap: 12px; } + #rowGapEm { row-gap: 2em; font: 10px/1 Monospace; } + #rowGapVw { row-gap: 2vw; } + #rowGapPercent { row-gap: 15%; } + #rowGapCalc { row-gap: calc(10px + 4px); } + .rowGapInitial { row-gap: initial; } + .rowGapInherit { row-gap: inherit; } + + #invalidRowGapNegative { row-gap: -10px; } + #invalidRowGapMaxContent { row-gap: max-content; } + #invalidRowGapNone { row-gap: none; } + #invalidRowGapMultiple { row-gap: 10px 1px; } + #invalidRowGapAngle { row-gap: 3rad; } + #invalidRowGapResolution { row-gap: 2dpi; } + #invalidRowGapTime { row-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="rowGapPx" class="rowGapPx"></div> + <div id="rowGapEm"></div> + <div id="rowGapVw"></div> + <div id="rowGapPercent"></div> + <div id="rowGapCalc"></div> + <div id="rowGapInitial" class="rowGapInitial"></div> + <div class="rowGapPx"> + <div id="rowGapInitialPx" class="rowGapInitial"></div> + </div> + <div id="rowGapInherit" class="rowGapInherit"></div> + <div class="rowGapPx"> + <div id="rowGapInheritPx" class="rowGapInherit"></div> + </div> + + <div id="invalidRowGapNegative"></div> + <div id="invalidRowGapMaxContent"></div> + <div id="invalidRowGapNone"></div> + <div id="invalidRowGapMultiple"></div> + <div id="invalidRowGapAngle"></div> + <div id="invalidRowGapResolution"></div> + <div id="invalidRowGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Default row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("rowGapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + }, "row-gap accepts em"); + test( + function(){ + var target = document.getElementById("rowGapVw"); + // The rowGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap accepts vw"); + test( + function(){ + var target = document.getElementById("rowGapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + }, "row-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("rowGapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + }, "row-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("rowGapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("rowGapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial inherited row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidRowGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Negative row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'max-content' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'none' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMultiple"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Angle row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Resolution row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Time row-gap is invalid"); + </script> +</body> + + diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-in-shadow.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-in-shadow.html new file mode 100644 index 00000000000..ebbc616ff8e --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-in-shadow.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>'transform-origin' on <svg> being direct descendant of shadow root</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<template> + <style> + #target { + height: 100px; + width: 100px; + background-color: green; + transform: rotate(90deg); + } + </style> + <svg id="target"></svg> +</template> +<div style="position: relative; height: 100px"> + <div style="width: 100px; height: 100px; background-color: red; position: absolute"></div> + <div style="position: absolute" id="wrapper"></div> +</div> +<script> +setup(function() { + const wrapper = document.querySelector('#wrapper'); + wrapper.attachShadow({mode: "open"}); + wrapper.shadowRoot.appendChild( + document.querySelector("template").content.cloneNode(true)); +}); + +test(function() { + const wrapper = document.querySelector('#wrapper'); + const target = wrapper.shadowRoot.getElementById('target'); + assert_equals(getComputedStyle(target, null).transformOrigin, '50px 50px'); +}); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html b/tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html index 8662b4fd2af..00d723fc6db 100644 --- a/tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html +++ b/tests/wpt/web-platform-tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html @@ -45,6 +45,11 @@ const gTestCases = [ desc: 'CSSSkew' }, { + value: new CSSSkew(CSS.deg(90), CSS.turn(0)), + cssText: 'skew(90deg)', + desc: 'CSSSkew with Y which is 0 value' + }, + { value: new CSSPerspective(CSS.px(1)), cssText: 'perspective(1px)', desc: 'CSSPerspective' diff --git a/tests/wpt/web-platform-tests/custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg b/tests/wpt/web-platform-tests/custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg new file mode 100644 index 00000000000..526de0f63fa --- /dev/null +++ b/tests/wpt/web-platform-tests/custom-elements/parser/parser-uses-create-an-element-for-a-token-svg.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg:svg xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/1999/xhtml" + width="100%" height="100%" viewBox="0 0 800 600"> +<svg:title>XML parser should use "create an element for a token"</svg:title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/xhtml.html#parsing-xhtml-documents:create-an-element-for-the-token"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script><![CDATA[ +class MyElement1 extends HTMLElement {} +customElements.define('my-element', MyElement1); +class MyElement2 extends HTMLDivElement {} +customElements.define('my-div', MyElement2, { extends: 'div' }); + +var test1 = async_test('XML parser should create autonomous custom elements.'); +window.addEventListener('load', test1.step_func_done(() => { + assert_true(document.getElementById('me1') instanceof MyElement1); +})); + +var test2 = async_test('XML parser should create custom built-in elements.'); +window.addEventListener('load', test2.step_func_done(() => { + assert_true(document.getElementById('me2') instanceof MyElement2); +})); +]]></script> +<my-element id="me1"></my-element> +<div is="my-div" id="me2"></div> +</svg:svg> diff --git a/tests/wpt/web-platform-tests/dom/abort/event.any.js b/tests/wpt/web-platform-tests/dom/abort/event.any.js index 3b25702c2e4..a67e6f400fc 100644 --- a/tests/wpt/web-platform-tests/dom/abort/event.any.js +++ b/tests/wpt/web-platform-tests/dom/abort/event.any.js @@ -17,6 +17,51 @@ test(t => { assert_true(s.aborted); c.abort(); -}, "AbortController() basics"); +}, "AbortController abort() should fire event synchronously"); + +test(t => { + const controller = new AbortController(); + const signal = controller.signal; + assert_equals(controller.signal, signal, + "value of controller.signal should not have changed"); + controller.abort(); + assert_equals(controller.signal, signal, + "value of controller.signal should still not have changed"); +}, "controller.signal should always return the same object"); + +test(t => { + const controller = new AbortController(); + const signal = controller.signal; + let eventCount = 0; + signal.onabort = () => { + ++eventCount; + }; + controller.abort(); + assert_true(signal.aborted); + assert_equals(eventCount, 1, "event handler should have been called once"); + controller.abort(); + assert_true(signal.aborted); + assert_equals(eventCount, 1, + "event handler should not have been called again"); +}, "controller.abort() should do nothing the second time it is called"); + +test(t => { + const controller = new AbortController(); + controller.abort(); + controller.signal.onabort = + t.unreached_func("event handler should not be called"); +}, "event handler should not be called if added after controller.abort()"); + +test(t => { + const controller = new AbortController(); + const signal = controller.signal; + signal.onabort = t.step_func(e => { + assert_equals(e.type, "abort", "event type should be abort"); + assert_equals(e.target, signal, "event target should be signal"); + assert_false(e.bubbles, "event should not bubble"); + assert_true(e.isTrusted, "event should be trusted"); + }); + controller.abort(); +}, "the abort event should have the right properties"); done(); diff --git a/tests/wpt/web-platform-tests/dom/interfaces.html b/tests/wpt/web-platform-tests/dom/interfaces.html index 8e9572d0f09..3cb08f405a5 100644 --- a/tests/wpt/web-platform-tests/dom/interfaces.html +++ b/tests/wpt/web-platform-tests/dom/interfaces.html @@ -18,8 +18,12 @@ element.setAttribute("bar", "baz"); var idlArray = new IdlArray(); -function doTest(idl) { - idlArray.add_idls(idl); +function doTest([html, dom]) { + // HTML is needed for EventHandler. Provide a dummy interface for + // LinkStyle which HTML depends on but we're not testing. + idlArray.add_untested_idls('interface LinkStyle {};'); + idlArray.add_untested_idls(html); + idlArray.add_idls(dom); idlArray.add_objects({ EventTarget: ['new EventTarget()'], Event: ['document.createEvent("Event")', 'new Event("foo")'], @@ -46,8 +50,13 @@ function doTest(idl) { idlArray.test(); } +function fetchText(url) { + return fetch(url).then((response) => response.text()); +} + promise_test(function() { - return fetch("/interfaces/dom.idl").then(response => response.text()) - .then(doTest); + return Promise.all(['/interfaces/html.idl', + '/interfaces/dom.idl'].map(fetchText)) + .then(doTest); }, "Test driver"); </script> diff --git a/tests/wpt/web-platform-tests/html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js b/tests/wpt/web-platform-tests/html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js new file mode 100644 index 00000000000..6d540ce97c9 --- /dev/null +++ b/tests/wpt/web-platform-tests/html/browsers/windows/auxiliary-browsing-contexts/opener-setter.window.js @@ -0,0 +1,38 @@ +[ + undefined, + 42, + function() { return "hi" }, + "hi", + {}, + [], + Symbol() +].forEach(val => { + test(t => { + const frame = document.body.appendChild(document.createElement("iframe")), + win = frame.contentWindow; + t.add_cleanup(() => frame.remove()); + + assert_own_property(win, "opener"); + assert_equals(win.opener, null); + const beforeDesc = Object.getOwnPropertyDescriptor(win, "opener"), + openerGet = beforeDesc.get, + openerSet = beforeDesc.set; + assert_own_property(beforeDesc, "get"); + assert_own_property(beforeDesc, "set"); + assert_true(beforeDesc.enumerable); + assert_true(beforeDesc.configurable); + + win.opener = val; + assert_equals(win.opener, val); + assert_equals(openerGet(), null); + + const desc = Object.getOwnPropertyDescriptor(win, "opener"); + assert_equals(desc.value, val); + assert_true(desc.writable); + assert_true(desc.enumerable); + assert_true(desc.configurable); + + openerSet("x"); + assert_equals(win.opener, "x"); + }, "Setting window.opener to " + String(val)); // String() needed for symbols +}); diff --git a/tests/wpt/web-platform-tests/payment-request/interfaces.https.html b/tests/wpt/web-platform-tests/payment-request/interfaces.https.html index bfbcad48afe..a7ec323f0cd 100644 --- a/tests/wpt/web-platform-tests/payment-request/interfaces.https.html +++ b/tests/wpt/web-platform-tests/payment-request/interfaces.https.html @@ -7,12 +7,13 @@ <script src=/resources/idlharness.js></script> <script> promise_test(async () => { - const idlURLs = ["/interfaces/dom.idl", "/interfaces/payment-request.idl"]; + const urls = ["/interfaces/dom.idl", "/interfaces/payment-request.idl"]; + const [dom, payment_request] = await Promise.all( + urls.map(url => fetch(url).then(r => r.text()))); const idlArray = new IdlArray(); - for(const url of idlURLs){ - const idlText = await fetch(url).then(r => r.text()); - idlArray.add_idls(idlText); - } + idlArray.add_untested_idls(dom); + idlArray.add_idls(payment_request); + // typedef EventHandler from HTML // https://html.spec.whatwg.org/#eventhandler idlArray.add_idls(` diff --git a/tests/wpt/web-platform-tests/picture-in-picture/enter-picture-in-picture.html b/tests/wpt/web-platform-tests/picture-in-picture/enter-picture-in-picture.html index e44087c3ff1..8830ab018bf 100644 --- a/tests/wpt/web-platform-tests/picture-in-picture/enter-picture-in-picture.html +++ b/tests/wpt/web-platform-tests/picture-in-picture/enter-picture-in-picture.html @@ -7,7 +7,7 @@ <script src="resources/picture-in-picture-helpers.js"></script> <body></body> <script> -async_test(t => { +promise_test(t => { const video = document.createElement('video'); video.addEventListener('enterpictureinpicture', t.step_func_done(event => { diff --git a/tests/wpt/web-platform-tests/picture-in-picture/leave-picture-in-picture.html b/tests/wpt/web-platform-tests/picture-in-picture/leave-picture-in-picture.html new file mode 100644 index 00000000000..a0d4cc26f35 --- /dev/null +++ b/tests/wpt/web-platform-tests/picture-in-picture/leave-picture-in-picture.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>Test leavepictureinpicture event</title> +<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/picture-in-picture-helpers.js"></script> +<body></body> +<script> +promise_test(t => { + const video = document.createElement('video'); + + video.addEventListener('leavepictureinpicture', t.step_func_done(event => { + assert_equals(event.target, video); + assert_equals(event.bubbles, true); + assert_equals(event.cancelable, false); + assert_equals(event.composed, false); + assert_equals(document.pictureInPictureElement, null); + })); + + return requestPictureInPictureWithTrustedClick(video) + .then(() => document.exitPictureInPicture()) +}, 'leavepictureinpicture event is fired if document.exitPictureInPicture'); + +promise_test(t => { + const video = document.createElement('video'); + + video.addEventListener('leavepictureinpicture', t.step_func_done(event => { + assert_equals(event.target, video); + assert_equals(event.bubbles, true); + assert_equals(event.cancelable, false); + assert_equals(event.composed, false); + assert_equals(document.pictureInPictureElement, null); + })); + + return requestPictureInPictureWithTrustedClick(video) + .then(() => { + video.disablePictureInPicture = true; + }); +}, 'leavepictureinpicture event is fired if video.disablePictureInPicture is set to true'); +</script> diff --git a/tests/wpt/web-platform-tests/service-workers/service-worker/resources/local-url-inherit-controller-frame.html b/tests/wpt/web-platform-tests/service-workers/service-worker/resources/local-url-inherit-controller-frame.html index d70e2141377..b331f88d471 100644 --- a/tests/wpt/web-platform-tests/service-workers/service-worker/resources/local-url-inherit-controller-frame.html +++ b/tests/wpt/web-platform-tests/service-workers/service-worker/resources/local-url-inherit-controller-frame.html @@ -6,10 +6,16 @@ const fetchURL = new URL('dummy.txt', window.location).href; const frameControllerText = `<script> - let t = navigator.serviceWorker.controller - ? navigator.serviceWorker.controller.scriptURL - : null; - parent.postMessage({ data: t }, '*'); + let t = null; + try { + if (navigator.serviceWorker.controller) { + t = navigator.serviceWorker.controller.scriptURL; + } + } catch (e) { + t = e.message; + } finally { + parent.postMessage({ data: t }, '*'); + } </` + `script>`; const frameFetchText = @@ -67,14 +73,15 @@ function getChildText(opts) { } function makeURL(opts) { + let mimetype = opts.child === 'iframe' ? 'text/html' + : 'text/javascript'; + if (opts.scheme === 'blob') { - let blob = new Blob([getChildText(opts)]); + let blob = new Blob([getChildText(opts)], { type: mimetype }); return URL.createObjectURL(blob); } if (opts.scheme === 'data') { - let mimetype = opts.child === 'iframe' ? 'text/html' - : 'text/javascript'; return `data:${mimetype},${getChildText(opts)}`; } diff --git a/tests/wpt/web-platform-tests/tools/wpt/browser.py b/tests/wpt/web-platform-tests/tools/wpt/browser.py index ef3b7d6694b..a76074bb284 100644 --- a/tests/wpt/web-platform-tests/tools/wpt/browser.py +++ b/tests/wpt/web-platform-tests/tools/wpt/browser.py @@ -8,6 +8,7 @@ import subprocess import sys from abc import ABCMeta, abstractmethod from ConfigParser import RawConfigParser +from datetime import datetime, timedelta from distutils.spawn import find_executable from io import BytesIO @@ -158,9 +159,15 @@ class Firefox(Browser): dest = os.path.join(dest, "profiles") if not os.path.exists(dest): os.makedirs(dest) - with open(os.path.join(dest, "prefs_general.js"), "wb") as f: - resp = get("https://hg.mozilla.org/mozilla-central/raw-file/tip/testing/profiles/prefs_general.js") - f.write(resp.content) + prefs_path = os.path.join(dest, "prefs_general.js") + + now = datetime.now() + if (not os.path.exists(prefs_path) or + (datetime.fromtimestamp(os.stat(prefs_path).st_mtime) < + now - timedelta(days=2))): + with open(prefs_path, "wb") as f: + resp = get("https://hg.mozilla.org/mozilla-central/raw-file/tip/testing/profiles/prefs_general.js") + f.write(resp.content) return dest diff --git a/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html b/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html index 66505b22bf5..60f7bb0cd38 100644 --- a/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html +++ b/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused-ref.html @@ -1,14 +1,13 @@ <!DOCTYPE html> +<html class="reftest-wait"> <title>Reference for WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title> +<script src="/common/reftest-wait.js"></script> <style> -html { overflow:hidden } -body { margin:0 } -.video { - display: inline-block; - width: 320px; - height: 180px; - position: relative; - font-size: 9px; -} +html { overflow: hidden } +body { margin: 0 } </style> -<div class="video"></div> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> +</video> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html b/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html index 708eba98c01..9233df874cf 100644 --- a/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html +++ b/tests/wpt/web-platform-tests/webvtt/rendering/cues-with-video/processing-model/dom_override_remove_cue_while_paused.html @@ -2,15 +2,15 @@ <html class="reftest-wait"> <title>WebVTT rendering, cue text should be removed when removing them using the DOM APIs while paused</title> <link rel="match" href="dom_override_remove_cue_while_paused-ref.html"> +<script src="/common/reftest-wait.js"></script> <style> -html { overflow:hidden } -body { margin:0 } +html { overflow: hidden } +body { margin: 0 } ::cue { font-family: Ahem, sans-serif; color: green } </style> -<script src="/common/reftest-wait.js"></script> <script> var i = 0; function updateCue() { @@ -24,7 +24,7 @@ body { margin:0 } takeScreenshotDelayed(1000); } </script> -<video id="video" width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> +<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> <source src="/media/white.webm" type="video/webm"> <source src="/media/white.mp4" type="video/mp4"> <track id="track" src="support/test.vtt" onload="updateCue();"> |
