diff options
Diffstat (limited to 'testing/web-platform/tests/css')
841 files changed, 12533 insertions, 2215 deletions
diff --git a/testing/web-platform/tests/css/CSS2/floats/block-in-inline-become-float.html b/testing/web-platform/tests/css/CSS2/floats/block-in-inline-become-float.html new file mode 100644 index 0000000000..2a415e1838 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/block-in-inline-become-float.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="http://crbug.com/332396356"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .half { + display: inline-block; + vertical-align: top; + width: 50px; + height: 100px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <span> + <div class="half"></div><div id="trouble"></div><div class="half"></div> + </span> +</div> +<script> + document.body.offsetTop; + trouble.style.cssFloat = "left"; +</script> diff --git a/testing/web-platform/tests/css/CSS2/tables/reference/no_red_3x3_monospace_table-ref.xht b/testing/web-platform/tests/css/CSS2/tables/reference/no_red_3x3_monospace_table-ref.xht index 821ddc77b0..5425f5b175 100644 --- a/testing/web-platform/tests/css/CSS2/tables/reference/no_red_3x3_monospace_table-ref.xht +++ b/testing/web-platform/tests/css/CSS2/tables/reference/no_red_3x3_monospace_table-ref.xht @@ -17,6 +17,7 @@ position: absolute; top: 1px; left: 1px; + right: 1px; } td { padding: 0; diff --git a/testing/web-platform/tests/css/CSS2/tables/table-vertical-align-baseline-008.xht b/testing/web-platform/tests/css/CSS2/tables/table-vertical-align-baseline-008.xht new file mode 100644 index 0000000000..1200ac1ae8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/tables/table-vertical-align-baseline-008.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test for baseline alignment of table cells</title> + <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com" /> + <link rel="help" href="https://github.com/servo/servo/issues/31722" /> + <link rel="help" href="https://drafts.csswg.org/css2/#height-layout" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="Since the cell is empty, the baseline of the row + is synthesized from the bottom content edge of the cell." /> + <style><![CDATA[ + .wrapper { float: left; font-size: 0; background: red } + .wrapper > * { width: 50px; height: 100px; background: green } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="wrapper"> + <div style="display: inline-block"></div> + <table style="display: inline-table; border-spacing: 0"> + <td style="vertical-align: baseline; padding: 0"></td> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/tables/table-vertical-align-baseline-009.xht b/testing/web-platform/tests/css/CSS2/tables/table-vertical-align-baseline-009.xht new file mode 100644 index 0000000000..4620848ddc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/tables/table-vertical-align-baseline-009.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Test for baseline alignment of table cells</title> + <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com" /> + <link rel="help" href="https://github.com/servo/servo/issues/31651" /> + <link rel="help" href="https://drafts.csswg.org/css2/#height-layout" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="assert" content="The baseline of the table should be aligned with the baseline of the cell in the first row." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style><![CDATA[ + span { + font: 50px/1 Ahem; + color: green; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div style="float: left; position: relative; font-size: 0; background: red"> + <span style="position: absolute; left: 0; bottom: 0">X</span> + <span>X</span> + <span style="display: inline-table"> + <span style="display: table-row">X</span> + <span style="display: table-row">X</span> + </span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html b/testing/web-platform/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html new file mode 100644 index 0000000000..be2ac9dae1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> + +<html> +<head> + <title>CSS Test: Overflowing content with text-align: justify</title> + <link rel="author" title="Martin Robinson" href="mrobinson@igalila.com"> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop"> + <link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property"> + <style type="text/css"> + div { + width: 0px; + } + </style> +</head> + +<body> + +<!-- These two divs should overflow, one because of the length of the content + and the other because of `text-indent`. In both of these cases, `text-align: justify` + should be treated like `text-align: left` since there is no extra space to + distribute to justification opportunities. --> +<div>lorem ipsum lastline</div> +<div style="text-indent: 50px">lorem ipsum lastline</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/text/text-align-justify-with-overflow.html b/testing/web-platform/tests/css/CSS2/text/text-align-justify-with-overflow.html new file mode 100644 index 0000000000..927e9afd5a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/text/text-align-justify-with-overflow.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + +<html> +<head> + <title>CSS Test: Overflowing content with text-align: justify</title> + <link rel="author" title="Martin Robinson" href="mrobinson@igalila.com"> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop"> + <link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property"> + <link rel="match" href="text-align-justify-with-overflow-ref.html"/> + <style type="text/css"> + div { + text-align: justify; + width: 0px; + } + </style> +</head> + +<body> + +<!-- These two divs should overflow, one because of the length of the content + and the other because of `text-indent`. In both of these cases, `text-align: justify` + should be treated like `text-align: left` since there is no extra space to + distribute to justification opportunities. --> +<div>lorem ipsum lastline</div> +<div style="text-indent: 50px">lorem ipsum lastline</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/text/text-indent-wrap-002-ref.html b/testing/web-platform/tests/css/CSS2/text/text-indent-wrap-002-ref.html new file mode 100644 index 0000000000..9750ce4c89 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/text/text-indent-wrap-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> + +<html> +<head> + <title>CSS Test: text-indent test (multiple-lines and text-align: justify)</title> + <link rel="author" title="Martin Robinson" href="mrobinson@igalila.com"> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop"> + <link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property"> + <style type="text/css"> + p { + text-align: justify; + } + span { + margin-left: 100px; + background: yellow; + } + </style> +</head> +<body> +<p><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/text/text-indent-wrap-002.html b/testing/web-platform/tests/css/CSS2/text/text-indent-wrap-002.html new file mode 100644 index 0000000000..128cba3f12 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/text/text-indent-wrap-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> + +<html> +<head> + <title>CSS Test: text-indent test (multiple-lines and text-align: justify)</title> + <link rel="author" title="Martin Robinson" href="mrobinson@igalila.com"> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop"> + <link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property"> + <link rel="match" href="text-indent-wrap-002-ref.html"/> + <style type="text/css"> + p { + text-indent: 100px; + text-align: justify; + } + span { background: yellow } + </style> +</head> +<body> +<p><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p> +</body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.oggtheora.ogv b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.oggtheora.ogv Binary files differdeleted file mode 100644 index baed6e2f5d..0000000000 --- a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.oggtheora.ogv +++ /dev/null diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-parsing-002.html b/testing/web-platform/tests/css/css-align/gaps/gap-parsing-002.html new file mode 100644 index 0000000000..f84abccf3c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-parsing-002.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Align Gap Values: longhand and shorthand gap parsing for style attribute</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> +<link rel="author" title="Karl Dubost" href="mailto:karlcow@apple.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("gap", "normal"); +test_valid_value("gap", "10px"); +test_valid_value("gap", "normal normal", "normal"); +test_valid_value("gap", "10px 10px", "10px"); +test_valid_value("column-gap", "normal"); +test_valid_value("column-gap", "10px"); +test_valid_value("row-gap", "normal"); +test_valid_value("row-gap", "10px"); + +const div = document.createElement("div"); +const style = div.style; + +test(function() { + style.cssText = "row-gap: normal; column-gap: normal;"; + assert_equals(style.cssText, "gap: normal;"); +}, "'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'"); + +test(function() { + style.cssText = "row-gap: normal; column-gap: normal;"; + assert_equals(style.getPropertyValue('gap'), "normal"); +}, "getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'"); + +test(function() { + style.cssText = "row-gap: 10px; column-gap: 10px;"; + assert_equals(style.cssText, "gap: 10px;"); +}, "'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'"); + +test(function() { + style.cssText = "row-gap: 10px; column-gap: 10px;"; + assert_equals(style.getPropertyValue('gap'), "10px"); +}, "getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'"); + +test(function() { + style.cssText = "row-gap: 10px; column-gap: normal;"; + assert_equals(style.cssText, "gap: 10px normal;"); +}, "'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'"); + +test(function() { + style.cssText = "row-gap: 10px; column-gap: normal;"; + assert_equals(style.getPropertyValue('gap'), "10px normal"); +}, "getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'"); + +test(function() { + style.cssText = "column-gap: normal; row-gap: 10px;"; + assert_equals(style.cssText, "gap: 10px normal;"); +}, "'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'"); + +test(function() { + style.cssText = "column-gap: normal; row-gap: 10px;"; + assert_equals(style.getPropertyValue('gap'), "10px normal"); +}, "getPropertyValue for 'column-gap: normal; row-gap: 10px;' returns '10px normal'"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html index 52397fb744..6095104fa3 100644 --- a/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html +++ b/testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>CSS Box Alignment Level 3: gap sets longhands</title> <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap"> -<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'."> +<meta name="assert" content="gap supports the full grammar '<row-gap> <column-gap>?'."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/shorthand-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-computed.html new file mode 100644 index 0000000000..ae43a2a3f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gridColumnGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-column-gap computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("grid-column-gap", "normal"); + +test_computed_value("grid-column-gap", "calc(10px + 0.5em)", "30px"); +test_computed_value("grid-column-gap", "calc(10px - 0.5em)", "0px"); +test_computed_value("grid-column-gap", "40%"); +test_computed_value("grid-column-gap", "calc(50% + 60px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-invalid.html new file mode 100644 index 0000000000..a43f05dbe1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-column-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-column-gap supports only the grammar '<length-percentage> | normal'."> +<meta name="assert" content="grid-column-gap rejects negative <length-percentage>."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("grid-column-gap", "auto"); + +test_invalid_value("grid-column-gap", "10"); +test_invalid_value("grid-column-gap", "10px 20px"); +test_invalid_value("grid-column-gap", "-1px"); +test_invalid_value("grid-column-gap", "-10%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-valid.html new file mode 100644 index 0000000000..b96e36e434 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-column-gap-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-column-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-column-gap supports the full grammar '<length-percentage> | normal'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("grid-column-gap", "normal"); + +test_valid_value("grid-column-gap", "0", "0px"); +test_valid_value("grid-column-gap", "1px"); +test_valid_value("grid-column-gap", "calc(2em + 3ex)"); +test_valid_value("grid-column-gap", "4%"); +test_valid_value("grid-column-gap", "5vmin"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-computed.html new file mode 100644 index 0000000000..eee24ad653 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-computed.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gridGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-gap computed value is a pair of keyword or <length-percentage> values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("grid-gap", "normal"); +test_computed_value("grid-gap", "10px"); +test_computed_value("grid-gap", "20%"); +test_computed_value("grid-gap", "calc(20% + 10px)"); +test_computed_value("grid-gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("grid-gap", "calc(0.5em + 10px)", "30px"); + +test_computed_value("grid-gap", "normal 10px"); +test_computed_value("grid-gap", "10px 20%"); +test_computed_value("grid-gap", "20% calc(20% + 10px)"); +test_computed_value("grid-gap", "calc(20% + 10px) normal"); + +test_computed_value("grid-gap", "calc(-0.5em + 10px) calc(0.5em + 10px)", "0px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-invalid.html new file mode 100644 index 0000000000..7536b091d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-gap supports only the grammar '<grid-row-gap> <grid-column-gap>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("grid-gap", "auto"); +test_invalid_value("grid-gap", "-10px"); + +test_invalid_value("grid-gap", "10px 20% 30px"); +test_invalid_value("grid-gap", "normal 10px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-gap-shorthand.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-shorthand.html new file mode 100644 index 0000000000..61ded44176 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-shorthand.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: grid-gap sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-gap supports the full grammar '<grid-row-gap> <column-gap>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('gap', 'normal', { + 'row-gap': 'normal', + 'column-gap': 'normal' +}); + +test_shorthand_value('gap', '10px 20%', { + 'row-gap': '10px', + 'column-gap': '20%' +}); + +test_shorthand_value('gap', '10px normal', { + 'row-gap': '10px', + 'column-gap': 'normal' +}); + +test_shorthand_value('gap', 'normal calc(20% + 10px)', { + 'grid-row-gap': 'normal', + 'grid-column-gap': 'calc(20% + 10px)' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/grid-gap-valid.html new file mode 100644 index 0000000000..c70b9205fd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-gap-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-gap supports the full grammar '<grid-row-gap> <grid-column-gap>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("grid-gap", "normal normal", "normal"); +test_valid_value("grid-gap", "10px 10px", "10px"); +test_valid_value("grid-gap", "20% 20%", "20%"); +test_valid_value("grid-gap", "calc(20% + 10px) calc(20% + 10px)", "calc(20% + 10px)"); + +test_valid_value("grid-gap", "normal 10px"); +test_valid_value("grid-gap", "10px 20%"); +test_valid_value("grid-gap", "20% calc(20% + 10px)"); +test_valid_value("grid-gap", "calc(20% + 10px) 0px"); +test_valid_value("grid-gap", "0px normal"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-computed.html b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-computed.html new file mode 100644 index 0000000000..d108cb2737 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: getComputedStyle().gridRowGap</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-row-gap computed value is a specified keyword or a computed <length-percentage>."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("grid-row-gap", "normal"); + +test_computed_value("grid-row-gap", "10px"); +test_computed_value("grid-row-gap", "20%"); +test_computed_value("grid-row-gap", "calc(20% + 10px)"); + +test_computed_value("grid-row-gap", "calc(-0.5em + 10px)", "0px"); +test_computed_value("grid-row-gap", "calc(0.5em + 10px)", "30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-invalid.html b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-invalid.html new file mode 100644 index 0000000000..39d0835a48 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-row-gap with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-row-gap supports only the grammar 'normal | <length-percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("grid-row-gap", "auto"); +test_invalid_value("grid-row-gap", "-10px"); + +test_invalid_value("grid-row-gap", "10px 20%"); +test_invalid_value("grid-row-gap", "normal 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-valid.html b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-valid.html new file mode 100644 index 0000000000..fe12376395 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/parsing/grid-row-gap-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Box Alignment Level 3: parsing grid-row-gap with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-align/#grid-gap-legacy"> +<link rel="author" title="Takuya Kurimoto" href="mailto:takuya004869@gmail.com"> +<meta name="assert" content="grid-row-gap supports the full grammar 'normal | <length-percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("grid-row-gap", "normal"); + +test_valid_value("grid-row-gap", "10px"); +test_valid_value("grid-row-gap", "20%"); +test_valid_value("grid-row-gap", "calc(20% + 10px)"); +test_valid_value("grid-row-gap", "0", "0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html index 7012208044..20abb2ed09 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-htb.html @@ -21,7 +21,7 @@ } .target { - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; justify-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html index 584424d306..099d9cd15b 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-htb-vrl.html @@ -22,7 +22,7 @@ .target { writing-mode: vertical-rl; - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; align-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html index c7ee230262..3e4f485cec 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-htb.html @@ -23,7 +23,7 @@ .target { writing-mode: horizontal-tb; - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; align-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html index d314dc7f2f..fe40c73141 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-vrl-vrl.html @@ -22,7 +22,7 @@ } .target { - anchor-default: --anchor; + position-anchor: --anchor; position: absolute; background: cyan; justify-self: anchor-center; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html index ae697fcc74..a3e00d5048 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-002.html @@ -13,7 +13,7 @@ body { margin: 0; } -.cb { +.rel { position: relative; background: lightgray; } @@ -36,7 +36,7 @@ body { <!-- anchor is fragmented in second and third columns --> <div class="multicol" id="test1"> - <div class="cb"> + <div class="rel"> <div class="spacer"></div> <div class="anchor"></div> <div class="target"></div> @@ -51,7 +51,7 @@ body { height: 100px; } -#test1 .cb { +#test1 .rel{ width: 100px; height: 300px; } @@ -79,19 +79,23 @@ test(() => { <div id="test2" style="font: 20px/1 Ahem; width: 11em"> - Lorem - <span class="cb"> - ipsum <span class="anchor">dolor</span> sit - <span class="target"></span> - </span> - amet.<br> + <div> + Lorem + <span class="rel"> + ipsum <span class="anchor">dolor</span> sit + <span class="target"></span> + </span> + amet. + </div> - Lorem - <span class="cb"> - ipsum dolor <span class="anchor">sit</span> - <span class="target"></span> - </span> - amet.<br> + <div> + Lorem + <span class="rel"> + ipsum dolor <span class="anchor">sit</span> + <span class="target"></span> + </span> + amet. + </div> </div> <script> test(() => { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html index da9ec4a145..fc384ab4cd 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-getComputedStyle-003.html @@ -52,7 +52,7 @@ body { } #target1 { - anchor-default: --a1; + position-anchor: --a1; } #anchor2 { @@ -62,7 +62,7 @@ body { } #target2 { - anchor-default: --a2; + position-anchor: --a2; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html index dba3472f5b..d65936ad86 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-name-inline-001.html @@ -48,7 +48,7 @@ <span class="relpos"> <span class="anchor">12</span> <span class="anchor abspos">123</span> - <span class="target" data-expected-width=20></span> + <span class="target" data-expected-width=30></span> </span> <span class="target" data-expected-width=30></span> </span> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained-dynamic.html b/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained-dynamic.html deleted file mode 100644 index 50cec96f36..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained-dynamic.html +++ /dev/null @@ -1,71 +0,0 @@ -<!DOCTYPE html> -<title>CSS Anchor Positioning: anchor-name is style contained - dynamic containment</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#name"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> -<style> - .container { - position: relative; - } - .anchor { - width: 100px; - height: 100px; - anchor-name: var(--anchor-name); - } - .contain-style { - contain: style; - } - .target { - position: absolute; - anchor-default: var(--anchor-name); - top: anchor(bottom, 50px); - } - #a1 { --anchor-name: --a1; } - #a2 { --anchor-name: --a2; } - #a3 { --anchor-name: --a3; } -</style> -<div id="a1" class="container"> - <div class="anchor"></div> - <div class="contain-style"> - <div class="anchor"></div> - </div> - <div class="target" data-offset-y="100"></div> -</div> -<div id="a2" class="container"> - <div class="anchor"></div> - <div class="anchor"></div> - <div class="contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<div id="a3" class="container"> - <div class="anchor contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<script type="module"> - await checkLayoutForAnchorPos('.target'); - - const t1 = document.querySelector("#a1 .target"); - const t2 = document.querySelector("#a2 .target"); - const t3 = document.querySelector("#a3 .target"); - const t4 = document.querySelector("#a4 .target"); - const t5 = document.querySelector("#a5 .target"); - t1.setAttribute("data-offset-y", "200"); - t2.setAttribute("data-offset-y", "200"); - t3.setAttribute("data-offset-y", "100"); - for (let element of document.querySelectorAll(".contain-style")) { - element.style.contain = "none"; - } - await checkLayoutForAnchorPos('.target'); - - t1.setAttribute("data-offset-y", "100"); - t2.setAttribute("data-offset-y", "50"); - t3.setAttribute("data-offset-y", "50"); - for (let element of document.querySelectorAll(".contain-style")) { - element.style.contain = ""; - } - await checkLayoutForAnchorPos('.target'); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained.html b/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained.html deleted file mode 100644 index a529575889..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-name-style-contained.html +++ /dev/null @@ -1,60 +0,0 @@ -<!DOCTYPE html> -<title>CSS Anchor Positioning: anchor-name is style contained</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#name"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> -<style> - .container { - position: relative; - } - .anchor { - width: 100px; - height: 100px; - anchor-name: var(--anchor-name); - } - .contain-style { - contain: style; - } - .target { - position: absolute; - anchor-default: var(--anchor-name); - top: anchor(bottom, 50px); - } - #a1 { --anchor-name: --a1; } - #a2 { --anchor-name: --a2; } - #a3 { --anchor-name: --a3; } - #a4 { --anchor-name: --a4; } - #a5 { --anchor-name: --a5; } -</style> -<body onload="checkLayoutForAnchorPos('.target')"> -<div id="a1" class="container"> - <div class="anchor"></div> - <div class="contain-style"> - <div class="anchor"></div> - </div> - <div class="target" data-offset-y="100"></div> -</div> -<div id="a2" class="container"> - <div class="anchor"></div> - <div class="anchor"></div> - <div class="contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<div id="a3" class="container"> - <div class="contain-style"> - <div class="anchor"></div> - <div class="target" data-offset-y="100"></div> - </div> -</div> -<div id="a4" class="container"> - <div class="anchor contain-style"> - <div class="target" data-offset-y="50"></div> - </div> -</div> -<div id="a5" class="container"> - <div class="anchor contain-style"></div> - <div class="target" data-offset-y="100"></div> -</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html index 8efbeb09e2..85fca57421 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-circular.html @@ -15,7 +15,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: orange; @@ -24,7 +24,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html index 146703e628..b7944652a0 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-004.html @@ -30,7 +30,7 @@ </style> <body> <div class="cb"> - <div style="contain: layout size paint; height: 50px"> + <div style="contain: strict; height: 50px"> <div class="spacer" style="height: 10px"></div> <div id="anchor1"></div> </div> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-005.html new file mode 100644 index 0000000000..b22a060cbd --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-dynamic-005.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + #cb { + position: relative; + width: 100px; + height: 100px; + overflow: clip; + } + #anchor { + position: absolute; + inset: 0; + background: green; + width: 100px; + height: 100px; + anchor-name: --a; + } + #bug { + position: absolute; + width: 100px; + height: 100px; + background: red; + left: anchor(right); + top: anchor(top); + position-anchor: --a; + } + #target { + position: absolute; + top: anchor(top); + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="cb"> + <div id="anchor"></div> + <div> + <div id=bug></div> + </div> + <div id=target></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.top = 'calc(anchor(top) + 10px)'; +</script> + diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html index 055459551b..a8513bb74c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-001.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html index a87a9d7eed..9ce0b8e5f9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-002.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html index 96d5219c5c..3bc815af0c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-003.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html index c986e3f98d..ad0a7b8b32 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-004.html @@ -21,7 +21,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; outline: none; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html index cf39c77736..51aa482aee 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-005.html @@ -22,7 +22,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; } body { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html index c13284b854..a3b9e63c06 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-position-top-layer-006.html @@ -22,7 +22,7 @@ width: 100px; height: 100px; background: lime; - anchor-default: --a; + position-anchor: --a; } body { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html index 8609795c8a..b9dfc56e2e 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-001.html @@ -40,7 +40,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -48,7 +48,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html index 8ef6f500a1..2c51e6a1a3 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-002.html @@ -45,7 +45,7 @@ body { height: 50px; top: anchor(--a1 top); left: anchor(--a1 right); - anchor-default: --a1; + position-anchor: --a1; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html index c1b31c0bec..6c0dd08355 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-003.html @@ -47,7 +47,7 @@ body { position: absolute; left: anchor(--a left); bottom: anchor(--a top); - anchor-default: --a; + position-anchor: --a; width: 50px; height: 50px; background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html index d08279118d..c0e0afb23f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-004.html @@ -32,7 +32,7 @@ body { .target { position: absolute; - anchor-default: --a; + position-anchor: --a; top: anchor(--a bottom); left: anchor(--a left); color: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html index a9a7d24d2b..f8f26b719f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-005.html @@ -33,7 +33,7 @@ body { width: 100px; height: 100px; bottom: anchor(--a top); - anchor-default: --a; + position-anchor: --a; background: lime; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html index 2ffd026b55..9c8a8c0ac2 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html @@ -50,21 +50,21 @@ body { /* Needs scroll adjustment in x axis only */ #target1 { - anchor-default: --a1; + position-anchor: --a1; left: anchor(left); top: anchor(--scroller1 bottom); } /* Needs scroll adjustment in y axis only */ #target2 { - anchor-default: --a2; + position-anchor: --a2; top: anchor(top); left: anchor(--scroller2 right); } /* No scroll adjustment needed */ #target3 { - anchor-default: --a3; + position-anchor: --a3; top: anchor(--scroller3 bottom); left: anchor(--scroller3 right); } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html index ec51910619..7e288d713f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-007.html @@ -56,7 +56,7 @@ body { height: 50px; left: anchor(--a3 left); top: anchor(--a1 top); - anchor-default: --a2; + position-anchor: --a2; background: lime; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html index 60ad128022..1235f8fad4 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html @@ -25,7 +25,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -34,7 +34,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html index e180c56468..9c60799e0b 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html @@ -31,7 +31,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -40,7 +40,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html index 8912fcb699..b441c92bf1 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html @@ -31,7 +31,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -41,7 +41,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html index 5834eb1f4c..f1765a9870 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html @@ -37,7 +37,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; @@ -45,7 +45,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html index 4000eb54a5..d2300da818 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html @@ -27,7 +27,7 @@ div { #anchored1 { position: absolute; - anchor-default: --a1; + position-anchor: --a1; background: green; position-try-options: --fallback; anchor-name: --a2; @@ -37,7 +37,7 @@ div { #anchored2 { position: absolute; - anchor-default: --a2; + position-anchor: --a2; left: anchor(--a2 left); top: anchor(--a2 bottom); background: lime; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html index 005a27393a..4dd9bad60e 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-001-crash.html @@ -23,7 +23,7 @@ #anchored { position: absolute; - anchor-default: --a; + position-anchor: --a; left: anchor(--a left); bottom: anchor(--a top); width: 100px; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html index 83ce146825..80dabbb666 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-002-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html index 594c844bfb..f46d902ffe 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-003-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html index 226a1b099c..ee5ad2f41a 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-004-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html index 639e2e064a..c5e44a79e7 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-005-crash.html @@ -23,7 +23,7 @@ position: fixed; top: anchor(--a bottom); left: anchor(--a left); - anchor-default: --a; + position-anchor: --a; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html index 6e57accc45..49c6dc780c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-composited-scrolling-006.html @@ -29,7 +29,7 @@ body { background: red; left: 0; bottom: anchor(--a top); - anchor-default: --a; + position-anchor: --a; } #overlap { position: absolute; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html index 5b2aa2dd50..1a05d8b93a 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos-002.html @@ -23,7 +23,7 @@ div { #anchored { position: fixed; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 right); top: anchor(--a1 top); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html index a32ef3f7c4..7923ed789d 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-fixedpos.html @@ -22,7 +22,7 @@ div { #anchored { position: fixed; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 right); top: anchor(--a1 top); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html index 1ef44d03c2..3b3f1a0608 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-js-expose.html @@ -35,7 +35,7 @@ bottom: anchor(--anchor top); width: 100px; height: 100px; - anchor-default: --anchor; + position-anchor: --anchor; background-color: green; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html index 557f748c02..291fe0d710 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-nested.html @@ -41,7 +41,7 @@ body { width: 50px; height: 50px; left: anchor(--anchor left); - anchor-default: --anchor; + position-anchor: --anchor; } .above { diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html index b696ae0060..3130018e73 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-001.html @@ -35,7 +35,7 @@ #anchored { position: absolute; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --f1, --f2; width: 100px; height: 100px; /* Above the anchor */ diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html index 3b84124705..52bbcd62fc 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-002.html @@ -31,7 +31,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; top: anchor(--a top); left: anchor(--a right); position-try-options: --pf; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html index dd9fdc92c2..b89a574d76 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-003.html @@ -39,7 +39,7 @@ width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf; } diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html index 0aab60b7a8..bf0bee972d 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-004.html @@ -33,7 +33,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2; /* Top of the anchor */ bottom: anchor(--a top); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html index e2dac13abd..197a9e4f79 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-005.html @@ -32,7 +32,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; top: anchor(--a top); left: anchor(--a right); position-try-options: --pf; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html index 1f9004de54..132c45c89c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-006.html @@ -28,7 +28,7 @@ body { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html index 32b7f64173..a02bd35a66 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-007.html @@ -32,7 +32,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html index 99f180bb46..2deddd587e 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-008.html @@ -33,7 +33,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html index 0267d1987b..0d7d6b077f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-009.html @@ -32,7 +32,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html index 133649c720..21f32ad068 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-010.html @@ -33,7 +33,7 @@ html { width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; inset-block-start: anchor(--a end); inset-inline-start: anchor(--a end); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html index 005a4ee728..5de8461010 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-011.html @@ -45,7 +45,7 @@ width: 100px; height: 100px; background: green; - anchor-default: --a; + position-anchor: --a; position-try-options: --pf1, --pf2, --pf3; bottom: anchor(--a top); left: anchor(--a right); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012-ref.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012-ref.html new file mode 100644 index 0000000000..fbc0b5fc6d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +#scroller { + width: 400px; + height: 400px; + overflow-y: scroll; +} + +.box { + min-height: 100px; + width: 100px; +} + +#anchor { + background: orange; +} + +#anchored { + width: 100px; + height: 100px; + background: green; +} +</style> + +<div id="scroller"> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box" id="anchor"></div> + <div id="anchored"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> +</div> + +<script> +scroller.scrollTop = 150; +</script> + diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012.html new file mode 100644 index 0000000000..7c0b381999 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-012.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Tests position fallback change on scroll with anchor and anchored under the same scroll container</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> +<link rel="match" href="anchor-scroll-position-try-012-ref.html"> +<style> +#scroller { + position: relative; + width: 400px; + height: 400px; + overflow-y: scroll; +} + +.box { + min-height: 100px; + width: 100px; +} + +#anchor { + anchor-name: --a; + background: orange; +} + +#anchored { + position: absolute; + top: anchor(--a bottom); + width: 100px; + height: 100px; + background: green; + position-anchor: --a; + position-try-options: --pf; +} + +@position-try --pf { + top: auto; + bottom: anchor(--a top); +} +</style> + +<div id="scroller"> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box" id="anchor"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div id="anchored"></div> +</div> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + scroller.scrollTop = 150; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html> + diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html index abab944751..a6c3b05725 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-001.html @@ -27,7 +27,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html index 357421ecf1..e2d91fe4dd 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-002.html @@ -28,7 +28,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html index 0e77004491..b40f5cc8d5 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-003.html @@ -27,7 +27,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html index f7878ae8df..30325ce1e0 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-to-sticky-004.html @@ -30,7 +30,7 @@ div { #anchored { position: absolute; - anchor-default: --a1; + position-anchor: --a1; left: anchor(--a1 left); top: anchor(--a1 bottom); background: green; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html index f11797edad..aa49fbcc6d 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-001.html @@ -41,7 +41,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -49,7 +49,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html index 19447952b0..5695db2a1c 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-002.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <html class="reftest-wait"> -<title>Anchored elements should update location on `anchor-default` property changes</title> +<title>Anchored elements should update location on `position-anchor` property changes</title> <link rel="author" href="mailto:xiaochengh@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> <link rel="match" href="reference/anchor-scroll-ref.html"> @@ -75,8 +75,8 @@ function raf() { async function runTest() { await raf(); await raf(); - document.getElementById('inner-anchored').style.anchorDefault = '--anchor'; - document.getElementById('outer-anchored').style.anchorDefault = '--anchor'; + document.getElementById('inner-anchored').style.positionAnchor = '--anchor'; + document.getElementById('outer-anchored').style.positionAnchor = '--anchor'; document.documentElement.classList.remove('reftest-wait'); } runTest(); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html index 57a524c483..2e1532badf 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-003.html @@ -37,7 +37,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -45,7 +45,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html index d20a7b660a..87138fb2d9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-004.html @@ -49,7 +49,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -57,7 +57,7 @@ body { position: absolute; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html index c2e7248c80..37874bba55 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-005.html @@ -24,7 +24,7 @@ background-color: green; top: anchor(--a top); left: 0; - anchor-default: --a; + position-anchor: --a; } </style> <div id="cb"> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html index 2535c68f78..81defee7cf 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-006.html @@ -24,7 +24,7 @@ background-color: green; top: anchor(--a top); left: 0; - anchor-default: --a; + position-anchor: --a; } </style> <div id="cb"> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html index 4859f01d66..33050348c4 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-update-007.html @@ -37,7 +37,7 @@ body { position: absolute; left: anchor(--anchor left); bottom: anchor(--anchor top); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -45,7 +45,7 @@ body { position: fixed; left: anchor(--anchor left); top: anchor(--anchor bottom); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html index 00406c825e..76186f9cad 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vlr.html @@ -50,7 +50,7 @@ body { position: absolute; top: anchor(--anchor top); left: anchor(--anchor right); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -58,7 +58,7 @@ body { position: absolute; top: anchor(--anchor top); right: anchor(--anchor left); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html index 2432d72899..13ea8b37ab 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-vrl.html @@ -50,7 +50,7 @@ body { position: absolute; top: anchor(--anchor top); left: anchor(--anchor right); - anchor-default: --anchor; + position-anchor: --anchor; } #outer-anchored { @@ -58,7 +58,7 @@ body { position: absolute; top: anchor(--anchor top); right: anchor(--anchor left); - anchor-default: --anchor; + position-anchor: --anchor; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html new file mode 100644 index 0000000000..50f1154532 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-attr.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the anchor attribute changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + #anchor1, #anchor2 { + width: 100px; + } + #anchor1 { + background: wheat; + height: 50px; + } + #anchor2 { + background: tomato; + height: 90px; + } + #anchored { + position: absolute; + width: anchor-size(width); + height: anchor-size(height); + top: anchor(top); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + transition-property: top, height; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=anchor1>Anchor1</div> + <div id=anchor2>Anchor2</div> + <div id=anchored anchor=anchor1></div> +</div> +<script> + test(() => { + assert_equals(anchored.offsetTop, 0); + assert_equals(anchored.offsetHeight, 50); + anchored.setAttribute('anchor', 'anchor2'); + assert_equals(anchored.offsetTop, 25); + assert_equals(anchored.offsetHeight, 70); + }, 'Transition when the anchor attribute changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-default.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-default.html new file mode 100644 index 0000000000..1bee0cbbe4 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-default.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when position-anchor changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + #anchor1, #anchor2 { + width: 100px; + } + #anchor1 { + background: wheat; + height: 50px; + anchor-name: --a1; + } + #anchor2 { + background: tomato; + height: 90px; + anchor-name: --a2; + } + #anchored { + position: absolute; + width: anchor-size(width); + height: anchor-size(height); + top: anchor(top); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + transition-property: top, height; + background-color: skyblue; + position-anchor: --a1; + } +</style> +<div id=cb> + <div id=anchor1>Anchor1</div> + <div id=anchor2>Anchor2</div> + <div id=anchored></div> +</div> +<script> + test(() => { + assert_equals(anchored.offsetTop, 0); + assert_equals(anchored.offsetHeight, 50); + anchored.style.positionAnchor = '--a2'; + assert_equals(anchored.offsetTop, 25); + assert_equals(anchored.offsetHeight, 70); + }, 'Transition when position-anchor changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html new file mode 100644 index 0000000000..cf65742b2d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-eval.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the result of anchor()/anchor-size() changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + .anchor { + position: absolute; + width: 50px; + height: 40px; + left: 60px; + top: 40px; + background: coral; + anchor-name: --a; + } + .shift { + left: 80px; + } + .grow { + width: 70px; + } + .anchored { + position: absolute; + width: anchor-size(width); + height: 40px; + position-anchor: --a; + top: anchor(bottom); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + background-color: skyblue; + } +</style> + +<div id=anchor_test class=cb> + <div class=anchor></div> + <div class=anchored style="transition-property:left"></div> +</div> +<script> + test(() => { + let anchor = anchor_test.querySelector('.anchor'); + let anchored = anchor_test.querySelector('.anchored'); + assert_equals(anchored.offsetLeft, 110); + anchor.classList.add('shift'); + assert_equals(anchored.offsetLeft, 120); + }, 'Transition when the result of anchor() changes'); +</script> + +<div id=anchor_size_test class=cb> + <div class=anchor></div> + <div class=anchored style="transition-property:width"></div> +</div> +<script> + test(() => { + let anchor = anchor_size_test.querySelector('.anchor'); + let anchored = anchor_size_test.querySelector('.anchored'); + assert_equals(anchored.offsetWidth, 50); + anchor.classList.add('grow'); + assert_equals(anchored.offsetWidth, 60); + }, 'Transition when the result of anchor-size() changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-name.html b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-name.html new file mode 100644 index 0000000000..ea7b403e61 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-transition-name.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when the dereferenced anchor name changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 250px; + height: 250px; + border: 1px solid black; + } + #anchor1, #anchor2 { + width: 100px; + } + #anchor1 { + background: wheat; + height: 50px; + } + #anchor2 { + background: tomato; + height: 90px; + } + .anchor-name { + anchor-name: --a; + } + #anchored { + position: absolute; + width: anchor-size(width); + height: anchor-size(height); + position-anchor: --a; + top: anchor(top); + left: anchor(right); + transition-duration: 1000s; + transition-timing-function: steps(2, start); + transition-property: top, height; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=anchor1 class=anchor-name>Anchor1</div> + <div id=anchor2>Anchor2</div> + <div id=anchored></div> +</div> +<script> + test(() => { + assert_equals(anchored.offsetTop, 0); + assert_equals(anchored.offsetHeight, 50); + anchor1.classList.toggle('anchor-name'); + anchor2.classList.toggle('anchor-name'); + assert_equals(anchored.offsetTop, 25); + assert_equals(anchored.offsetHeight, 70); + }, 'Transition when the dereferenced anchor name changes'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-typed-om.html b/testing/web-platform/tests/css/css-anchor-position/anchor-typed-om.html new file mode 100644 index 0000000000..d4fec49dd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-typed-om.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: anchor()/anchor-size() functions in CSS Typed OM</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 10px; + top: 10px; + width: 20px; + height: 20px; + background: coral; + anchor-name: --a; + } + #target { + position: absolute; + background: skyblue; + position-anchor: --a; + left: anchor(right); + top: calc(anchor(bottom) + 5px); + width: anchor-size(--unknown width, 25px); + height: calc(anchor-size(height) * 2); + } +</style> + +<div id=cb> + <div id=anchor></div> + <div id=target></div> +</div> +<script> + function assert_unit_value(actual, expected) { + assert_true(actual instanceof CSSUnitValue); + assert_true(expected instanceof CSSUnitValue); + assert_equals(actual.value, expected.value); + assert_equals(actual.unit, expected.unit); + } + + test(() => { + assert_unit_value(target.computedStyleMap().get('left'), CSS.px(30)); + assert_unit_value(target.computedStyleMap().get('top'), CSS.px(35)); + }, 'anchor() computes to pixels'); + + test(() => { + assert_unit_value(target.computedStyleMap().get('width'), CSS.px(25)); + assert_unit_value(target.computedStyleMap().get('height'), CSS.px(40)); + }, 'anchor-size() computes to pixels'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html index 622e9827b4..f6dac753d2 100644 --- a/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-allowed-declarations.html @@ -44,7 +44,7 @@ test_allowed_declaration('inset-inline-end'); test_allowed_declaration('inset-block'); test_allowed_declaration('inset-inline'); test_allowed_declaration('inset'); -test_allowed_declaration('inset-area', 'all'); +test_allowed_declaration('inset-area', 'span-all'); // Margin properties are allowed test_allowed_declaration('margin-top'); @@ -74,12 +74,12 @@ test_allowed_declaration('max-block-size'); test_allowed_declaration('max-inline-size'); // Box alignment properties are allowed -test_allowed_declaration('justify-content', 'normal'); -test_allowed_declaration('align-content', 'normal'); -test_allowed_declaration('justify-items', 'normal'); -test_allowed_declaration('align-items', 'normal'); test_allowed_declaration('justify-self', 'normal'); test_allowed_declaration('align-self', 'normal'); +test_allowed_declaration('place-self', 'normal'); + +// The 'position-anchor' property is allowed +test_allowed_declaration('position-anchor', '--anchor'); // Custom properties are disallowed test_disallowed_declaration('--custom'); @@ -91,12 +91,16 @@ test_disallowed_declaration('padding'); test_disallowed_declaration('display'); test_disallowed_declaration('position'); test_disallowed_declaration('float'); +test_disallowed_declaration('justify-content', 'normal'); +test_disallowed_declaration('align-content', 'normal'); +test_disallowed_declaration('justify-items', 'normal'); +test_disallowed_declaration('align-items', 'normal'); -// 'revert' and 'revert-layer' are disallowed -test_disallowed_declaration('top', 'revert'); -test_disallowed_declaration('top', 'revert-layer'); -test_disallowed_declaration('inset', 'revert'); -test_disallowed_declaration('inset', 'revert-layer'); +// 'revert' and 'revert-layer' are allowed +test_allowed_declaration('top', 'revert'); +test_allowed_declaration('top', 'revert-layer'); +test_allowed_declaration('inset', 'revert'); +test_allowed_declaration('inset', 'revert-layer'); // !important is disallowed test_disallowed_declaration('top', '1px !important'); diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html index d4a1f4fa24..91172c5185 100644 --- a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html @@ -6,7 +6,7 @@ <script src="/resources/testharnessreport.js"></script> <div id="anchor"></div> -<div id="not-anchor"></div> +<div id="other-anchor"></div> <div id="target"></div> <script> @@ -32,12 +32,12 @@ test(t => { test(t => { const style = createStyle(t, ` @position-try --pf { top: anchor(top); left: 0; } - #anchor, #not-anchor, #target { + #anchor, #other-anchor, #target { position: absolute; width: 100px; height: 100px; } #anchor { top: 100px; left: 0; anchor-name: --a; } - #not-anchor { top: 200px; left: 0; anchor-name: --b; } - #target { position-try-options: --pf; anchor-default: --a; left: 999999px; } + #other-anchor { top: 200px; left: 0; anchor-name: --b; } + #target { position-try-options: --pf; position-anchor: --a; left: 999999px; } `); const positionTryRule = style.sheet.cssRules[0]; @@ -50,12 +50,17 @@ test(t => { assert_equals(target.getBoundingClientRect().left, 100); assert_equals(target.getBoundingClientRect().top, 100); - // These properties are disallowed in `@position-try` rule, and hence should not affect + // This property are disallowed in `@position-try` rule, and hence should not affect // position fallback. - positionTryRule.style.setProperty('anchor-default', '--b'); positionTryRule.style.setProperty('position', 'static'); assert_equals(target.getBoundingClientRect().left, 100); assert_equals(target.getBoundingClientRect().top, 100); + + // `position-anchor` is an allowed property in `@position-try` and should affect position fallback. + positionTryRule.style.setProperty('position-anchor', '--b'); + assert_equals(target.getBoundingClientRect().left, 100); + assert_equals(target.getBoundingClientRect().top, 200); + }, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties'); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/chrome-40286059-crash.html b/testing/web-platform/tests/css/css-anchor-position/chrome-40286059-crash.html new file mode 100644 index 0000000000..dbbeb5ac4d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/chrome-40286059-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/40286059"> +<p>Pass if no crash</p> +<div id="pop" style="position-try-options: --foo" popover></div> +<script> + getComputedStyle(pop).left; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html index 52344614f0..7bc59356e9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html @@ -25,13 +25,13 @@ position: absolute; align-self: stretch; justify-self: stretch; - anchor-default: --anchor; + position-anchor: --anchor; background-color: blue; } - #top-left { inset-area: top / left; } - #top-right { inset-area: top / right; } - #bottom-left { inset-area: bottom / left; } - #bottom-right { inset-area: bottom / right; } + #top-left { inset-area: top left; } + #top-right { inset-area: top right; } + #bottom-left { inset-area: bottom left; } + #bottom-right { inset-area: bottom right; } </style> <div id="in-flow"> <br> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html new file mode 100644 index 0000000000..3e42913ffc --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - alignment with writing-mode and direction</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + /* A 300x300 container with a 100x100 centered anchor */ + #container { + position: relative; + width: 300px; + height: 300px; + } + #anchor { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + width: 10px; + height: 10px; + inset: 10px; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(writing_direction, inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Checking offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Checking offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Checking offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Checking offsetHeight"); + }, "Offsets for: " + inset_area + " with writing-mode / direction: " + writing_direction); + } + + const top_left = {left:80, top:80, width:10, height:10}; + const top_right = {left:210, top:80, width:10, height:10}; + const bottom_left = {left:80, top:210, width:10, height:10}; + const bottom_right = {left:210, top:210, width:10, height:10}; + + anchored.style.writingMode = "horizontal-tb"; + anchored.style.direction = "ltr"; + + // Writing-mode and direction on container + let writing_direction = "containing-block: horizontal-tb / rtl"; + container.style.writingMode = "horizontal-tb"; + container.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-lr / ltr + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-lr / ltr"; + container.style.writingMode = "vertical-lr"; + container.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-lr / rtl + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-lr / rtl"; + container.style.writingMode = "vertical-lr"; + container.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", bottom_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-rl / ltr + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-rl / ltr"; + container.style.writingMode = "vertical-rl"; + container.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: vertical-rl / rtl + // self: horizontal-tb / ltr + writing_direction = "containing-block: vertical-rl / rtl"; + container.style.writingMode = "vertical-rl"; + container.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", bottom_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // Writing-mode and direction on self + container.style.writingMode = "horizontal-tb"; + container.style.direction = "ltr"; + + // containing-block: horizontal-tb / ltr + // self: horizontal-tb / rtl + writing_direction = "self: horizontal-tb / rtl"; + anchored.style.writingMode = "horizontal-tb"; + anchored.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); + + // containing-block: horizontal-tb / ltr + // self: vertical-lr / ltr + writing_direction = "self: vertical-lr / ltr"; + anchored.style.writingMode = "vertical-lr"; + anchored.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + + // containing-block: horizontal-tb / ltr + // self: vertical-lr / rtl + writing_direction = "self: vertical-lr / rtl"; + anchored.style.writingMode = "vertical-lr"; + anchored.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_left); + + // containing-block: horizontal-tb / ltr + // self: vertical-rl / ltr + writing_direction = "self: vertical-rl / ltr"; + anchored.style.writingMode = "vertical-rl"; + anchored.style.direction = "ltr"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); + + // containing-block: horizontal-tb / ltr + // self: vertical-rl / rtl + writing_direction = "self: vertical-rl / rtl"; + anchored.style.writingMode = "vertical-rl"; + anchored.style.direction = "rtl"; + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_right); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify.html new file mode 100644 index 0000000000..7f7f05ccf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - alignment</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + /* A 300x300 container with a 100x100 centered anchor */ + #container { + position: relative; + width: 300px; + height: 300px; + } + #anchor { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + width: 10px; + height: 10px; + inset: 10px; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area); + } + + // anchor-center in both directions + test_inset_area("span-all", {left:145, top:145, width:10, height:10}); + + // Single region spans + test_inset_area("top left", {left:80, top:80, width:10, height:10}); + test_inset_area("top center", {left:145, top:80, width:10, height:10}); + test_inset_area("top right", {left:210, top:80, width:10, height:10}); + test_inset_area("center left", {left:80, top:145, width:10, height:10}); + test_inset_area("center center", {left:145, top:145, width:10, height:10}); + test_inset_area("center right", {left:210, top:145, width:10, height:10}); + test_inset_area("bottom left", {left:80, top:210, width:10, height:10}); + test_inset_area("bottom center", {left:145, top:210, width:10, height:10}); + test_inset_area("bottom right", {left:210, top:210, width:10, height:10}); + + // Multi-region spans + test_inset_area("top span-left", {left:180, top:80, width:10, height:10}); + test_inset_area("top span-right", {left:110, top:80, width:10, height:10}); + test_inset_area("span-top left", {left:80, top:180, width:10, height:10}); + test_inset_area("span-bottom left", {left:80, top:110, width:10, height:10}); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-outside.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-outside.html new file mode 100644 index 0000000000..ac7e85bafb --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-outside.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - anchor outside containing block</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + position: relative; + width: 400px; + height: 400px; + } + #anchor { + position: absolute; + left: -200px; + top: 500px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area); + } + + test_inset_area("span-all", {left:0, top:0, width:400, height:400}); + + test_inset_area("left span-all", {left:-200, top:0, width:0, height:400}); + test_inset_area("span-left span-all", {left:-100, top:0, width:0, height:400}); + test_inset_area("span-all center", {left:-200, top:0, width:100, height:400}); + test_inset_area("span-right span-all", {left:-200, top:0, width:600, height:400}); + test_inset_area("right span-all", {left:-100, top:0, width:500, height:400}); + + test_inset_area("top span-all", {left:0, top:0, width:400, height:500}); + test_inset_area("span-top span-all", {left:0, top:0, width:400, height:600}); + test_inset_area("center span-all", {left:0, top:500, width:400, height:100}); + test_inset_area("span-bottom span-all", {left:0, top:500, width:400, height:0}); + test_inset_area("bottom span-all", {left:0, top:600, width:400, height:0}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-partially-outside.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-partially-outside.html new file mode 100644 index 0000000000..9d7f5b5f6b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-anchor-partially-outside.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning - anchor partially outside containing block</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + position: relative; + width: 400px; + height: 400px; + } + #anchor { + position: absolute; + right: -50px; + top: -50px; + width: 100px; + height: 100px; + anchor-name: --anchor; + } + #anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } +</style> +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, expected_offsets) { + anchored.style.insetArea = inset_area; + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area); + } + + test_inset_area("span-all", {left:0, top:0, width:400, height:400}); + + test_inset_area("left span-all", {left:0, top:0, width:350, height:400}); + test_inset_area("span-left span-all", {left:0, top:0, width:450, height:400}); + test_inset_area("span-all center", {left:350, top:0, width:100, height:400}); + test_inset_area("span-right span-all", {left:350, top:0, width:50, height:400}); + test_inset_area("right span-all", {left:450, top:0, width:0, height:400}); + + test_inset_area("top span-all", {left:0, top:-50, width:400, height:0}); + test_inset_area("span-top span-all", {left:0, top:0, width:400, height:50}); + test_inset_area("center span-all", {left:0, top:-50, width:400, height:100}); + test_inset_area("span-bottom span-all", {left:0, top:-50, width:400, height:450}); + test_inset_area("bottom span-all", {left:0, top:50, width:400, height:350}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html index 4a63635558..b89d0e2428 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-basic.html @@ -31,7 +31,7 @@ position: absolute; align-self: stretch; justify-self: stretch; - anchor-default: --anchor; + position-anchor: --anchor; } #anchor { margin-top: 150px; @@ -49,73 +49,69 @@ function test_inset_area(inset_area, expected_offsets) { anchored.style.insetArea = inset_area; test(() => { - assert_equals(anchored.offsetLeft, expected_offsets.left); - assert_equals(anchored.offsetTop, expected_offsets.top); - assert_equals(anchored.offsetWidth, expected_offsets.width); - assert_equals(anchored.offsetHeight, expected_offsets.height); + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); }, "Offsets for: " + inset_area); } test_inset_area("none", {left:0, top:0, width:0, height:0}); - test_inset_area("all", {left:0, top:0, width:400, height:400}); - test_inset_area("all / all", {left:0, top:0, width:400, height:400}); + test_inset_area("span-all", {left:0, top:0, width:400, height:400}); + test_inset_area("span-all span-all", {left:0, top:0, width:400, height:400}); // Single region spans - test_inset_area("top / left", {left:0, top:0, width:100, height:150}); - test_inset_area("top / center", {left:100, top:0, width:150, height:150}); - test_inset_area("top / right", {left:250, top:0, width:150, height:150}); - test_inset_area("center / left", {left:0, top:150, width:100, height:75}); - test_inset_area("center / center", {left:100, top:150, width:150, height:75}); - test_inset_area("center / right", {left:250, top:150, width:150, height:75}); - test_inset_area("bottom / left", {left:0, top:225, width:100, height:175}); - test_inset_area("bottom / center", {left:100, top:225, width:150, height:175}); - test_inset_area("bottom / right", {left:250, top:225, width:150, height:175}); + test_inset_area("top left", {left:0, top:0, width:100, height:150}); + test_inset_area("top center", {left:100, top:0, width:150, height:150}); + test_inset_area("top right", {left:250, top:0, width:150, height:150}); + test_inset_area("center left", {left:0, top:150, width:100, height:75}); + test_inset_area("center center", {left:100, top:150, width:150, height:75}); + test_inset_area("center right", {left:250, top:150, width:150, height:75}); + test_inset_area("bottom left", {left:0, top:225, width:100, height:175}); + test_inset_area("bottom center", {left:100, top:225, width:150, height:175}); + test_inset_area("bottom right", {left:250, top:225, width:150, height:175}); - test_inset_area("start / start", {left:0, top:0, width:100, height:150}); - test_inset_area("start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("start / end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / end", {left:250, top:150, width:150, height:75}); - test_inset_area("end / start", {left:0, top:225, width:100, height:175}); - test_inset_area("end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("end / end", {left:250, top:225, width:150, height:175}); + test_inset_area("start start", {left:0, top:0, width:100, height:150}); + test_inset_area("start center", {left:100, top:0, width:150, height:150}); + test_inset_area("start end", {left:250, top:0, width:150, height:150}); + test_inset_area("center start", {left:0, top:150, width:100, height:75}); + test_inset_area("center end", {left:250, top:150, width:150, height:75}); + test_inset_area("end start", {left:0, top:225, width:100, height:175}); + test_inset_area("end center", {left:100, top:225, width:150, height:175}); + test_inset_area("end end", {left:250, top:225, width:150, height:175}); - test_inset_area("self-start / self-start", {left:0, top:0, width:100, height:150}); - test_inset_area("self-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("self-start / self-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / self-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / self-end", {left:250, top:150, width:150, height:75}); - test_inset_area("self-end / self-start", {left:0, top:225, width:100, height:175}); - test_inset_area("self-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("self-end / self-end", {left:250, top:225, width:150, height:175}); + test_inset_area("self-start self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("self-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("self-start self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("self-end self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("self-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("self-end self-end", {left:250, top:225, width:150, height:175}); - test_inset_area("y-start / x-start", {left:0, top:0, width:100, height:150}); - test_inset_area("y-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("y-start / x-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / x-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / x-end", {left:250, top:150, width:150, height:75}); - test_inset_area("y-end / x-start", {left:0, top:225, width:100, height:175}); - test_inset_area("y-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("y-end / x-end", {left:250, top:225, width:150, height:175}); + test_inset_area("y-start x-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-start x-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center x-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center x-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-end x-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-end x-end", {left:250, top:225, width:150, height:175}); - test_inset_area("y-self-start / x-self-start", {left:0, top:0, width:100, height:150}); - test_inset_area("y-self-start / center", {left:100, top:0, width:150, height:150}); - test_inset_area("y-self-start / x-self-end", {left:250, top:0, width:150, height:150}); - test_inset_area("center / x-self-start", {left:0, top:150, width:100, height:75}); - test_inset_area("center / x-self-end", {left:250, top:150, width:150, height:75}); - test_inset_area("y-self-end / x-self-start", {left:0, top:225, width:100, height:175}); - test_inset_area("y-self-end / center", {left:100, top:225, width:150, height:175}); - test_inset_area("y-self-end / x-self-end", {left:250, top:225, width:150, height:175}); + test_inset_area("y-self-start x-self-start", {left:0, top:0, width:100, height:150}); + test_inset_area("y-self-start center", {left:100, top:0, width:150, height:150}); + test_inset_area("y-self-start x-self-end", {left:250, top:0, width:150, height:150}); + test_inset_area("center x-self-start", {left:0, top:150, width:100, height:75}); + test_inset_area("center x-self-end", {left:250, top:150, width:150, height:75}); + test_inset_area("y-self-end x-self-start", {left:0, top:225, width:100, height:175}); + test_inset_area("y-self-end center", {left:100, top:225, width:150, height:175}); + test_inset_area("y-self-end x-self-end", {left:250, top:225, width:150, height:175}); // Multi-region spans - test_inset_area("y-self-start center / self-end center", {left:100, top:0, width:300, height:225}); - test_inset_area("bottom center / x-start x-end", {left:0, top:150, width:400, height:250}); - - // Non-orthogonal axes. - test_inset_area("x-start / left", {left:0, top:0, width:0, height:0}); - test_inset_area("y-end / y-self-start", {left:0, top:0, width:0, height:0}); + test_inset_area("span-y-self-start span-x-self-end", {left:100, top:0, width:300, height:225}); + test_inset_area("span-bottom span-all", {left:0, top:150, width:400, height:250}); // No implicit anchor means the inset-area should not apply. - anchored.style.anchorDefault = "implicit"; - test_inset_area("all / top", {left:0, top:0, width:0, height:0}); + anchored.style.positionAnchor = "implicit"; + test_inset_area("span-all top", {left:0, top:0, width:0, height:0}); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.tentative.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.html index 4e35dd883a..b06714b8a7 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.tentative.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed-insets.html @@ -1,21 +1,20 @@ <!DOCTYPE html> <title>CSS Anchor Positioning: inset-area should not affect computed inset values</title> <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> -<lnik rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/css-typed-om/resources/testhelper.js"></script> <style> #abs { position: absolute; - inset-area: all; + inset-area: span-all; } </style> <div id="abs"></div> <script> test(() => { let style = abs.computedStyleMap(); - assert_equals(style.get("inset-area").toString(), "all", "inset-area is supported"); + assert_equals(style.get("inset-area").toString(), "span-all", "inset-area is supported"); assert_style_value_equals(style.get("left"), new CSSKeywordValue("auto")); assert_style_value_equals(style.get("right"), new CSSKeywordValue("auto")); assert_style_value_equals(style.get("top"), new CSSKeywordValue("auto")); diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html index 46e29fda39..a49ff2a452 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-computed.html @@ -10,14 +10,13 @@ </div> <script> test_computed_value("inset-area", "none"); - test_computed_value("inset-area", "all"); + test_computed_value("inset-area", "span-all"); test_computed_value("inset-area", "x-start"); test_computed_value("inset-area", "center"); - test_computed_value("inset-area", "all / all", "all"); - test_computed_value("inset-area", "top center"); - test_computed_value("inset-area", "bottom center / all", "center bottom"); - test_computed_value("inset-area", "x-start center x-end", "x-start x-end"); - test_computed_value("inset-area", "x-start / x-end"); + test_computed_value("inset-area", "span-all span-all", "span-all"); + test_computed_value("inset-area", "center center", "center"); + test_computed_value("inset-area", "top center", "center top"); + test_computed_value("inset-area", "span-bottom span-all", "span-bottom"); - assert_not_inherited("inset-area", "none", "all"); + assert_not_inherited("inset-area", "none", "span-all"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-in-grid.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-grid.html new file mode 100644 index 0000000000..bbf92e8d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-grid.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning inside grid</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- + Grid: + + 100 100 100 100 + +--------+--------+--------+--------+ + | | | | | + 100 | | | | | + | | | | | + +--------+--------+--------+--------+ + | | |XXXXXXXX|XXXXXXXX| + 100 | | |XXXXXXXX|XXXXXXXX| + | | |XXXXXXXX|XXXXXXXX| + +--------+--------+--------+--------+ + | | |XXXXXXXX|XXXXXXXX| + 100 | | |XXXXXXXX|XXXXXXXX| + | | |XXXXXXXX|XXXXXXXX| + +--------+--------+--------+--------+ + | | | | | + 100 | | | | | + | | | | | + +--------+--------+--------+--------+ + + + Inset regions: + + 100 150 150 + +--------+-------------+------------+ + | | | | + | | | | + 150 | | | | + | | | | + | | | | + +--------+-------------+------------+ + | | | | + 75 | | | | + | | | | + +--------+-------------+------------+ + | | | | + | | | | + 175 | | | | + | | | | + | | | | + +--------+-------------+------------+ + + --> + +<style> + #container { + display: grid; + grid: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr; + position: relative; + width: 400px; + height: 400px; + } + + #anchor { + position: absolute; + left: 100px; + top: 150px; + width: 150px; + height: 75px; + anchor-name: --anchor; + } + + #anchored { + grid-row-start: 2; + grid-row-end: span 2; + grid-column-start: 3; + grid-column-end: auto; + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } +</style> + +<div id="container"> + <div id="anchor"></div> + <div id="anchored"></div> +</div> +<script> + function test_inset_area(inset_area, insets, expected_offsets) { + anchored.style.insetArea = inset_area; + for (const [prop, value] of Object.entries(insets)) { + anchored.style[prop] = value; + } + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area + " and insets: " + JSON.stringify(insets)); + } + + test_inset_area("span-bottom span-left", {left:"auto", right:"auto", top:"auto", bottom:"auto"}, + {left:200, top:150, width:50, height:150}); + + test_inset_area("span-bottom span-left", {left:"10px", right:"10px", top:"10px", bottom:"10px"}, + {left:210, top:160, width:30, height:130}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html index 91c9b09735..b25a928b1f 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-inline-container.html @@ -23,13 +23,15 @@ } .anchored { position: absolute; - anchor-default: --anchor; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; background-color: blue; } - #top-left { inset-area: top / left; } - #top-right { inset-area: top / right; } - #bottom-left { inset-area: bottom / left; } - #bottom-right { inset-area: bottom / right; } + #top-left { inset-area: top left; } + #top-right { inset-area: top right; } + #bottom-left { inset-area: bottom left; } + #bottom-right { inset-area: bottom right; } </style> <div id="in-flow"> <br> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html index 29fe76ca5c..b09b391353 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-interpolation.html @@ -9,6 +9,6 @@ test_no_interpolation({ property: "inset-area", from: "none", - to: "all / left" + to: "span-all left" }); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html index 1ee88b00e6..7c7fc82491 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-parsing.html @@ -6,44 +6,157 @@ <script src="/css/support/parsing-testcommon.js"></script> <body> <script> + function test_valid_single_inset_area_values(valid_keywords) { + for (const keyword of valid_keywords) { + test_valid_value("inset-area", keyword); + } + }; + + function test_valid_inset_area_value_pairs(valid_keywords1, + valid_keywords2, + flip_order) { + for (const keyword1 of valid_keywords1) { + for (const keyword2 of valid_keywords2) { + if (keyword1 === keyword2) { + test_valid_value("inset-area", keyword1 + " " + keyword2, keyword1); + } else { + test_valid_value("inset-area", keyword1 + " " + keyword2, + flip_order ? keyword2 + " " + keyword1 : keyword1 + " " + keyword2); + } + } + } + }; + + function test_valid_inset_area_value_pairs_with_span_all_center( + valid_keywords, flip_order) { + for (const keyword of valid_keywords) { + test_valid_value("inset-area", keyword + " center", + flip_order ? "center " + keyword : keyword + " center"); + test_valid_value("inset-area", "center " + keyword, + flip_order ? "center " + keyword : keyword + " center"); + test_valid_value("inset-area", keyword + " span-all", keyword); + test_valid_value("inset-area", "span-all " + keyword, keyword); + } + }; + + function test_valid_inset_area_value_start_end_pairs_with_span_all_center( + valid_keywords) { + for (const keyword of valid_keywords) { + test_valid_value("inset-area", keyword + " center"); + test_valid_value("inset-area", "center " + keyword); + test_valid_value("inset-area", keyword + " span-all"); + test_valid_value("inset-area", "span-all " + keyword); + } + } + + function test_invalid_inset_area_value_pairs(valid_keywords1, + valid_keywords2) { + for (const keyword1 of valid_keywords1) { + for (const keyword2 of valid_keywords2) { + test_invalid_value("inset-area", keyword1 + " " + keyword2); + test_invalid_value("inset-area", keyword2 + " " + keyword1); + } + } + }; + + function test_invalid_inset_area_value_equal_pairs(valid_keywords) { + for (const keyword of valid_keywords) { + test_invalid_value("inset-area", keyword + " " + keyword); + } + }; + + const horizontal = [ "left", "right", "span-left", "span-right", "x-start", + "x-end", "span-x-start", "span-x-end", "x-self-start", + "x-self-end", "span-x-self-start", "span-x-self-end" ]; + const vertical = [ "top", "bottom", "span-top", "span-bottom", "y-start", + "y-end", "span-y-start", "span-y-end", "y-self-start", + "y-self-end", "span-y-self-start", "span-y-self-end" ]; + const inline = [ "inline-start", "inline-end", "span-inline-start", + "span-inline-end" ]; + const block = [ "block-start", "block-end", "span-block-start", + "span-block-end" ]; + const self_inline = [ "self-inline-start", "self-inline-end", + "span-self-inline-start", "span-self-inline-end" ]; + const self_block = [ "self-block-start", "self-block-end", + "span-self-block-start", "span-self-block-end" ]; + const start_end = [ "start", "end", "span-start", "span-end" ]; + const self_start_end = [ "self-start", "self-end", "span-self-start", + "span-self-end" ]; + + // Test initial value 'none' test_valid_value("inset-area", "none"); - test_valid_value("inset-area", "all"); - test_valid_value("inset-area", "start"); - test_valid_value("inset-area", "end"); - test_valid_value("inset-area", "top"); - test_valid_value("inset-area", "left"); - test_valid_value("inset-area", "bottom"); - test_valid_value("inset-area", "right"); - test_valid_value("inset-area", "self-start"); - test_valid_value("inset-area", "self-end"); - test_valid_value("inset-area", "x-start"); - test_valid_value("inset-area", "x-end"); - test_valid_value("inset-area", "x-self-start"); - test_valid_value("inset-area", "x-self-end"); - test_valid_value("inset-area", "y-start"); - test_valid_value("inset-area", "y-end"); - test_valid_value("inset-area", "y-self-start"); - test_valid_value("inset-area", "y-self-end"); - - test_valid_value("inset-area", "all / all", "all"); - test_valid_value("inset-area", "top / all", "top"); - test_valid_value("inset-area", "all / top", "all / top"); - test_valid_value("inset-area", "start end", "all"); - test_valid_value("inset-area", "center end start", "all"); - test_valid_value("inset-area", "center x-end x-start", "x-start x-end"); - test_valid_value("inset-area", "center end start / top center bottom", "all / top bottom"); - test_valid_value("inset-area", "end center / start", "center end / start"); - test_valid_value("inset-area", "bottom / left"); - test_valid_value("inset-area", "center start", "start center"); - // Valid to parse and compute, but resolves to 'none'. - test_valid_value("inset-area", "x-start / x-start"); - - test_invalid_value("inset-area", "/ all"); - test_invalid_value("inset-area", "none / none"); - test_invalid_value("inset-area", "start / none"); - test_invalid_value("inset-area", "none / start"); - test_invalid_value("inset-area", "center center"); + test_invalid_value("inset-area", "none none"); + test_invalid_value("inset-area", "start none"); + test_invalid_value("inset-area", "none start"); test_invalid_value("inset-area", "top left top"); - test_invalid_value("inset-area", "x-start end"); - test_invalid_value("inset-area", "bottom left"); + + // Test keywords allowed in all axes + test_valid_value("inset-area", "center"); + test_valid_value("inset-area", "center center", "center") + test_valid_value("inset-area", "span-all"); + test_valid_value("inset-area", "span-all span-all", "span-all"); + test_valid_value("inset-area", "center span-all"); + test_valid_value("inset-area", "span-all center"); + + test_valid_single_inset_area_values(horizontal); + test_valid_single_inset_area_values(vertical); + test_valid_single_inset_area_values(inline); + test_valid_single_inset_area_values(block); + test_valid_single_inset_area_values(start_end); + test_valid_single_inset_area_values(self_start_end); + + // Used if the sets of valid keywords are serialized in a different order than + // the argument order + const flip_order = true; + + // Test all valid combinations in both orders + test_valid_inset_area_value_pairs(horizontal, vertical); + test_valid_inset_area_value_pairs(vertical, horizontal, flip_order); + test_valid_inset_area_value_pairs(block, inline); + test_valid_inset_area_value_pairs(inline, block, flip_order); + test_valid_inset_area_value_pairs(self_block, self_inline); + test_valid_inset_area_value_pairs(self_inline, self_block, flip_order); + test_valid_inset_area_value_pairs(start_end, start_end); + test_valid_inset_area_value_pairs(self_start_end, self_start_end); + + // Test all valid combinations with 'span-all' and 'center' in both orders + test_valid_inset_area_value_pairs_with_span_all_center(horizontal); + test_valid_inset_area_value_pairs_with_span_all_center(vertical, flip_order); + test_valid_inset_area_value_pairs_with_span_all_center(block); + test_valid_inset_area_value_pairs_with_span_all_center(inline, flip_order); + test_valid_inset_area_value_pairs_with_span_all_center(self_block); + test_valid_inset_area_value_pairs_with_span_all_center(self_inline, flip_order); + test_valid_inset_area_value_start_end_pairs_with_span_all_center(start_end); + test_valid_inset_area_value_start_end_pairs_with_span_all_center(self_start_end); + + // Test all invalid combinations with incompatible axes in both orders + test_invalid_inset_area_value_pairs(horizontal, inline); + test_invalid_inset_area_value_pairs(horizontal, block); + test_invalid_inset_area_value_pairs(horizontal, self_inline); + test_invalid_inset_area_value_pairs(horizontal, self_block); + test_invalid_inset_area_value_pairs(horizontal, start_end); + test_invalid_inset_area_value_pairs(horizontal, self_start_end); + test_invalid_inset_area_value_pairs(vertical, inline); + test_invalid_inset_area_value_pairs(vertical, block); + test_invalid_inset_area_value_pairs(vertical, self_inline); + test_invalid_inset_area_value_pairs(vertical, self_block); + test_invalid_inset_area_value_pairs(vertical, start_end); + test_invalid_inset_area_value_pairs(vertical, self_start_end); + test_invalid_inset_area_value_pairs(inline, self_inline); + test_invalid_inset_area_value_pairs(inline, self_block); + test_invalid_inset_area_value_pairs(inline, start_end); + test_invalid_inset_area_value_pairs(inline, self_start_end); + test_invalid_inset_area_value_pairs(block, self_inline); + test_invalid_inset_area_value_pairs(block, self_block); + test_invalid_inset_area_value_pairs(block, start_end); + test_invalid_inset_area_value_pairs(block, self_start_end); + test_invalid_inset_area_value_pairs(start_end, self_start_end); + + // Test all invalid combinations of same axis + test_invalid_inset_area_value_equal_pairs(horizontal); + test_invalid_inset_area_value_equal_pairs(vertical); + test_invalid_inset_area_value_equal_pairs(inline); + test_invalid_inset_area_value_equal_pairs(block); + test_invalid_inset_area_value_equal_pairs(self_inline); + test_invalid_inset_area_value_equal_pairs(self_block); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust-ref.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust-ref.html new file mode 100644 index 0000000000..5cd863500a --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Test Reference</title> +<p>You should see a green square below</p> +<div id="scroller" style="overflow:auto;width:400px;height:200px"> + <div style="height:200px"></div> + <div style="width:200px;height:200px;background:green"></div> + <div style="height:300px"></div> +</div> +<script> + scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust.html new file mode 100644 index 0000000000..0d3cef4fc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-scroll-adjust.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area anchored against scrolling anchor</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<link rel="match" href="inset-area-scroll-adjust-ref.html"> +<style> + #scroller { + width: 400px; + height: 200px; + overflow: auto; + } + #anchor { + background: green; + width: 200px; + height: 100px; + } + #anchored { + inset-area: bottom; + margin: 0; + padding: 0; + border: none; + background: green; + width: 200px; + height: 100px; + } + .filler { height: 200px; } +</style> +<p>You should see a green square below</p> +<div id="scroller"> + <div class="filler"></div> + <div id="anchor" popovertarget="anchored"></div> + <div id="anchored" anchor="anchor" popover></div> + <div class="filler"></div> + <div class="filler"></div> +</div> +<script> + anchored.showPopover(); + scroller.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-with-insets.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-with-insets.html new file mode 100644 index 0000000000..2482b44313 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-with-insets.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning with additional insets</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- The grid: + + 100 150 150 + +--------+--------+--------+ + | | | | + 150 | | | | + | | | | + +--------+--------+--------+ + | | | | + 75 | | | | + | | | | + +--------+--------+--------+ + | | | | + 175 | | | | + | | | | + +--------+--------+--------+ + + --> +<style> + #container { + position: absolute; + width: 400px; + height: 400px; + } + #anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + position-anchor: --anchor; + } + #anchor { + margin-top: 150px; + margin-left: 100px; + width: 150px; + height: 75px; + anchor-name: --anchor; + } +</style> +<div id="container"> + <div id="anchored"></div> + <div id="anchor"></div> +</div> +<script> + function test_inset_area(inset_area, insets, expected_offsets) { + anchored.style.insetArea = inset_area; + for (const [prop, value] of Object.entries(insets)) { + anchored.style[prop] = value; + } + + test(() => { + assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft"); + assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop"); + assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth"); + assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight"); + }, "Offsets for inset-area: " + inset_area + " and insets: " + JSON.stringify(insets)); + } + + test_inset_area("span-all", {top:"5px", bottom:"5px", left:"5px", right:"5px"}, + {left:5, top:5, width:390, height:390}); + + test_inset_area("center center", {top:"10px", bottom:"40px", left:"5px", right:"15px"}, + {left:105, top:160, width:130, height:25}); + + test_inset_area("left bottom", {top:"10px", bottom:"40px", left:"5px", right:"15px"}, + {left:5, top:235, width:80, height:125}); + + test_inset_area("span-right center", {top:"20%", bottom:"auto", left:"auto", right:"25%"}, + {left:100, top:165, width:225, height:60}); + + // No implicit anchor means the inset-area should not apply, but the insets still should. + anchored.style.positionAnchor = "implicit"; + test_inset_area("bottom right", {left:"50px", right:"100px", top:"30px" , bottom:"10px"}, + {left:50, top:30, width:250, height:360}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html index 5268cba7e5..7e740b4ace 100644 --- a/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-wm-dir.html @@ -31,7 +31,7 @@ position: absolute; align-self: stretch; justify-self: stretch; - anchor-default: --anchor; + position-anchor: --anchor; } #anchor { margin-top: 150px; @@ -70,50 +70,54 @@ let writing_direction = "containing-block: horizontal-tb / rtl"; container.style.writingMode = "horizontal-tb"; container.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_right); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_right); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + test_inset_area(writing_direction, "inline-start block-end", bottom_right); + test_inset_area(writing_direction, "self-inline-start self-block-end", bottom_left); // containing-block: vertical-lr / ltr // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-lr / ltr"; container.style.writingMode = "vertical-lr"; container.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); + test_inset_area(writing_direction, "inline-start block-end", top_right); + test_inset_area(writing_direction, "self-inline-start self-block-end", bottom_left); // containing-block: vertical-lr / rtl // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-lr / rtl"; container.style.writingMode = "vertical-lr"; container.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", bottom_left); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", bottom_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", bottom_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // containing-block: vertical-rl / ltr // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-rl / ltr"; container.style.writingMode = "vertical-rl"; container.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_right); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_right); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // containing-block: vertical-rl / rtl // self: horizontal-tb / ltr writing_direction = "containing-block: vertical-rl / rtl"; container.style.writingMode = "vertical-rl"; container.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", bottom_right); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", bottom_right); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", bottom_right); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", bottom_right); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // Writing-mode and direction on self container.style.writingMode = "horizontal-tb"; @@ -124,49 +128,49 @@ writing_direction = "self: horizontal-tb / rtl"; anchored.style.writingMode = "horizontal-tb"; anchored.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_right); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_right); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); // containing-block: horizontal-tb / ltr // self: vertical-lr / ltr writing_direction = "self: vertical-lr / ltr"; anchored.style.writingMode = "vertical-lr"; anchored.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_left); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_left); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_left); // containing-block: horizontal-tb / ltr // self: vertical-lr / rtl writing_direction = "self: vertical-lr / rtl"; anchored.style.writingMode = "vertical-lr"; anchored.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", bottom_left); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", bottom_left); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_left); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_left); // containing-block: horizontal-tb / ltr // self: vertical-rl / ltr writing_direction = "self: vertical-rl / ltr"; anchored.style.writingMode = "vertical-rl"; anchored.style.direction = "ltr"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", top_right); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", top_right); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", top_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", top_right); // containing-block: horizontal-tb / ltr // self: vertical-rl / rtl writing_direction = "self: vertical-rl / rtl"; anchored.style.writingMode = "vertical-rl"; anchored.style.direction = "rtl"; - test_inset_area(writing_direction, "start / start", top_left); - test_inset_area(writing_direction, "self-start / self-start", bottom_right); - test_inset_area(writing_direction, "x-start / y-start", top_left); - test_inset_area(writing_direction, "x-self-start / y-self-start", bottom_right); + test_inset_area(writing_direction, "start start", top_left); + test_inset_area(writing_direction, "self-start self-start", bottom_right); + test_inset_area(writing_direction, "x-start y-start", top_left); + test_inset_area(writing_direction, "x-self-start y-self-start", bottom_right); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html index f0944b7faa..91b27d4f31 100644 --- a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-computed.html @@ -19,6 +19,15 @@ test_computed_value("position-try-options", "flip-start flip-inline flip-block"); test_computed_value("position-try-options", "flip-start --flop", "--flop flip-start"); test_computed_value("position-try-options", "--flop flip-start"); + test_computed_value("position-try-options", "inset-area(left top)"); + test_computed_value("position-try-options", "inset-area(top left)", "inset-area(left top)"); + test_computed_value("position-try-options", "inset-area(start start)", "inset-area(start)"); + test_computed_value("position-try-options", "inset-area(left), inset-area(right)"); + test_computed_value("position-try-options", "--foo, inset-area(left)"); + test_computed_value("position-try-options", "--foo, inset-area(left), --bar"); + test_computed_value("position-try-options", "--foo, flip-start, inset-area(left)"); + test_computed_value("position-try-options", "--foo flip-start, inset-area(left)"); + test_computed_value("position-try-options", "inset-area(left), --bar flip-start"); assert_not_inherited("position-try-options", "none", "flip-inline"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html index 303cc4d0dd..72bc74111b 100644 --- a/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-try-options-parsing.html @@ -25,6 +25,15 @@ test_valid_value("position-try-options", "--bar flip-inline flip-block"); test_valid_value("position-try-options", "flip-inline --foo", "--foo flip-inline"); test_valid_value("position-try-options", "flip-inline flip-start --foo", "--foo flip-inline flip-start"); + test_valid_value("position-try-options", "inset-area(left top)"); + test_valid_value("position-try-options", "inset-area(top left)", "inset-area(left top)"); + test_valid_value("position-try-options", "inset-area(start start)", "inset-area(start)"); + test_valid_value("position-try-options", "inset-area(left), inset-area(right)"); + test_valid_value("position-try-options", "--foo, inset-area(left)"); + test_valid_value("position-try-options", "--foo, inset-area(left), --bar"); + test_valid_value("position-try-options", "--foo, flip-start, inset-area(left)"); + test_valid_value("position-try-options", "--foo flip-start, inset-area(left)"); + test_valid_value("position-try-options", "inset-area(left), --bar flip-start"); test_invalid_value("position-try-options", "none, flip-start"); test_invalid_value("position-try-options", "flip-block flip-block"); @@ -37,4 +46,10 @@ test_invalid_value("position-try-options", "foo"); test_invalid_value("position-try-options", "flip-start 123"); test_invalid_value("position-try-options", "--foo 123"); + test_invalid_value("position-try-options", "--foo inset-area(left)"); + test_invalid_value("position-try-options", "flip-start inset-area(left)"); + test_invalid_value("position-try-options", "inset-area(left) --foo "); + test_invalid_value("position-try-options", "inset-area(left) flip-start"); + test_invalid_value("position-try-options", "--foo, none"); + test_invalid_value("position-try-options", "--foo, inset-area(none)"); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html new file mode 100644 index 0000000000..ff4ceb73df --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: Computed position-visibility</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +<div id="container"> + <div id="target"></div> +</div> +<script> + test_computed_value("position-visibility", "always"); + test_computed_value("position-visibility", "anchors-valid"); + test_computed_value("position-visibility", "anchors-visible"); + test_computed_value("position-visibility", "no-overflow"); + test_computed_value("position-visibility", "anchors-valid no-overflow"); + test_computed_value("position-visibility", "anchors-visible no-overflow"); + test_computed_value("position-visibility", "no-overflow anchors-valid", "anchors-valid no-overflow"); + test_computed_value("position-visibility", "no-overflow anchors-visible", "anchors-visible no-overflow"); + + assert_not_inherited("position-visibility", "always", "no-overflow"); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html new file mode 100644 index 0000000000..18dd27eadb --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: Parsing of position-visibility</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<div id="target"></div> +<script> + test_valid_value("position-visibility", "initial"); + test_valid_value("position-visibility", "inherit"); + test_valid_value("position-visibility", "unset"); + test_valid_value("position-visibility", "revert"); + test_valid_value("position-visibility", "always"); + test_valid_value("position-visibility", "anchors-valid"); + test_valid_value("position-visibility", "anchors-visible"); + test_valid_value("position-visibility", "no-overflow"); + test_valid_value("position-visibility", "anchors-valid no-overflow"); + test_valid_value("position-visibility", "anchors-visible no-overflow"); + test_valid_value("position-visibility", "no-overflow anchors-valid", "anchors-valid no-overflow"); + test_valid_value("position-visibility", "no-overflow anchors-visible", "anchors-visible no-overflow"); + + test_invalid_value("position-visibility", "always anchors-valid"); + test_invalid_value("position-visibility", "always anchors-visible"); + test_invalid_value("position-visibility", "always no-overflow"); + test_invalid_value("position-visibility", "anchors-valid anchors-visible"); + test_invalid_value("position-visibility", "no-overflow no-overflow"); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-001.html index 1700a84aa8..d927b6b902 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-001.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-001.html @@ -1,8 +1,8 @@ <!DOCTYPE html> -<title>Tests the 'anchor-default' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-default"> +<title>Tests the 'position-anchor' property</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> -<link rel="match" href="anchor-default-ref.html"> +<link rel="match" href="position-anchor-ref.html"> <style> .anchor { width: 100px; @@ -34,7 +34,7 @@ body { } #target1 { - anchor-default: --a1; + position-anchor: --a1; } #anchor2 { @@ -44,7 +44,7 @@ body { } #target2 { - anchor-default: --a2; + position-anchor: --a2; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-002.html index c0a962ad36..d55338e1e9 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-002.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-002.html @@ -1,8 +1,8 @@ <!DOCTYPE html> -<title>Tests that 'anchor-default' property value is tree-scoped</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-default"> +<title>Tests that 'position-anchor' property value is tree-scoped</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> -<link rel="match" href="anchor-default-ref.html"> +<link rel="match" href="position-anchor-ref.html"> <style> .anchor { width: 100px; @@ -61,7 +61,7 @@ for (let host of document.querySelectorAll('.anchor')) { shadow.innerHTML = ` <style> :host { anchor-name: --a; } - ::slotted(.target) { anchor-default: --a; } + ::slotted(.target) { position-anchor: --a; } </style> <slot></slot> `; diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-003.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-003.html index 00c2032434..6117027e22 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-003.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-003.html @@ -1,6 +1,6 @@ <!DOCTYPE html> -<title>Tests that layout is updated on anchor-default value changes</title> -<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/#anchor-default"> +<title>Tests that layout is updated on position-anchor value changes</title> +<link rel="help" href="https://drafts4.csswg.org/css-anchor-position-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -13,11 +13,11 @@ background: lime; top: anchor(top); left: anchor(right); - anchor-default: --a; + position-anchor: --a; } #target.after { - anchor-default: --b; + position-anchor: --b; } #anchor1, #anchor2 { @@ -51,5 +51,5 @@ test(() => { // #target should be anchored to #anchor2 now assert_equals(target.offsetLeft, 200); assert_equals(target.offsetTop, 100); -}, 'Layout is updated on `anchor-default` changes'); +}, 'Layout is updated on `position-anchor` changes'); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-basics.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-basics.html index 783cb539cc..f9fe9dd6f8 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-basics.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-basics.html @@ -1,6 +1,6 @@ <!DOCTYPE html> -<title>Tests basics of the 'anchor-default' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-default"> +<title>Tests basics of the 'position-anchor' property</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -14,28 +14,28 @@ </div> <script> -// anchor-default: <anchor-element> +// position-anchor: <anchor-element> // <anchor-element> = implicit | <dashed-ident> -test_valid_value('anchor-default', 'implicit'); -test_valid_value('anchor-default', '--foo'); -test_invalid_value('anchor-default', 'none'); -test_invalid_value('anchor-default', 'foo-bar'); -test_invalid_value('anchor-default', '--foo --bar') -test_invalid_value('anchor-default', '--foo, --bar') -test_invalid_value('anchor-default', '100px'); -test_invalid_value('anchor-default', '100%'); +test_valid_value('position-anchor', 'implicit'); +test_valid_value('position-anchor', '--foo'); +test_invalid_value('position-anchor', 'none'); +test_invalid_value('position-anchor', 'foo-bar'); +test_invalid_value('position-anchor', '--foo --bar') +test_invalid_value('position-anchor', '--foo, --bar') +test_invalid_value('position-anchor', '100px'); +test_invalid_value('position-anchor', '100%'); // Computed value: as specified -test_computed_value('anchor-default', 'implicit'); -test_computed_value('anchor-default', '--foo'); +test_computed_value('position-anchor', 'implicit'); +test_computed_value('position-anchor', '--foo'); // Initial: implicit // Inherited: no -assert_not_inherited('anchor-default', 'implicit', '--foo'); +assert_not_inherited('position-anchor', 'implicit', '--foo'); // Animation type: discrete test_no_interpolation({ - property: 'anchor-default', + property: 'position-anchor', from: '--foo', to: 'implicit', }); diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-default-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-ref.html index 4d7de12447..4d7de12447 100644 --- a/testing/web-platform/tests/css/css-anchor-position/anchor-default-ref.html +++ b/testing/web-platform/tests/css/css-anchor-position/position-anchor-ref.html diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-basics.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-basics.html deleted file mode 100644 index bfeb921de1..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-basics.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<title>Tests basics of the 'position-fallback' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-position-fallback"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> -<script src="/css/support/computed-testcommon.js"></script> -<script src="/css/support/inheritance-testcommon.js"></script> -<script src="/css/support/interpolation-testcommon.js"></script> - -<div id="container"> - <div id="target"></div> -</div> - -<script> -// position-fallback: none | <dashed-ident> -test_valid_value('position-fallback', 'none'); -test_valid_value('position-fallback', '--foo'); -test_invalid_value('position-fallback', 'foo-bar'); -test_invalid_value('position-fallback', '--foo --bar') -test_invalid_value('position-fallback', '--foo, --bar') -test_invalid_value('position-fallback', '100px'); -test_invalid_value('position-fallback', '100%'); - -// Computed value: as specified -test_computed_value('position-fallback', 'none'); -test_computed_value('position-fallback', '--foo'); - -// Initial: none -// Inherited: no -assert_not_inherited('position-fallback', 'none', '--foo'); - -// Animation type: discrete -test_no_interpolation({ - property: 'position-fallback', - from: '--foo', - to: 'none', -}); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html deleted file mode 100644 index ebd1e78fb9..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-001.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<title>Tests basic functionalities of 'position-fallback-bounds'</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -.container { - position: relative; - width: 400px; - height: 400px; - top: 100px; - anchor-name: --bounds; - outline: 1px dashed black; -} - -.anchor { - position: absolute; - width: 100px; - height: 100px; - left: 150px; - background-color: orange; -} - -.target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - left: anchor(left); - position-fallback-bounds: --bounds; -} - -#anchor1 { - top: 0; - anchor-name: --a1; -} -#anchor2 { - bottom: 0; - anchor-name: --a2; -} - -#target1 { - anchor-default: --a1; - bottom: anchor(top); - position-try-options: --bottom; -} -#target2 { - anchor-default: --a2; - top: anchor(bottom); - position-try-options: --top; -} - -@position-try --bottom { - bottom: auto; - top: anchor(bottom); -} -@position-try --top { - top: auto; - bottom: anchor(top); -} -</style> - -<body onload="checkLayoutForAnchorPos('.target')"> - <div class="container" id="bounds"> - <div class="anchor" id="anchor1"></div> - <div class="anchor" id="anchor2"></div> - </div> - - <!-- Enough space above the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target1" data-offset-y=200></div> - - <!-- Enough space below the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target2" data-offset-y=300></div> -</body> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-002.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-002.html deleted file mode 100644 index 159484ad33..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-002.html +++ /dev/null @@ -1,87 +0,0 @@ -<!DOCTYPE html> -<title>Tests 'position-fallback-bounds' with mixed writing modes</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -.container { - position: relative; - width: 400px; - height: 400px; - top: 100px; - anchor-name: --bounds; - outline: 1px dashed black; -} - -.anchor { - position: absolute; - width: 100px; - height: 100px; - left: 150px; - background-color: orange; -} - -.target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - left: anchor(left); - position-fallback-bounds: --bounds; -} - -#anchor1 { - top: 0; - anchor-name: --a1; -} -#anchor2 { - bottom: 0; - anchor-name: --a2; -} - -#target1 { - anchor-default: --a1; - bottom: anchor(top); - position-try: --bottom; - writing-mode: vertical-rl; -} -#target2 { - anchor-default: --a2; - top: anchor(bottom); - position-try: --top; - writing-mode: vertical-lr; - direction: rtl; -} - -@position-try --bottom { - bottom: auto; - top: anchor(bottom); -} -@position-try --top { - top: auto; - bottom: anchor(top); -} -</style> - -<body onload="checkLayoutForAnchorPos('.target')"> - <div class="container" id="bounds"> - <div class="anchor" id="anchor1"></div> - <div class="anchor" id="anchor2"></div> - </div> - - <!-- Enough space above the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target1" data-offset-y=200></div> - - <!-- Enough space below the anchor in the viewport but not in the additional - bounds rect, which triggers fallback --> - <div class="target" id="target2" data-offset-y=300></div> -</body> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-003.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-003.html deleted file mode 100644 index 9da7bf9ccd..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-003.html +++ /dev/null @@ -1,95 +0,0 @@ -<!DOCTYPE html> -<title>Tests basic interaction between 'position-fallback-bounds' and scrolling</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - position: relative; - width: 200vw; - height: 200vh; -} - -#bounds { - position: fixed; - inset: 50px; - background: gray; - opacity: 0.1; - z-index: -1; - anchor-name: --bounds; -} - -#anchor { - position: absolute; - width: 100px; - height: 100px; - left: 200px; - top: 200px; - background-color: orange; - anchor-name: --a; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - anchor-default: --a; - position-fallback-bounds: --bounds; - position-try-options: --corner1, --corner2, --corner3; - bottom: anchor(top); - right: anchor(left); -} - -@position-try --corner1 { - inset: auto; - top: anchor(bottom); - right: anchor(left); -} -@position-try --corner2 { - inset: auto; - bottom: anchor(top); - left: anchor(right); -} -@position-try --corner3 { - inset: auto; - top: anchor(bottom); - left: anchor(right); -} -</style> - -<div id="bounds"></div> -<div id="anchor"></div> -<div id="target"></div> - -<script> -promise_test(async () => { - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); - assert_fallback_position(target, anchor, 'left'); -}, "Target is at anchor's top-left corner at initial scroll position"); - -promise_test(async () => { - document.documentElement.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); - assert_fallback_position(target, anchor, 'left'); -}, "Target falls back to anchor's bottom-left corner after anchor is scrolled upwards"); - -promise_test(async () => { - document.documentElement.scrollLeft = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); - assert_fallback_position(target, anchor, 'right'); -}, "Target falls back to anchor's bottom-right corner after anchor is further scrolled leftwards"); - -promise_test(async () => { - document.documentElement.scrollTop = 0; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); - assert_fallback_position(target, anchor, 'right'); -}, "Target falls back to anchor's top-left corner after anchor is scrolled back downwards"); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-004.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-004.html deleted file mode 100644 index eeee710e0f..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-004.html +++ /dev/null @@ -1,99 +0,0 @@ -<!DOCTYPE html> -<title>Tests complex interaction between 'position-fallback-bounds' and scrolling</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -#anchor-scroller { - position: absolute; - height: 175px; - width: 200px; - left: 200px; - top: 100px; - overflow-y: scroll; - z-index: 100; -} - -#anchor { - position: absolute; - width: 100px; - height: 100px; - left: 0; - top: 150px; - background-color: orange; - anchor-name: --a; -} - -#bounds-scroller { - position: absolute; - width: 400px; - height: 400px; - left: 100px; - top: 0; - overflow-y: scroll; -} - -#bounds { - position: absolute; - width: 400px; - height: 400px; - top: 100px; - background: gray; - anchor-name: --bounds; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background-color: lime; - left: anchor(left); - anchor-default: --a; - position-fallback-bounds: --bounds; - position-try-options: --bottom; - bottom: anchor(top); -} - -@position-try --bottom { - top: anchor(bottom); - bottom: auto; -} -</style> - -<div id="anchor-scroller"> - <div id="anchor"></div> -</div> - -<div id="bounds-scroller"> - <div id="bounds"></div> -</div> - -<div id="target"></div> - -<script> -promise_test(async () => { - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); -}, 'Target is above anchor at initial scroll position'); - -promise_test(async () => { - const anchorScroller = document.getElementById('anchor-scroller'); - anchorScroller.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); -}, 'Target falls back to below anchor after anchor is scrolled upwards'); - -promise_test(async () => { - const boundsScroller = document.getElementById('bounds-scroller'); - boundsScroller.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); -}, 'Target returns to above anchor after bounds are scrolled upwards'); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-005.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-005.html deleted file mode 100644 index fecd4328a5..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-005.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<title>Tests relayout after 'position-fallback-bounds' change</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -.bounds { - position: absolute; - left: 100px; - width: 200px; - height: 200px; - background: gray; - opacity: 0.1; -} - -#bounds1 { - top: 0; - anchor-name: --bounds1; -} - -#bounds2 { - top: 300px; - anchor-name: --bounds2; -} - -#anchor { - position: absolute; - width: 100px; - height: 100px; - background: orange; - left: 150px; - top: 200px; - anchor-name: --a; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background: lime; - left: anchor(left); - bottom: anchor(top); - anchor-default: --a; - position-try-options: --bottom; - position-fallback-bounds: --bounds1; -} - -@position-try --bottom { - bottom: auto; - top: anchor(bottom); -} -</style> - -<div class="bounds" id="bounds1"></div> -<div class="bounds" id="bounds2"></div> -<div id="anchor"></div> -<div id="target"></div> - -<script> -test(() => { - assert_fallback_position(target, anchor, 'top'); -}, 'Initial layout'); - -test(() => { - target.style = 'position-fallback-bounds: --bounds2'; - assert_fallback_position(target, anchor, 'bottom'); -}, 'Layout is updated after position-fallback-bounds property changes'); - -test(() => { - bounds2.style = 'top: 0; height: 500px'; - assert_fallback_position(target, anchor, 'top'); -}, 'Layout is updated after additional fallback-bounds rect changes'); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-006.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-006.html deleted file mode 100644 index 023c650cfc..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-006.html +++ /dev/null @@ -1,65 +0,0 @@ -<!DOCTYPE html> -<title>Tests 'position-fallback-bounds' should work without default anchor</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="support/test-common.js"></script> - -<style> -body { - margin: 0; -} - -#bounds { - position: absolute; - left: 0; - right: 0; - top: 100px; - height: calc(100vh + 200px); - background: lightgray; - anchor-name: --bounds; -} - -#anchor { - position: fixed; - width: 100px; - height: 100px; - left: 0; - top: 100px; - background: orange; - anchor-name: --a; -} - -#target { - position: fixed; - width: 100px; - height: 100px; - background: lime; - position-try-options: --bottom; - position-fallback-bounds: --bounds; - bottom: anchor(--a top); -} - -@position-try --bottom { - top: anchor(--a bottom); - bottom: auto; -} -</style> - -<div id=bounds></div> -<div id=anchor></div> -<div id=target></div> - -<script> -promise_test(async () => { - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'bottom'); -}, "Target is below anchor at initial scroll position"); - -promise_test(async () => { - document.documentElement.scrollTop = 100; - await waitUntilNextAnimationFrame(); - assert_fallback_position(target, anchor, 'top'); -}, "Target moves to above anchor after the additional fallback-bounds rect is scrolled upwards"); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-basics.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-basics.html deleted file mode 100644 index 3b8b67bd97..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-bounds-basics.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<title>Tests basics of the 'position-fallback' property</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#propdef-position-fallback-bounds"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> -<script src="/css/support/computed-testcommon.js"></script> -<script src="/css/support/inheritance-testcommon.js"></script> -<script src="/css/support/interpolation-testcommon.js"></script> - -<div id="container"> - <div id="target"></div> -</div> - -<script> -// position-fallback-bounds: normal | <dashed-ident> -test_valid_value('position-fallback-bounds', 'normal'); -test_valid_value('position-fallback-bounds', '--foo'); -test_invalid_value('position-fallback-bounds', 'foo-bar'); -test_invalid_value('position-fallback-bounds', '--foo --bar') -test_invalid_value('position-fallback-bounds', '--foo, --bar') -test_invalid_value('position-fallback-bounds', '100px'); -test_invalid_value('position-fallback-bounds', '100%'); - -// Computed value: as specified -test_computed_value('position-fallback-bounds', 'normal'); -test_computed_value('position-fallback-bounds', '--foo'); - -// Initial: normal -// Inherited: no -assert_not_inherited('position-fallback-bounds', 'normal', '--foo'); - -// Animation type: discrete -test_no_interpolation({ - property: 'position-fallback-bounds', - from: '--foo', - to: 'normal', -}); -</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-cascade.html b/testing/web-platform/tests/css/css-anchor-position/position-try-cascade.html new file mode 100644 index 0000000000..d73ddd586a --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-cascade.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: @position-try and cascade interaction</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .cb { + position: relative; + width: 100px; + height: 100px; + background: lightpink; + display: inline-block; + } + .abs { + position: absolute; + background: darkcyan; + left: 0px; + top: 0px; + width: 150px; /* force fallback */ + height: 25px; + position-try-options: --pf; + } + @position-try --pf { + width: 50px; + left: 50px; + top: 50px; + } +</style> + +<!-- Basic @position-try rule --> +<div class=cb> + <div id=abs_try class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_try.offsetLeft, 50); + assert_equals(abs_try.offsetTop, 50); + }, '@position-try rule applies'); +</script> + +<!-- Inline style --> +<div class=cb> + <div id=abs_inline class=abs style="left:20px"></div> +</div> +<script> + test(() => { + assert_equals(abs_inline.offsetLeft, 50); + assert_equals(abs_inline.offsetTop, 50); + }, '@position-try rule wins over inline style'); +</script> + +<!-- !important --> +<style> + #abs_important { + left: 10px !important; + } +</style> +<div class=cb> + <div id=abs_important class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_important.offsetLeft, 10); + assert_equals(abs_important.offsetTop, 50); + }, '@position-try rule does not win over !important'); +</script> + +<!-- Animations --> +<style> + @keyframes anim { + from { top: 20px; } + to { top: 20px; } + } + #abs_animation { + animation: anim 1000s steps(2, start) paused; + } +</style> +<div class=cb> + <div id=abs_animation class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_animation.offsetLeft, 50); + assert_equals(abs_animation.offsetTop, 20); + }, '@position-try rule does not win over animations'); +</script> + +<!-- Transitions --> +<style> + #abs_transition.move { + top: 10px !important; + transition: top 1000s steps(2, start); +</style> +<div class=cb> + <div id=abs_transition class=abs></div> +</div> +<script> + test(() => { + abs_transition.offsetTop; + abs_transition.classList.add('move'); + assert_equals(abs_transition.offsetLeft, 50); + assert_equals(abs_transition.offsetTop, 30); + }, '@position-try rule does not win over transitions'); +</script> + +<!-- revert / revert-layer --> +<style> + #abs_revert { + position-try-options: --pf-revert; + } + @layer author-layer { + #abs_revert { + top: 30px; + left: 30px; + } + } + #abs_revert { + top: 20px; + left: 20px; + /* overflowing .cb to force --pf-revert to be applied */ + width: 200px; + height: 200px; + } + @position-try --pf-revert { + left: revert; + top: revert-layer; + width: 30px; + height: 30px; + } +</style> +<div class=cb class=abs> + <div id=abs_revert class=abs></div> +</div> +<script> + test(() => { + assert_equals(abs_revert.offsetLeft, 0, "left reverted back to user origin"); + assert_equals(abs_revert.offsetTop, 20, "top reverted back to author"); + assert_equals(abs_revert.offsetWidth, 30, "width from --pf-revert"); + assert_equals(abs_revert.offsetHeight, 30, "height from --pf-revert"); + }, '@position-try revert / revert-layer reverts to user / author origin'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-initial-transition.html b/testing/web-platform/tests/css/css-anchor-position/position-try-initial-transition.html new file mode 100644 index 0000000000..0e81607ae6 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-initial-transition.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: Initial @position-try does not trigger a transition</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=cb> + <div id=abs></div> +</div> +<style> + #cb { + position: relative; + width: 100px; + height: 100px; + background: lightpink; + } + #abs { + position: absolute; + background: darkcyan; + top: 10px; + left: 10px; + width: 150px; /* force fallback */ + height: 25px; + position-try-options: --pf; + transition-property: top, left; + transition-duration: 10s; + transition-timing-function: steps(2, start); + } + @position-try --pf { + width: 50px; + top: 50px; + left: 50px; + } +</style> +<script> + test(() => { + assert_equals(getComputedStyle(abs).top, '50px'); + assert_equals(getComputedStyle(abs).left, '50px'); + }, 'No transition for initial style with @position-try'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-options-limit.html b/testing/web-platform/tests/css/css-anchor-position/position-try-options-limit.html new file mode 100644 index 0000000000..32a4f592fa --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-options-limit.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: position options list limit</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + position: relative; + width: 200px; + height: 200px; + } + .positioned { + width: 200px; + height: 200px; + position: absolute; + top: 0; + left: 10px; /* overflowing #container */ + } + + @position-try --bar { + left: 0; /* not overflowing #container */ + } + #t1 { + /* If --foo is not found, we should still try --bar even if we limit the + number of applied position options to five because the --foo's are not + added to the `position options list` per spec. */ + position-try-options: --foo, --foo, --foo, --foo, --foo, --foo, --foo, --bar; + } + + /* --f1 .. --f4 all overflowing #container */ + @position-try --f1 { left: 10px; } + @position-try --f2 { left: 10px; } + @position-try --f3 { left: 10px; } + @position-try --f4 { left: 10px; } + @position-try --f5 { left: 20px; width: 20px; /* not overflowing #container */ } + #t2 { + position-try-options: --f1, --f2, --f3, --f4, --f5; + } + +</style> +<div id="container"> + <div id="t1" class="positioned"></div> + <div id="t2" class="positioned"></div> +</div> +<script> + test(() => { + assert_equals(t1.offsetLeft, 0, "The --bar try option should be applied"); + }, "Try options which are not found are not part of the limit"); + + test(() => { + assert_equals(t2.offsetLeft, 20, "The --f5 try option should be applied"); + }, "Must support At least five try options"); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-order-basic.html b/testing/web-platform/tests/css/css-anchor-position/position-try-order-basic.html new file mode 100644 index 0000000000..d1c74e7b9f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-order-basic.html @@ -0,0 +1,197 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Basic position-try-order behavior</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 200px; + width: 150px; + height: 150px; + background-color: coral; + anchor-name: --a; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + position-anchor: --a; + } + #ref { + background-color: seagreen; + } + +/* + +The IMCB for --right is the whole area to the right of the anchor, and similarly +for --left, etc. + + ┌──────────────┐ + │ xxxx│ + │ xxxx│ + │ ┌────┐xxxx│ + │ │ │xxxx│ + │ └────┘xxxx│ + │ xxxx│ + │ xxxx│ + └──────────────┘ + +**/ + + @position-try --right { + inset: unset; + left: anchor(right); + } + @position-try --left { + inset: unset; + right: anchor(left); + } + @position-try --top { + inset: unset; + bottom: anchor(top); + } + @position-try --bottom { + inset: unset; + top: anchor(bottom); + } + +/* + +The IMCB for --right-sweep is the area that would be "swept" by the anchor if it +moved right, and similarly for --left-sweep, etc. + + ┌──────────────┐ + │ │ + │ │ + │ ┌────┐xxxx│ + │ │ │xxxx│ + │ └────┘xxxx│ + │ │ + │ │ + └──────────────┘ + +*/ + + @position-try --right-sweep { + inset: unset; + top: anchor(top); + bottom: anchor(bottom); + left: anchor(right); + align-self: center; + } + + @position-try --left-sweep { + inset: unset; + top: anchor(top); + bottom: anchor(bottom); + right: anchor(left); + align-self: center; + } + + @position-try --bottom-sweep { + left: anchor(left); + right: anchor(right); + top: anchor(bottom); + justify-self: center; + } + + @position-try --top-sweep { + left: anchor(left); + right: anchor(right); + bottom: anchor(top); + justify-self: center; + } + +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Test that an element with the specified `position_try` gets the same +// position as a reference element with `position_try_expected`. +function test_order(position_try, position_try_expected) { + test((t) => { + style.textContent = ` + #target { + position-try: ${position_try}; + } + #ref { + position-try: ${position_try_expected}; + } + `; + assert_true(CSS.supports('position-try', 'normal --x')); + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${position_try} | ${position_try_expected}`); +} + +// Note: --right, --left, --top, and --bottom all fit, but have different +// inset-modifed containing blocks. +test_order('--right', '--right'); +test_order('--left', '--left'); +test_order('--top', '--top'); +test_order('--bottom', '--bottom'); + +// position-try-order:normal just picks the first option. +test_order('--right, --left, --bottom, --top', '--right'); +test_order('normal --right, --left, --bottom, --top', '--right'); +test_order('normal --top, --left, --bottom, --right', '--top'); + +// --right and --left have the same IMCB block-size. +test_order('most-block-size --right, --left', '--right'); +test_order('most-height --right, --left', '--right'); +// --left has more inline-size than --right. +test_order('most-inline-size --right, --left', '--left'); +test_order('most-width --right, --left', '--left'); + +// --bottom and --top have the same IMCB inline-size. +test_order('most-inline-size --bottom, --top', '--bottom'); +test_order('most-width --bottom, --top', '--bottom'); +// --top has more block-size than --bottom. +test_order('most-block-size --bottom, --top', '--top'); +test_order('most-height --bottom, --top', '--top'); + +// --bottom/--top has more IMBC inline-size than --right/--left. +test_order('most-inline-size --right, --left, --bottom, --top', '--bottom'); +test_order('most-inline-size --right, --left, --top, --bottom', '--top'); + +// --right/--left has more IMBC block-size than --bottom/--top. +test_order('most-block-size --bottom, --top, --right, --left', '--right'); +test_order('most-block-size --bottom, --top, --left, --right', '--left'); + +// --left-sweep and --bottom-sweep has the same IMBC inline-size ... +test_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep'); +test_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep'); +// ... but not the same block-size. +test_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep'); +test_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep'); + +test_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep'); +test_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep'); + +test_order(`most-inline-size + --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, + --right, --left, --bottom, --top + `, '--left-sweep'); + +test_order(`most-block-size + --right-sweep, --left-sweep, --bottom-sweep, --top-sweep, + --right, --left, --bottom, --top + `, '--right'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-position-anchor.html b/testing/web-platform/tests/css/css-anchor-position/position-try-position-anchor.html new file mode 100644 index 0000000000..7355c23f53 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-position-anchor.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: @position-try can set position-anchor</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/test-common.js"></script> +<style> + #cb { + position: relative; + width: 400px; + height: 400px; + } + .anchor { + width: 100px; + height: 100px; + } + #anchor-a { + anchor-name: --a; + /* Makes #anchored overflow when aligned with right edge */ + margin-left: 100px; + } + #anchor-b { + anchor-name: --b; + } + #anchored { + position: absolute; + left: anchor(right); + width: 300px; + height: 100px; + position-anchor: --a; + position-try-options: --pf; + } + @position-try --pf { + position-anchor: --b; + } +</style> +<body onload="checkLayoutForAnchorPos('#anchored')"> +<div id="cb"> + <div id="anchor-a" class="anchor"></div> + <div id="anchor-b" class="anchor"></div> + <div id="anchored" data-offset-x="100"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-transition-basic.html b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-basic.html new file mode 100644 index 0000000000..3bb982f073 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-basic.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition when @position-try is applied</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 400px; + height: 250px; + border: 1px solid black; + } + #cb.shrink { + width: 300px; + } + #target { + position: absolute; + left: 300px; + width: 50px; + height: 50px; + background: skyblue; + position-try-options: --200; + } + #target.anim { + transition: left 1000s steps(2, start); + } + @position-try --200 { + left: 200px; + } +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + function cleanup() { + target.className = ''; + cb.className = ''; + } + + test((t) => { + t.add_cleanup(cleanup); + assert_equals(target.offsetLeft, 300); + cb.classList.add('shrink'); + target.classList.add('anim'); + // Now we take the --200 option: + assert_equals(target.offsetLeft, 250); + }, 'Transition when @position-try is applied'); + + test((t) => { + t.add_cleanup(cleanup); + cb.classList.add('shrink'); + assert_equals(target.offsetLeft, 200); + cb.classList.remove('shrink'); + target.classList.add('anim'); + assert_equals(target.offsetLeft, 250); + }, 'Transition when @position-try is unapplied'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-transition-flip.html b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-flip.html new file mode 100644 index 0000000000..6adacadfd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-transition-flip.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: Transition to a flipped state</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + display: inline-block; + position: relative; + width: 400px; + height: 250px; + border: 1px solid black; + } + #cb.shrink { + width: 325px; + } + #anchor { + position: absolute; + width: 50px; + height: 50px; + background: coral; + left: 250px; + top: 50px; + anchor-name: --a; + } + #target { + position-anchor: --a; + position: absolute; + left: anchor(right); + top: anchor(top); + width: 50px; + height: 50px; + background: skyblue; + position-try-options: flip-start; + } + #target.anim { + transition: left 1000s steps(2, start); + } +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> +</div> +<script> + function cleanup() { + target.className = ''; + cb.className = ''; + } + + test((t) => { + t.add_cleanup(cleanup); + assert_equals(target.offsetLeft, 300); + cb.classList.add('shrink'); + target.classList.add('anim'); + assert_equals(target.offsetLeft, 275); + }, 'Transition to a flipped state'); + + test((t) => { + t.add_cleanup(cleanup); + cb.classList.add('shrink'); + assert_equals(target.offsetLeft, 250); + cb.classList.remove('shrink'); + target.classList.add('anim'); + assert_equals(target.offsetLeft, 275); + }, 'Transition to an unflipped state'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-typed-om.html b/testing/web-platform/tests/css/css-anchor-position/position-try-typed-om.html new file mode 100644 index 0000000000..76ec9411b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-try-typed-om.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: Effects from @position-try in CSS Typed OM</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @position-try --pt { + left: anchor(right); + top: 50px; + width: anchor-size(width); + height: 40px; + } + #cb { + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 10px; + top: 10px; + width: 20px; + height: 20px; + background: coral; + anchor-name: --a; + } + #target { + position: absolute; + background: skyblue; + position-anchor: --a; + left: 9999px; /* force overflow */ + position-try-options: --pt; + } +</style> + +<div id=cb> + <div id=anchor></div> + <div id=target></div> +</div> +<script> + function assert_unit_value(actual, expected) { + assert_true(actual instanceof CSSUnitValue); + assert_true(expected instanceof CSSUnitValue); + assert_equals(actual.value, expected.value); + assert_equals(actual.unit, expected.unit); + } + + test(() => { + assert_unit_value(target.computedStyleMap().get('left'), CSS.px(30)); + assert_unit_value(target.computedStyleMap().get('top'), CSS.px(50)); + assert_unit_value(target.computedStyleMap().get('width'), CSS.px(20)); + assert_unit_value(target.computedStyleMap().get('height'), CSS.px(40)); + }, 'Effects of position-try-options are visible in the computed values'); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html new file mode 100644 index 0000000000..9d87f82b9f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target" class="target" style="position-anchor: --a1;">target1</div> +</div> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.positionVisibility = 'no-overflow'; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid-ref.html new file mode 100644 index 0000000000..96b4e86551 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + .anchor { + width: 100px; + height: 100px; + background: orange; + } + .target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div class="anchor">anchor1</div> +<div class="target">target1</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html new file mode 100644 index 0000000000..bf67921639 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: anchors-valid</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-valid-ref.html"> +<style> + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: anchors-valid; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } +</style> + +<!-- #target1 should be visible. --> +<div class="anchor" style="anchor-name: --a1;">anchor1</div> +<div id="target1" class="target" style="position-anchor: --a1; background: green">target1</div> + +<!-- #target2 should not be visible because anchor name does not exist. --> +<div id="target2" class="target" style="top: anchor(--does-not-exist bottom);">target2</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-ref.html new file mode 100644 index 0000000000..10f74d4fb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + width: 100px; + height: 100px; + background: orange; + margin-bottom: 100px; + } + + #target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> +</div> +<div id="target">target</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 0; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html new file mode 100644 index 0000000000..cea439c55f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Scrolling an anchor in to view should cause a position-visibility: anchors-visible element to appear." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-after-scroll-in-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: block-end; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor, + // which is visible. + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor out of view. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should now be invisible. + + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor back into view. + scroller.scrollTop = 0; + + // #target should now be visible again. + takeScreenshot(); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out-ref.html new file mode 100644 index 0000000000..bd4fe1f09f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #spacer { + height: 200px; + } +</style> + +<div id="scroll-container"> + <div id="spacer"><div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html new file mode 100644 index 0000000000..b2e3643b07 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Scrolling an anchor out of view should cause a position-visibility: anchors-visible element to disappear." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor, + // which is visible. + + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor so that it is out of view. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + + // #target should now be invisible. + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor-ref.html new file mode 100644 index 0000000000..cc35e4cd1f --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + #anchor { + width: 100px; + height: 200px; + background: orange; + } + #target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div id="anchor"></div> +</div> +<div id="target">target</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html new file mode 100644 index 0000000000..f8b1cc6d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility should not be affected by the visibility of a previous anchor." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-change-anchor-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + #anchor1 { + height: 200px; + anchor-name: --a1; + } + + #anchor2 { + anchor-name: --a2; + } + + #target { + position-anchor: --a2; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor1" class="anchor">anchor1</div> + <div id="anchor2" class="anchor">anchor2</div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor2, + // which is visible. + waitForAtLeastOneFrame().then(() => { + // Change #target to be anchored to #anchor1. + target.style.positionAnchor = '--a1'; + // #target should be still be visible because #anchor1 is also visible. + waitForAtLeastOneFrame().then(() => { + // Scroll #anchor2 out of view, with #anchor1 still in view. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should still be visible because it is anchored to #anchor1, + // which is still visible. + takeScreenshot(); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html new file mode 100644 index 0000000000..c4af73bf65 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #anchor { + width: 100px; + height: 100px; + background: orange; + } + #target { + width: 100px; + height: 100px; + background: green; + } +</style> +<div id="anchor">anchor</div> +<div id="target">target</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html new file mode 100644 index 0000000000..22a30658c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should show an element after an anchor changes from visibility: hidden to visibility: visible." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-change-css-visibility-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #container { + visibility: hidden; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="container"> + <div id="anchor">anchor</div> +</div> +<div id="target">target</div> + +<script> + // #target should be initially hidden because it is anchored to #anchor, + // which is hidden with "visibility: hidden". + + waitForAtLeastOneFrame().then(() => { + // Change #container to "visibility: visible". #target should become + // visible again, because #anchor is no longer hidden. + container.style.visibility = 'visible'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html new file mode 100644 index 0000000000..3ac85888e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<!-- This test passes if both the anchor and anchored elements are hidden. --> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html new file mode 100644 index 0000000000..31be797798 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element with an anchor that has visibility: hidden." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-css-visibility-ref.html"> +<style> + #container { + visibility: hidden; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="container"> + <div id="anchor">anchor</div> +</div> +<div id="target">target</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container-ref.html new file mode 100644 index 0000000000..3b6532e27b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #target { + width: 100px; + height: 100px; + background: green; + } +</style> +<div id="target">target</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html new file mode 100644 index 0000000000..7b84976fd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="position-visibility: anchors-visible should consider the visibility of the anchor relative the containing scroller, ignoring visibility in other scrollers." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-non-intervening-container-ref.html"> +<style> + #non-intervening-scroll-container { + overflow: hidden; + width: 200px; + height: 200px; + position: relative; + } + + #position-container { + position: relative; + } + + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: right; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="non-intervening-scroll-container"> + <div id="position-container"> + <div id="scroll-container"> + <!-- The anchor is not visible to the screen, but it is visible in the --> + <!-- containing block of anchor1 and target1, so the target should not --> + <!-- be hidden due to position-visibility: anchors-visible. --> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> + </div> + </div> +</div> + +<script> + const non_intervening_scroller = document.getElementById('non-intervening-scroll-container'); + non_intervening_scroller.scrollLeft = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed-ref.html new file mode 100644 index 0000000000..e24992fd5e --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<!-- This test passes if both the anchor and anchored elements are hidden. --> +<div style="height: 200vh;"></div> + +<script> + window.scrollTo(0, 100); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html new file mode 100644 index 0000000000..25665ae466 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="position-visibility: anchors-visible should work with a fixed-position anchored element." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-position-fixed-ref.html"> +<style> + #anchor { + anchor-name: --a1; + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: orange; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: fixed; + top: 0; + left: 0; + } + + #spacer { + height: 200vh; + } +</style> + +<!-- Test passes if #target is not visible, due to #anchor being off-screen. --> +<div id="anchor">anchor</div> +<div id="target">target</div> +<div id="spacer"></div> + +<script> + window.scrollTo(0, 100); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-ref.html new file mode 100644 index 0000000000..1779817380 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #spacer { + height: 200px; + } +</style> + +<div id="scroll-container"> + <div id="spacer"></div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html new file mode 100644 index 0000000000..7c0d5dc6aa --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element and stacked children with an out-of-view anchor." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-ref.html"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } + #stacking-child { + /* stacking context */ + z-index: 1; + width: 100px; + height: 100px; + background: maroon; + position: absolute; + top: 25px; + left: 25px; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target + <div id="stacking-child"></div> + </div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should not be visible because #anchor is scrolled out of view. +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html new file mode 100644 index 0000000000..82eed0beb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element with an out-of-view anchor and a relpos scroller." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-ref.html"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + /* Same as position-visibility-anchors-visible.html, but with relpos here */ + position: relative; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should not be visible because #anchor is scrolled out of view. +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html new file mode 100644 index 0000000000..85b8d897db --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="assert" content="Position-visibility: anchors-visible should hide an element with an out-of-view anchor." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-anchors-visible-ref.html"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom right; + width: 100px; + height: 100px; + background: red; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + // #target should not be visible because #anchor is scrolled out of view. +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html new file mode 100644 index 0000000000..d6e64d0d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } +</style> + +<div id="scroll-container"> + <div class="anchor">anchor1</div> + <div style="height: 100px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html new file mode 100644 index 0000000000..b62a6d1078 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<style> + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 150px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + width: 100px; + height: 100px; + } +</style> + +<div id="scroll-container"> + <div class="anchor">anchor1</div> + <div class="anchor" style="position: relative; top: 100px">anchor2</div> + <div id="target1" class="target" style="background: green">target1</div> + <div style="height: 200px"></div> +</div> +<script> +document.getElementById('scroll-container').scrollTop = 50; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html new file mode 100644 index 0000000000..4751faeb0d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-scroll-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 150px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + width: 100px; + height: 100px; + } +</style> + +<div id="scroll-container"> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div class="anchor" style="anchor-name: --a2; position: relative; top: 100px">anchor2</div> + <div id="target1" class="target" style="position-anchor: --a1; top: anchor(bottom); background: green">target1</div> + <div id="target2" class="target" style="position-anchor: --a2; left: anchor(left); bottom: anchor(top); background: red">target2</div> + <div style="height: 300px"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.getElementById('scroll-container').scrollTop = 50; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html new file mode 100644 index 0000000000..f748fda33e --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } + + #child { + position: absolute; + /* stacking context */ + z-index: 1; + top: -100px; + left: 100px; + width: 100px; + height: 100px; + background: maroon; + } + + #grandchild { + position: absolute; + z-index: 1; + top: 0px; + left: 100px; + width: 50px; + height: 50px; + background: pink; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target1" class="target" style="position-anchor: --a1;">target1 + <div id="child">Child + <div id="grandchild">Grand child</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html new file mode 100644 index 0000000000..39fb55b120 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + inset-area: block-end; + width: 100px; + height: 100px; + background: red; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target1" class="target" style="position-anchor: --a1;">target1</div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html new file mode 100644 index 0000000000..135763bf6b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #target { + width: 100px; + height: 100px; + margin-top: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div id="target">target</div> +</div> + +<script> + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html new file mode 100644 index 0000000000..c6649e5f93 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<meta name="assert" content="Removing position-visibility: anchors-visible from an invisible anchored element should cause it to become visible." /> +<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-remove-anchors-visible-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #scroll-container { + overflow: hidden scroll; + width: 300px; + height: 100px; + } + + #anchor { + anchor-name: --a1; + width: 100px; + height: 100px; + background: orange; + } + + #spacer { + height: 100px; + } + + #target { + position-anchor: --a1; + position-visibility: anchors-visible; + inset-area: bottom; + width: 100px; + height: 100px; + background: green; + position: absolute; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <div id="anchor">anchor</div> + <div id="spacer"></div> + <div id="target">target</div> +</div> + +<script> + // #target should be initially visible because it is anchored to #anchor, + // which is visible. + + // Scroll #anchor so that it is no longer visible. + const scroller = document.getElementById('scroll-container'); + scroller.scrollTop = 100; + + waitForAtLeastOneFrame().then(() => { + // Remove position-visibility: anchors-visible. #target should become + // visible again. + target.style.positionVisibility = 'initial'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html new file mode 100644 index 0000000000..b41d2110e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + #scroll-container { + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + width: 100px; + height: 100px; + background: green; + } +</style> + +<div id="scroll-container"> + <div class="anchor">anchor1</div> + <div class="target">target1</div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html new file mode 100644 index 0000000000..a043917da6 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta charset="utf-8"> +<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758"> +<link rel="match" href="position-visibility-no-overflow-ref.html"> +<style> + #scroll-container { + position: relative; + overflow: hidden scroll; + width: 400px; + height: 100px; + } + + .anchor { + width: 100px; + height: 100px; + background: orange; + display: inline-block; + } + + .target { + position: absolute; + position-visibility: no-overflow; + inset-area: block-end; + width: 100px; + height: 100px; + background: green; + top: 0; + left: 0; + } +</style> + +<div id="scroll-container"> + <!-- #target1 should not be visible because it overflows the containing block. --> + <div class="anchor" style="anchor-name: --a1;">anchor1</div> + <div id="target" class="target" style="position-anchor: --a1;">target1</div> +</div> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.positionVisibility = 'initial'; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html b/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html index 878f46375b..954e5642dd 100644 --- a/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html +++ b/testing/web-platform/tests/css/css-anchor-position/property-interpolations.html @@ -19,12 +19,12 @@ }); test_no_interpolation({ - property: 'anchor-default', + property: 'position-anchor', from: 'implicit', to: '--foo', }); test_no_interpolation({ - property: 'anchor-default', + property: 'position-anchor', from: '--foo', to: '--bar', }); @@ -76,15 +76,4 @@ from: 'most-width', to: 'most-height', }); - - test_no_interpolation({ - property: 'position-fallback-bounds', - from: 'normal', - to: '--foo', - }); - test_no_interpolation({ - property: 'position-fallback-bounds', - from: '--foo', - to: '--bar', - }); </script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html new file mode 100644 index 0000000000..39595276d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html @@ -0,0 +1,195 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, justify/align-self</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 100px; + height: 50px; + background-color: coral; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + } + #ref { + background-color: seagreen; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Verify that a given try-tactic + untransformed declaration equals +// a reference element using `transformed` directly. +function test_justify_flip(try_tactic, untransformed, transformed, direction, writing_mode) { + if (direction==undefined) { + direction = 'ltr'; + } + if (writing_mode==undefined) { + writing_mode = 'horizontal-tb'; + } + test((t) => { + t.add_cleanup(() => { + document.documentElement.style = ''; + style.textContent = ''; + }); + document.documentElement.style.direction = direction; + document.documentElement.style.writingMode = writing_mode; + style.textContent = ` + @position-try --pf { + inset: 0; + ${untransformed} + } + #target { + position-try-options: --pf ${try_tactic}; + } + @position-try --ref { + inset: 0; + ${transformed} + } + #ref { + position-try-options: --ref; + } + `; + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${try_tactic}, ${untransformed}, ${transformed}, ${direction}, ${writing_mode}`); +} + +test_justify_flip( + '', + 'justify-self:start;align-self:start', + 'justify-self:start;align-self:start'); + +test_justify_flip( + 'flip-inline', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:start'); + +test_justify_flip( + 'flip-block', + 'justify-self:start;align-self:start', + 'justify-self:start;align-self:end'); + +test_justify_flip( + 'flip-block flip-inline', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:end'); + +test_justify_flip( + 'flip-start', + 'justify-self:start;align-self:end', + 'justify-self:end;align-self:start'); + +test_justify_flip( + 'flip-block flip-start', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:start'); + +test_justify_flip( + 'flip-inline flip-start', + 'justify-self:start;align-self:start', + 'justify-self:start;align-self:end'); + +test_justify_flip( + 'flip-block flip-inline flip-start', + 'justify-self:start;align-self:start', + 'justify-self:end;align-self:end'); + +// left/right are special cases, because they're supported by +// justify-self, but not align-self: + +test_justify_flip( + 'flip-inline', + 'justify-self:left;align-self:start', + 'justify-self:right;align-self:start'); + +test_justify_flip( + 'flip-start', + 'justify-self:left;align-self:end', + 'justify-self:end;align-self:self-start'); + +test_justify_flip( + 'flip-start', + 'justify-self:right;align-self:start', + 'justify-self:start;align-self:self-end'); + + +// That that all relevant computed values can be transformed: + +function test_computed_value(try_tactic, property, value, expected) { + test((t) => { + t.add_cleanup(() => { + style.textContent = ''; + }); + style.textContent = ` + @position-try --pf { + inset: 0; + ${property}:${value}; + } + #target { + position-try-options: --pf ${try_tactic}; + } + `; + assert_equals(getComputedStyle(target).getPropertyValue(property), expected); + }, `${try_tactic}, ${property}:${value}`); +} + +// No flip: +for (let property of ['justify-self', 'align-self']) { + test_computed_value('', property, 'start', 'start'); + test_computed_value('', property, 'end', 'end'); + test_computed_value('', property, 'self-start', 'self-start'); + test_computed_value('', property, 'self-end', 'self-end'); + test_computed_value('', property, 'flex-start', 'flex-start'); + test_computed_value('', property, 'flex-end', 'flex-end'); +} + +test_computed_value('flip-inline', 'justify-self', 'start', 'end'); +test_computed_value('flip-inline', 'justify-self', 'end', 'start'); +test_computed_value('flip-inline', 'justify-self', 'self-start', 'self-end'); +test_computed_value('flip-inline', 'justify-self', 'self-end', 'self-start'); +test_computed_value('flip-inline', 'justify-self', 'flex-start', 'flex-end'); +test_computed_value('flip-inline', 'justify-self', 'flex-end', 'flex-start'); +test_computed_value('flip-inline', 'justify-self', 'left', 'right'); +test_computed_value('flip-inline', 'justify-self', 'right', 'left'); + +test_computed_value('flip-block', 'align-self', 'start', 'end'); +test_computed_value('flip-block', 'align-self', 'end', 'start'); +test_computed_value('flip-block', 'align-self', 'self-start', 'self-end'); +test_computed_value('flip-block', 'align-self', 'self-end', 'self-start'); +test_computed_value('flip-block', 'align-self', 'flex-start', 'flex-end'); +test_computed_value('flip-block', 'align-self', 'flex-end', 'flex-start'); + +test_justify_flip( + 'flip-start', + 'justify-self:left;align-self:end', + 'justify-self:end;align-self:self-start', + 'ltr', + 'vertical-rl'); + +test_justify_flip( + 'flip-start', + 'justify-self:left;align-self:start', + 'justify-self:start;align-self:self-end', + 'rtl'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-anchor.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-anchor.html new file mode 100644 index 0000000000..8dc45dc6e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-anchor.html @@ -0,0 +1,260 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, anchor()</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + :root { + --anchor-left:anchor(left); + } + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 60px; + height: 70px; + background-color: coral; + anchor-name: --a; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + position-anchor: --a; + } + #ref { + background-color: seagreen; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Verify that a given try-tactic + untransformed declaration equals +// a reference element using `transformed` directly. +function test_anchor_flip(try_tactic, untransformed, transformed) { + test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + ${untransformed} + } + #target { + position-try-options: --pf ${try_tactic}; + } + @position-try --ref { + inset: auto; + ${transformed} + } + #ref { + position-try-options: --ref; + } + `; + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${try_tactic}, ${untransformed}, ${transformed}`); +} + +// These are the possible transformations between +// anchor(left/right/top/bottom): +// +// ┌───┬────┬────┬────┬────┐ +// │ - │ L │ R │ T │ B │ +// │ L │ - │ LR │ LT │ LB │ +// │ R │ RL │ - │ RT │ RB │ +// │ T │ TL │ TR │ - │ TB │ +// │ B │ BL │ BR │ BT │ - │ +// └───┴────┴────┴────┴────┘ + +// No flip, no transformation. +test_anchor_flip('', 'right:anchor(left)', 'right:anchor(left)'); + +// flip-block does not affect left-right. +test_anchor_flip('flip-block', 'right:anchor(left)', 'right:anchor(left)'); +// flip-inline does not affect left-right. +test_anchor_flip('flip-inline', 'bottom:anchor(top)', 'bottom:anchor(top)'); + +// Note that the letters represent the arguments to the anchor() functions, +// not the properties. For example, LR: anchor(left) => anchor(right). + +// LR +test_anchor_flip('flip-inline', 'right:anchor(left)', 'left:anchor(right)'); +// RL +test_anchor_flip('flip-inline', 'left:anchor(right)', 'right:anchor(left)'); + +// LT +test_anchor_flip('flip-start', 'right:anchor(left)', 'bottom:anchor(top)'); +// TL +test_anchor_flip('flip-start', 'bottom:anchor(top)', 'right:anchor(left)'); + +// LB +test_anchor_flip('flip-inline flip-start', 'right:anchor(left)', 'top:anchor(bottom)'); +// BL +test_anchor_flip('flip-start flip-inline', 'top:anchor(bottom)', 'right:anchor(left)'); + +// RT +test_anchor_flip('flip-start flip-block', 'left:anchor(right)', 'bottom:anchor(top)'); +// TR +test_anchor_flip('flip-block flip-start', 'bottom:anchor(top)', 'left:anchor(right)'); + +// RB +test_anchor_flip('flip-start', 'left:anchor(right)', 'top:anchor(bottom)'); +// BR +test_anchor_flip('flip-start', 'top:anchor(bottom)', 'left:anchor(right)'); + +// TB +test_anchor_flip('flip-block', 'bottom:anchor(top)', 'top:anchor(bottom)'); +// BT +test_anchor_flip('flip-block', 'top:anchor(bottom)', 'bottom:anchor(top)'); + +// Logical versions. +// +// These tests duplicate the above, but replace the input logical anchor() +// functions. + +// LR +test_anchor_flip('flip-inline', 'right:anchor(start)', 'left:anchor(right)'); +// RL +test_anchor_flip('flip-inline', 'left:anchor(end)', 'right:anchor(left)'); + +// LT +test_anchor_flip('flip-start', 'right:anchor(start)', 'bottom:anchor(top)'); +// TL +test_anchor_flip('flip-start', 'bottom:anchor(start)', 'right:anchor(left)'); + +// LB +test_anchor_flip('flip-inline flip-start', 'right:anchor(start)', 'top:anchor(bottom)'); +// BL +test_anchor_flip('flip-start flip-inline', 'top:anchor(end)', 'right:anchor(left)'); + +// RT +test_anchor_flip('flip-start flip-block', 'left:anchor(end)', 'bottom:anchor(top)'); +// TR +test_anchor_flip('flip-block flip-start', 'bottom:anchor(start)', 'left:anchor(right)'); + +// RB +test_anchor_flip('flip-start', 'left:anchor(end)', 'top:anchor(bottom)'); +// BR +test_anchor_flip('flip-start', 'top:anchor(end)', 'left:anchor(right)'); + +// TB +test_anchor_flip('flip-block', 'bottom:anchor(start)', 'top:anchor(bottom)'); +// BT +test_anchor_flip('flip-block', 'top:anchor(end)', 'bottom:anchor(top)'); + +// The same again, except with self-start/self-end. + +// LR +test_anchor_flip('flip-inline', 'right:anchor(self-start)', 'left:anchor(right)'); +// RL +test_anchor_flip('flip-inline', 'left:anchor(self-end)', 'right:anchor(left)'); + +// LT +test_anchor_flip('flip-start', 'right:anchor(self-start)', 'bottom:anchor(top)'); +// TL +test_anchor_flip('flip-start', 'bottom:anchor(self-start)', 'right:anchor(left)'); + +// LB +test_anchor_flip('flip-inline flip-start', 'right:anchor(self-start)', 'top:anchor(bottom)'); +// BL +test_anchor_flip('flip-start flip-inline', 'top:anchor(self-end)', 'right:anchor(left)'); + +// RT +test_anchor_flip('flip-start flip-block', 'left:anchor(self-end)', 'bottom:anchor(top)'); +// TR +test_anchor_flip('flip-block flip-start', 'bottom:anchor(self-start)', 'left:anchor(right)'); + +// RB +test_anchor_flip('flip-start', 'left:anchor(self-end)', 'top:anchor(bottom)'); +// BR +test_anchor_flip('flip-start', 'top:anchor(self-end)', 'left:anchor(right)'); + +// TB +test_anchor_flip('flip-block', 'bottom:anchor(self-start)', 'top:anchor(bottom)'); +// BT +test_anchor_flip('flip-block', 'top:anchor(self-end)', 'bottom:anchor(top)'); + + +function test_anchor_size_flip(try_tactic, flip_expected) { + test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + width: calc(anchor-size(width) + 20px); + height: anchor-size(height); + } + #target { + position-try-options: --pf ${try_tactic}; + } + `; + + let expected_width = anchor.offsetWidth + (flip_expected ? 0 : 20); + let expected_height = anchor.offsetHeight + (flip_expected ? 20 : 0); + + assert_equals(target.offsetWidth, expected_width, 'offsetWidth'); + assert_equals(target.offsetHeight, expected_height, 'offsetHeight'); + }, try_tactic); +} + +// No flip, no transformation. +test_anchor_size_flip('', /* expect_flip */ false); + +// Note: only the cross-axis flips cause width/height to change. +// LR, TB (and their reverse versions) are in-axis, other combinations are +// cross-axis. + +// In-axis: + +// LR, RL +test_anchor_size_flip('flip-inline', /* expect_flip */ false); +// TB, BT +test_anchor_size_flip('flip-block', /* expect_flip */ false); + +// Cross-axis: + +// LT, TL, RB, BR +test_anchor_size_flip('flip-start', /* expect_flip */ true); + +// LB, BL +test_anchor_size_flip('flip-inline flip-start', /* expect_flip */ true); + +// RT, TR +test_anchor_size_flip('flip-start flip-block', /* expect_flip */ true); + + +test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + right: var(--anchor-left); + } + #target { + position-try-options: --pf; + } + `; + // Initially positioned to the left of the anchor. + assert_equals(target.offsetLeft, 110, 'offsetLeft'); + + // Now positioned to the right of the anchor. + style.textContent += ` + #target { + position-try-options: --pf flip-inline; + } + `; + assert_equals(target.offsetLeft, 210, 'offsetLeft'); +}, 'Can transform a value post-var-substitution'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-inset-area.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-inset-area.html new file mode 100644 index 0000000000..32af18a149 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-inset-area.html @@ -0,0 +1,251 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, inset-area</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 100px; + height: 50px; + background-color: coral; + } + #target { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + +function test_computed_value(try_tactic, property, value, expected, direction, writing_mode) { + if (direction==undefined) { + direction = 'ltr'; + } + if (writing_mode==undefined) { + writing_mode = 'horizontal-tb'; + } + test((t) => { + t.add_cleanup(() => { + style.textContent = ''; + document.documentElement.style = ''; + }); + document.documentElement.style.direction = direction; + document.documentElement.style.writingMode = writing_mode; + style.textContent = ` + @position-try --pf { + inset: initial; + ${property}:${value}; + } + #target { + position-try-options: --pf ${try_tactic}; + } + `; + assert_equals(getComputedStyle(target).getPropertyValue(property), expected); + }, `${try_tactic}, ${property}:${value}, ${direction} ${writing_mode}`); +} + + +// Physical: + +test_computed_value('flip-inline', 'inset-area', 'left top', 'right top'); +test_computed_value('flip-inline', 'inset-area', 'left bottom', 'right bottom'); +test_computed_value('flip-inline', 'inset-area', 'right bottom', 'left bottom'); +test_computed_value('flip-inline', 'inset-area', 'right top', 'left top'); + +test_computed_value('flip-block', 'inset-area', 'left top', 'left bottom'); +test_computed_value('flip-block', 'inset-area', 'left bottom', 'left top'); +test_computed_value('flip-block', 'inset-area', 'right bottom', 'right top'); +test_computed_value('flip-block', 'inset-area', 'right top', 'right bottom'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'left top', 'right bottom'); +test_computed_value('flip-block flip-inline', 'inset-area', 'left bottom', 'right top'); +test_computed_value('flip-block flip-inline', 'inset-area', 'right bottom', 'left top'); +test_computed_value('flip-block flip-inline', 'inset-area', 'right top', 'left bottom'); + +test_computed_value('flip-start', 'inset-area', 'left top', 'left top'); +test_computed_value('flip-start', 'inset-area', 'left bottom', 'right top'); +test_computed_value('flip-start', 'inset-area', 'right bottom', 'right bottom'); +test_computed_value('flip-start', 'inset-area', 'right top', 'left bottom'); + +test_computed_value('flip-block flip-start', 'inset-area', 'left top', 'right top'); +test_computed_value('flip-block flip-start', 'inset-area', 'left bottom', 'left top'); +test_computed_value('flip-block flip-start', 'inset-area', 'right bottom', 'left bottom'); +test_computed_value('flip-block flip-start', 'inset-area', 'right top', 'right bottom'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'left top', 'left bottom'); +test_computed_value('flip-inline flip-start', 'inset-area', 'left bottom', 'right bottom'); +test_computed_value('flip-inline flip-start', 'inset-area', 'right bottom', 'right top'); +test_computed_value('flip-inline flip-start', 'inset-area', 'right top', 'left top'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'left top', 'right bottom'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'left bottom', 'left bottom'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'right bottom', 'left top'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'right top', 'right top'); + +// Variations: +test_computed_value('flip-block flip-inline', 'inset-area', 'span-left span-top', 'span-right span-bottom'); + +// XY: + +test_computed_value('flip-inline', 'inset-area', 'x-start y-start', 'x-end y-start'); +test_computed_value('flip-inline', 'inset-area', 'x-start y-end', 'x-end y-end'); +test_computed_value('flip-inline', 'inset-area', 'x-end y-end', 'x-start y-end'); +test_computed_value('flip-inline', 'inset-area', 'x-end y-start', 'x-start y-start'); + +test_computed_value('flip-block', 'inset-area', 'x-start y-start', 'x-start y-end'); +test_computed_value('flip-block', 'inset-area', 'x-start y-end', 'x-start y-start'); +test_computed_value('flip-block', 'inset-area', 'x-end y-end', 'x-end y-start'); +test_computed_value('flip-block', 'inset-area', 'x-end y-start', 'x-end y-end'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'x-start y-start', 'x-end y-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-start y-end', 'x-end y-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-end y-end', 'x-start y-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-end y-start', 'x-start y-end'); + +test_computed_value('flip-start', 'inset-area', 'x-start y-start', 'x-start y-start'); +test_computed_value('flip-start', 'inset-area', 'x-start y-end', 'x-end y-start'); +test_computed_value('flip-start', 'inset-area', 'x-end y-end', 'x-end y-end'); +test_computed_value('flip-start', 'inset-area', 'x-end y-start', 'x-start y-end'); + +test_computed_value('flip-block flip-start', 'inset-area', 'x-start y-start', 'x-end y-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'x-start y-end', 'x-start y-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'x-end y-end', 'x-start y-end'); +test_computed_value('flip-block flip-start', 'inset-area', 'x-end y-start', 'x-end y-end'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'x-start y-start', 'x-start y-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'x-start y-end', 'x-end y-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'x-end y-end', 'x-end y-start'); +test_computed_value('flip-inline flip-start', 'inset-area', 'x-end y-start', 'x-start y-start'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-start y-start', 'x-end y-end'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-start y-end', 'x-start y-end'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-end y-end', 'x-start y-start'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-end y-start', 'x-end y-start'); + +// Variations: +test_computed_value('flip-block flip-inline', 'inset-area', 'span-x-start span-y-start', 'span-x-end span-y-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'x-self-start y-self-start', 'x-self-end y-self-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'span-x-self-start span-y-self-start', 'span-x-self-end span-y-self-end'); + +// Logical: + +test_computed_value('flip-inline', 'inset-area', 'block-start inline-start', 'block-start inline-end'); +test_computed_value('flip-inline', 'inset-area', 'block-end inline-start', 'block-end inline-end'); +test_computed_value('flip-inline', 'inset-area', 'block-end inline-end', 'block-end inline-start'); +test_computed_value('flip-inline', 'inset-area', 'block-start inline-end', 'block-start inline-start'); + +test_computed_value('flip-block', 'inset-area', 'block-start inline-start', 'block-end inline-start'); +test_computed_value('flip-block', 'inset-area', 'block-end inline-start', 'block-start inline-start'); +test_computed_value('flip-block', 'inset-area', 'block-end inline-end', 'block-start inline-end'); +test_computed_value('flip-block', 'inset-area', 'block-start inline-end', 'block-end inline-end'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'block-start inline-start', 'block-end inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'block-end inline-start', 'block-start inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'block-end inline-end', 'block-start inline-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'block-start inline-end', 'block-end inline-start'); + +test_computed_value('flip-start', 'inset-area', 'block-start inline-start', 'block-start inline-start'); +test_computed_value('flip-start', 'inset-area', 'block-end inline-start', 'block-start inline-end'); +test_computed_value('flip-start', 'inset-area', 'block-end inline-end', 'block-end inline-end'); +test_computed_value('flip-start', 'inset-area', 'block-start inline-end', 'block-end inline-start'); + +test_computed_value('flip-block flip-start', 'inset-area', 'block-start inline-start', 'block-start inline-end'); +test_computed_value('flip-block flip-start', 'inset-area', 'block-end inline-start', 'block-start inline-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'block-end inline-end', 'block-end inline-start'); +test_computed_value('flip-block flip-start', 'inset-area', 'block-start inline-end', 'block-end inline-end'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'block-start inline-start', 'block-end inline-start'); +test_computed_value('flip-inline flip-start', 'inset-area', 'block-end inline-start', 'block-end inline-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'block-end inline-end', 'block-start inline-end'); +test_computed_value('flip-inline flip-start', 'inset-area', 'block-start inline-end', 'block-start inline-start'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-start inline-start', 'block-end inline-end'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-end inline-start', 'block-end inline-start'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-end inline-end', 'block-start inline-start'); +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-start inline-end', 'block-start inline-end'); + +// Variations: +test_computed_value('flip-block flip-inline', 'inset-area', 'span-block-start span-inline-start', 'span-block-end span-inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'self-block-start self-inline-start', 'self-block-end self-inline-end'); +test_computed_value('flip-block flip-inline', 'inset-area', 'span-self-block-start span-self-inline-start', 'span-self-block-end span-self-inline-end'); + +// start/end + +test_computed_value('', 'inset-area', 'start end', 'start end'); + +test_computed_value('flip-block', 'inset-area', 'start end', 'end'); + +test_computed_value('flip-inline', 'inset-area', 'start end', 'start'); + +test_computed_value('flip-block flip-inline', 'inset-area', 'start end', 'end start'); + +test_computed_value('flip-start', 'inset-area', 'start', 'start'); +test_computed_value('flip-start', 'inset-area', 'end', 'end'); +test_computed_value('flip-start', 'inset-area', 'start end', 'end start'); + +test_computed_value('flip-block flip-start', 'inset-area', 'start end', 'end'); + +test_computed_value('flip-inline flip-start', 'inset-area', 'start end', 'start'); + +test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'start end', 'start end'); + +// Variations: + +test_computed_value('flip-block flip-inline', 'inset-area', 'span-start span-end', 'span-end span-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'self-start self-end', 'self-end self-start'); +test_computed_value('flip-block flip-inline', 'inset-area', 'span-self-start span-self-end', 'span-self-end span-self-start'); + +// center +test_computed_value('flip-block', 'inset-area', 'left center', 'left center'); +test_computed_value('flip-block', 'inset-area', 'center top', 'center bottom'); +test_computed_value('flip-block', 'inset-area', 'center', 'center'); +test_computed_value('flip-block', 'inset-area', 'start center', 'end center'); +test_computed_value('flip-block', 'inset-area', 'center start', 'center start'); +test_computed_value('flip-inline', 'inset-area', 'center start', 'center end'); +test_computed_value('flip-start', 'inset-area', 'center start', 'start center'); + +// span-all +test_computed_value('flip-block', 'inset-area', 'left span-all', 'left'); +test_computed_value('flip-block', 'inset-area', 'span-all top', 'bottom'); +test_computed_value('flip-block', 'inset-area', 'span-all', 'span-all'); +test_computed_value('flip-block', 'inset-area', 'start span-all', 'end span-all'); +test_computed_value('flip-block', 'inset-area', 'span-all start', 'span-all start'); +test_computed_value('flip-inline', 'inset-area', 'span-all start', 'span-all end'); +test_computed_value('flip-start', 'inset-area', 'span-all start', 'start span-all'); + +// Span mix: +test_computed_value('flip-block', 'inset-area', 'left span-top', 'left span-bottom'); +test_computed_value('flip-inline', 'inset-area', 'left span-top', 'right span-top'); +test_computed_value('flip-start', 'inset-area', 'span-block-start inline-end', 'block-end span-inline-start'); + +// Writing modes: +test_computed_value('flip-block', 'inset-area', 'left top', 'right top', 'ltr', 'vertical-rl'); + +test_computed_value('', 'inset-area', 'x-start y-start', 'x-start y-start', 'rtl'); +test_computed_value('flip-block', 'inset-area', 'x-start y-start', 'x-start y-end', 'rtl'); +test_computed_value('flip-inline', 'inset-area', 'x-start y-start', 'x-end y-start', 'rtl'); +test_computed_value('flip-block', 'inset-area', 'x-end y-start', 'x-start y-start', 'ltr', 'vertical-rl'); +test_computed_value('flip-inline', 'inset-area', 'x-end y-start', 'x-end y-end', 'ltr', 'vertical-rl'); + +test_computed_value('flip-inline', 'inset-area', 'start end', 'start', 'rtl'); +test_computed_value('flip-inline', 'inset-area', 'start end', 'start', 'ltr', 'vertical-rl'); +test_computed_value('flip-block', 'inset-area', 'start end', 'end', 'rtl'); +test_computed_value('flip-block', 'inset-area', 'start end', 'end', 'ltr', 'vertical-rl'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-margin.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-margin.html new file mode 100644 index 0000000000..ab627315b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-margin.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic (margin)</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @position-try --pf { + left:10px; + top:20px; + margin: 5px 15px 25px 35px; + } + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #target { + position: absolute; + left: 99999px; /* force fallback */ + width: 30px; + height: 40px; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + function test_try_tactic(try_tactic, expected_offsets) { + target.style.positionTryOptions = `--pf ${try_tactic}`; + test(() => { + assert_equals(target.offsetLeft, expected_offsets.left, 'offsetLeft'); + assert_equals(target.offsetTop, expected_offsets.top, 'offsetTop'); + assert_equals(target.offsetWidth, expected_offsets.width, 'offsetWidth'); + assert_equals(target.offsetHeight, expected_offsets.height, 'offsetHeight'); + }, target.style.positionTryOptions); + } + + let w = 30; + let h = 40; + let cbw = 400; + let cbh = 400; + + test_try_tactic('', {left:10+35, top:20+5, width:w, height:h}); + test_try_tactic('flip-block', {left:10+35, top:cbh-h-20-5, width:w, height:h}); + test_try_tactic('flip-inline', {left:cbw-w-10-35, top:20+5, width:w, height:h}); + test_try_tactic('flip-block flip-inline', {left:cbw-w-10-35, top:cbh-h-20-5, width:w, height:h}); + test_try_tactic('flip-start', {left:20+5, top:10+35, width:h, height:w}); + test_try_tactic('flip-block flip-start', {left:cbh-h-20-5, top:10+35, width:h, height:w}); + test_try_tactic('flip-inline flip-start', {left:20+5, top:cbw-w-10-35, width:h, height:w}); + test_try_tactic('flip-block flip-inline flip-start', {left:cbh-h-20-5, top:cbw-w-10-35, width:h, height:w}); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html new file mode 100644 index 0000000000..20cf0f87e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic, percentage</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #anchor { + position: absolute; + left: 150px; + top: 150px; + width: 100px; + height: 50px; + background-color: coral; + anchor-name: --a; + } + #target, #ref { + position: absolute; + left: 450px; /* force fallback */ + width: 40px; + height: 40px; + background-color: skyblue; + position-anchor: --a; + } + #ref { + background-color: seagreen; + } +</style> +<style id=style> +</style> +<div id=cb> + <div id=anchor></div> + <div id=target></div> + <div id=ref></div> +</div> +<script> + +// Verify that a given try-tactic + untransformed declaration equals +// a reference element using `transformed` directly. +function test_anchor_flip(try_tactic, untransformed, transformed) { + test((t) => { + style.textContent = ` + @position-try --pf { + inset: auto; + ${untransformed} + } + #target { + position-try-options: --pf ${try_tactic}; + } + @position-try --ref { + inset: auto; + ${transformed} + } + #ref { + position-try-options: --ref; + } + `; + assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); + assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); + }, `${try_tactic}, ${untransformed}, ${transformed}`); +} + +test_anchor_flip('', 'left:anchor(0%)', 'left:anchor(left)'); +test_anchor_flip('', 'left:anchor(100%)', 'left:anchor(right)'); +test_anchor_flip('', 'left:anchor(50%)', 'left:anchor(center)'); +test_anchor_flip('', 'top:anchor(0%)', 'top:anchor(top)'); +test_anchor_flip('', 'top:anchor(100%)', 'top:anchor(bottom)'); +test_anchor_flip('', 'top:anchor(50%)', 'top:anchor(center)'); + +test_anchor_flip('flip-inline', 'left:anchor(10%)', 'right:anchor(90%)'); +test_anchor_flip('flip-inline', 'left:anchor(calc(10% + 20%))', 'right:anchor(70%)'); + +test_anchor_flip('flip-block', 'left:anchor(0%)', 'left:anchor(0%)'); +test_anchor_flip('flip-block', 'left:anchor(100%)', 'left:anchor(100%)'); +test_anchor_flip('flip-block', 'top:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-block', 'top:anchor(100%)', 'bottom:anchor(0%)'); + +test_anchor_flip('flip-inline', 'left:anchor(0%)', 'right:anchor(100%)'); +test_anchor_flip('flip-inline', 'left:anchor(100%)', 'right:anchor(0%)'); +test_anchor_flip('flip-inline', 'top:anchor(0%)', 'top:anchor(0%)'); +test_anchor_flip('flip-inline', 'top:anchor(100%)', 'top:anchor(100%)'); + +test_anchor_flip('flip-block flip-inline', 'left:anchor(0%)', 'right:anchor(100%)'); +test_anchor_flip('flip-block flip-inline', 'left:anchor(100%)', 'right:anchor(0%)'); +test_anchor_flip('flip-block flip-inline', 'top:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-block flip-inline', 'top:anchor(100%)', 'bottom:anchor(0%)'); + +test_anchor_flip('flip-start', 'left:anchor(0%)', 'top:anchor(0%)'); +test_anchor_flip('flip-start', 'left:anchor(100%)', 'top:anchor(100%)'); +test_anchor_flip('flip-start', 'bottom:anchor(0%)', 'right:anchor(0%)'); +test_anchor_flip('flip-start', 'bottom:anchor(100%)', 'right:anchor(100%)'); + +test_anchor_flip('flip-block flip-start', 'left:anchor(0%)', 'top:anchor(0%)'); +test_anchor_flip('flip-block flip-start', 'left:anchor(100%)', 'top:anchor(100%)'); +test_anchor_flip('flip-block flip-start', 'bottom:anchor(0%)', 'left:anchor(100%)'); +test_anchor_flip('flip-block flip-start', 'bottom:anchor(100%)', 'left:anchor(0%)'); + +test_anchor_flip('flip-inline flip-start', 'left:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-inline flip-start', 'left:anchor(100%)', 'bottom:anchor(0%)'); +test_anchor_flip('flip-inline flip-start', 'bottom:anchor(0%)', 'right:anchor(0%)'); +test_anchor_flip('flip-inline flip-start', 'bottom:anchor(100%)', 'right:anchor(100%)'); + +test_anchor_flip('flip-block flip-inline flip-start', 'left:anchor(0%)', 'bottom:anchor(100%)'); +test_anchor_flip('flip-block flip-inline flip-start', 'left:anchor(100%)', 'bottom:anchor(0%)'); +test_anchor_flip('flip-block flip-inline flip-start', 'bottom:anchor(0%)', 'left:anchor(100%)'); +test_anchor_flip('flip-block flip-inline flip-start', 'bottom:anchor(100%)', 'left:anchor(0%)'); + +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html new file mode 100644 index 0000000000..bc1c82c35d --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-wm.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: try-tactic under different writing modes</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @position-try --pf { + left:10px; + top:20px; + } + #cb { + position: absolute; + width: 400px; + height: 400px; + border: 1px solid black; + } + #target { + position: absolute; + left: 99999px; /* force fallback */ + width: 30px; + height: 40px; + background-color: skyblue; + } +</style> +<div id=cb> + <div id=target></div> +</div> +<script> + + function test_try_tactic_wm(try_tactic, writing_mode, direction, expected_offsets) { + target.style.positionTryOptions = `--pf ${try_tactic}`; + target.style.writingMode = writing_mode; + target.style.direction = direction; + test(() => { + assert_equals(target.offsetLeft, expected_offsets.left, 'offsetLeft'); + assert_equals(target.offsetTop, expected_offsets.top, 'offsetTop'); + assert_equals(target.offsetWidth, expected_offsets.width, 'offsetWidth'); + assert_equals(target.offsetHeight, expected_offsets.height, 'offsetHeight'); + }, `${try_tactic} ${writing_mode} ${direction}`); + } + + test_try_tactic_wm('', 'horizontal-tb', 'ltr', {left:10, top:20, width:30, height:40}); + + // Effectively flips left:10px to right:10px: + test_try_tactic_wm('flip-inline', 'horizontal-tb', 'ltr', {left:360, top:20, width:30, height:40}); + + // Effectively flips top:20px to bottom:20px: + test_try_tactic_wm('flip-inline', 'vertical-lr', 'ltr', {left:10, top:340, width:30, height:40}); + + // Mirror across the [left,top]=>[bottom,right] diagonal: + test_try_tactic_wm('flip-start', 'horizontal-tb', 'ltr', {left:20, top:10, width:40, height:30}); + + // Mirror across the [right,top]=>[bottom,left] diagonal: + test_try_tactic_wm('flip-start', 'horizontal-tb', 'rtl', {left:340, top:360, width:40, height:30}); + +</script> diff --git a/testing/web-platform/tests/css/css-animations/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-animations/WEB_FEATURES.yml new file mode 100644 index 0000000000..2059bd4927 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/WEB_FEATURES.yml @@ -0,0 +1,5 @@ +features: +- name: animation-composition + files: + - animation-composition.html + - animation-composition-* diff --git a/testing/web-platform/tests/css/css-animations/crashtests/cancel-update.html b/testing/web-platform/tests/css/css-animations/crashtests/cancel-update.html new file mode 100644 index 0000000000..1cb094692e --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/crashtests/cancel-update.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/564354"> +<link rel="help" href="https://issues.chromium.org/issues/40447203"> +<title>Check that cancelling one running animation and updating another doesn't +crash.</title> +<style> + @keyframes anim { + from { background-color: blue; } + to { background-color: red; } + } + + @keyframes anim2 { + from { opacity: 0; } + to { opacity: 1; } + } +</style> +<div id="target"></div> +<script> + window.onload = () => { + target.style.animation = "anim 1s, anim2 1s"; + target.offsetTop; + target.style.animation = "anim2 2s"; + target.offsetTop; + }; +</script> diff --git a/testing/web-platform/tests/css/css-animations/crashtests/pseudo-element-animation-with-marker.html b/testing/web-platform/tests/css/css-animations/crashtests/pseudo-element-animation-with-marker.html new file mode 100644 index 0000000000..ba7fc2371a --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/crashtests/pseudo-element-animation-with-marker.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/360457"> +<link rel="help" href="https://issues.chromium.org/issues/41099655"> +<title>Test if it doesn't crash when pseudo element has animation with marker</title> +<style> +@keyframes test { 0% { marker: url("crash"); } } +body:before { animation-name: test; } +</style> +<doby> +</doby> +<script> + window.onload = () => { + document.getAnimations(); + } +</script> diff --git a/testing/web-platform/tests/css/css-animations/display-none-dont-cancel-pseudo.tentative.html b/testing/web-platform/tests/css/css-animations/display-none-dont-cancel-pseudo.tentative.html new file mode 100644 index 0000000000..bed4ec2b80 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/display-none-dont-cancel-pseudo.tentative.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<link rel=author href="mailto:graouts@apple.com"> +<link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10111"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + +@keyframes display-animation { + from { margin-left: 100px; display: block } + to { margin-left: 200px; display: none } +} + +.target::after { + content: ""; + margin-left: 50px; +} + +.target.animated::after { + animation: display-animation 1ms forwards; +} + +</style> +<body> +<script> + +promise_test(async t => { + const target = createDiv(t); + target.className = "target"; + + const cs = getComputedStyle(target, "::after"); + const animations = () => target.getAnimations({ subtree: true }); + + assert_equals(animations().length, 0, "There are no running animations initially"); + assert_equals(cs.marginLeft, "50px"); + assert_equals(cs.display, "inline"); + + target.classList.add("animated"); + const runningAnimations = animations(); + assert_equals(runningAnimations.length, 1, "Setting the 'animated' class started an animation"); + assert_equals(cs.marginLeft, "100px"); + assert_equals(cs.display, "block"); + + await runningAnimations[0].finished; + assert_equals(animations().length, 1, "The animation remains after completion"); + assert_equals(cs.marginLeft, "200px"); + assert_equals(cs.display, "none"); +}, 'A CSS Animation on a pseudo-element animating to "display: none" with "fill: forwards" remains active after animation completion.'); + +</script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-animations/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-animations/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..7e3ccd1b3b --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/parsing/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: animation-composition + files: + - animation-composition-* diff --git a/testing/web-platform/tests/css/css-animations/stability/animation-event-destroy-renderer.html b/testing/web-platform/tests/css/css-animations/stability/animation-event-destroy-renderer.html new file mode 100644 index 0000000000..0a1e1d5085 --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/stability/animation-event-destroy-renderer.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> + <title>Destroy and Hide Element in Animation Iteration Event</title> + <!-- Note: this is effectively a crashtest, but as crashtests do not + support variants, authoring as a promise test --> + <meta name="variant" content="?animationstart"> + <meta name="variant" content="?animationiteration"> + <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=22635"> + <style> + .box { + height: 100px; + width: 100px; + margin: 10px; + background-color: blue; + animation-duration: 0.2s; + animation-iteration-count: 2; + } + + @keyframes move { + from { transform: translate(0px, 0px); } + to { transform: translate(100px, 0px); } + } + </style> + <div id="container"> + <div id="box1" class="box"></div> + <div id="box2" class="box"></div> + </div> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/common/gc.js"></script> + <script> + 'use strict'; + + function eventPromise(target, event, callback) { + return new Promise(resolve => { + const listener = () => { + callback(); + resolve(); + }; + target.addEventListener(event, listener, + { once: true }); + }); + } + + promise_test(async t => { + const eventType = location.search.substring(1); + var box1 = document.getElementById('box1'); + var box2 = document.getElementById('box2'); + + const promises = []; + promises.push(eventPromise(box1, eventType, () => { + box1.parentNode.removeChild(box1); + })); + box1.style.animationName = 'move'; + promises.push(eventPromise(box2, eventType, () => { + box2.style.display = 'none'; + })); + box2.style.animationName = 'move'; + await Promise.all(promises); + + // Garbage collection is best effort. + if (window.garbageCollect) { + await garbageCollect(); + } + + assert_equals(document.getAnimations().length, 0); + }, 'Triggering the cancel of an animation during event handling does not ' + + 'crash.'); + + </script> +</head> +</html> diff --git a/testing/web-platform/tests/css/css-animations/transition-ready-time-offscreen.html b/testing/web-platform/tests/css/css-animations/transition-ready-time-offscreen.html new file mode 100644 index 0000000000..cc3151b40b --- /dev/null +++ b/testing/web-platform/tests/css/css-animations/transition-ready-time-offscreen.html @@ -0,0 +1,44 @@ +<!doctype html> +<meta charset=utf-8> +<title>Transitions start at the same time regardless of on-screen status</title> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1888748"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.transition { + width: 100px; + height: 100px; + background-color: blue; + transition: translate 10000ms linear; + will-change: translate; + translate: 0; +} +.offscreen { + background-color: purple; + translate: -1000px; +} +</style> +<div class="transition"></div> +<div class="transition offscreen"></div> +<script> +'use strict'; + +promise_test(async t => { + let [a, b] = document.querySelectorAll(".transition"); + + // Ensure a paint happens to make sure a transition gets triggered (otherwise + // getAnimations() would flush sync, and maybe not trigger a transition if + // it's the first style of the elements). + await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); + + // Trigger both transitions at the same time. + a.style.translate = b.style.translate = "100px"; + + let ta = a.getAnimations()[0]; + let tb = b.getAnimations()[0]; + + await Promise.all([ta.ready, tb.ready]); + assert_equals(ta.startTime, tb.startTime, "Both transitions should've started at the same time"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-backgrounds/WEB_FEATURES.yml new file mode 100644 index 0000000000..bee11ae42c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/WEB_FEATURES.yml @@ -0,0 +1,9 @@ +features: +- name: background-clip + files: + - background-clip* + - css3-background-clip* +- name: border-image + files: + - border-image* + - css3-border-image* diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-backgrounds/animations/WEB_FEATURES.yml new file mode 100644 index 0000000000..0d5911d01d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: border-image + files: + - border-image-* diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-interpolation.html index f0b7ec083e..be8f9d3572 100644 --- a/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-interpolation.html +++ b/testing/web-platform/tests/css/css-backgrounds/animations/box-shadow-interpolation.html @@ -211,7 +211,7 @@ test_interpolation({ test_interpolation({ property: 'box-shadow', - from: '10px 10px 10px 10px color(srgb 0, 0, 0)', + from: '10px 10px 10px 10px color(srgb 0 0 0)', to: '10px 10px 10px 10px rgb(255 255 255)', }, [ {at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, @@ -224,7 +224,7 @@ test_interpolation({ test_interpolation({ property: 'box-shadow', - from: '10px 10px 10px 10px color(srgb 0, 0, 0)', + from: '10px 10px 10px 10px color(srgb 0 0 0)', to: '10px 10px 10px 10px color(srgb 1 1 1)', }, [ {at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-backgrounds/background-clip/WEB_FEATURES.yml new file mode 100644 index 0000000000..5258340cee --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/WEB_FEATURES.yml @@ -0,0 +1,10 @@ +features: +- name: background-clip + files: + - clip-border-box* + - clip-content-box* + - clip-padding-box* + - clip-rounded-corner.html +- name: background-clip-text + files: + - clip-text-* diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt b/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt deleted file mode 100644 index 52c47ebba9..0000000000 --- a/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt +++ /dev/null @@ -1,12 +0,0 @@ -background-clip/border-box.html -background-clip/border-box_with_position.html -background-clip/border-box_with_radius.html -background-clip/border-box_with_size.html -background-clip/content-box.html -background-clip/content-box_with_position.html -background-clip/content-box_with_radius.html -background-clip/content-box_with_size.html -background-clip/padding-box.html -background-clip/padding-box_with_position.html -background-clip/padding-box_with_radius.html -background-clip/padding-box_with_size.html diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt b/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt deleted file mode 100644 index a6fdedde54..0000000000 --- a/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt +++ /dev/null @@ -1,12 +0,0 @@ -background-origin/border-box.html -background-origin/border-box_with_position.html -background-origin/border-box_with_radius.html -background-origin/border-box_with_size.html -background-origin/content-box.html -background-origin/content-box_with_position.html -background-origin/content-box_with_radius.html -background-origin/content-box_with_size.html -background-origin/padding-box.html -background-origin/padding-box_with_position.html -background-origin/padding-box_with_radius.html -background-origin/padding-box_with_size.html diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-backgrounds/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..6a2438077a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/WEB_FEATURES.yml @@ -0,0 +1,7 @@ +features: +- name: background-clip + files: + - background-clip-* +- name: border-image + files: + - border-image-* diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html index da08a63885..dcffc3dde5 100644 --- a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-valid.html @@ -21,19 +21,19 @@ test_valid_value("background-image", 'none, url("http://www.example.com/")', ['n test_valid_value( "background-image", "cross-fade(50% url(http://www.example.com), 50% url(http://www.example.com))", [ - "cross-fade(50% url(http://www.example.com), 50% url(http://www.example.com))", - 'cross-fade(50% url("http://www.example.com"), 50% url("http://www.example.com"))' + "cross-fade(url(http://www.example.com) 50%, url(http://www.example.com) 50%)", + 'cross-fade(url("http://www.example.com") 50%, url("http://www.example.com") 50%)' ]); test_valid_value( "background-image", - "cross-fade(33% red, 33% white, blue)"); + "cross-fade(red 33%, white 33%, blue)"); test_valid_value( "background-image", "cross-fade(blue, linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(0, 212, 255) 100%))"); -test_valid_value("background-image", "cross-fade( 1% red, green)", "cross-fade(1% red, green)"); -test_valid_value("background-image", "cross-fade(1% red , green)", "cross-fade(1% red, green)"); -test_valid_value("background-image", "cross-fade(1% red, green )", "cross-fade(1% red, green)"); -test_valid_value("background-image", "cross-fade(1% red, cross-fade(2% red, green))"); +test_valid_value("background-image", "cross-fade( 1% red, green)", "cross-fade(red 1%, green)"); +test_valid_value("background-image", "cross-fade(1% red , green)", "cross-fade(red 1%, green)"); +test_valid_value("background-image", "cross-fade(1% red, green )", "cross-fade(red 1%, green)"); +test_valid_value("background-image", "cross-fade(red 1%, cross-fade(red 2%, green))"); </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-computed.html new file mode 100644 index 0000000000..fd096fa17c --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-block-end-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-block-end-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-block-end-radius", "10px"); +test_computed_value("border-block-end-radius", "10px 10px", "10px"); +test_computed_value("border-block-end-radius", "5px 10px"); +test_computed_value("border-block-end-radius", "10px / 5px 10px"); +test_computed_value("border-block-end-radius", "5px 10px / 10px"); +test_computed_value("border-block-end-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-invalid.html new file mode 100644 index 0000000000..a9554bd924 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-block-end-radius' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-block-end-radius' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-block-end-radius", "auto"); +test_invalid_value("border-block-end-radius", "none"); +test_invalid_value("border-block-end-radius", "1px 2px 3px"); +test_invalid_value("border-block-end-radius", "-1px"); +test_invalid_value("border-block-end-radius", "1px -2px"); +test_invalid_value("border-block-end-radius", "1em /"); +test_invalid_value("border-block-end-radius", "1px / 2px 3px 4px"); +test_invalid_value("border-block-end-radius", "1px / 2px / 3px"); +test_invalid_value("border-block-end-radius", "4"); +test_invalid_value("border-block-end-radius", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-valid.html new file mode 100644 index 0000000000..2989b349a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-end-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-block-end-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-block-end-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-block-end-radius", "1px"); +test_valid_value("border-block-end-radius", "10%"); +test_valid_value("border-block-end-radius", "1px 5%"); +test_valid_value("border-block-end-radius", "5% 1px"); +test_valid_value("border-block-end-radius", "1px / 2px"); +test_valid_value("border-block-end-radius", "1px / 1px 2%"); +test_valid_value("border-block-end-radius", "1px 2% / 3%"); +test_valid_value("border-block-end-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-computed.html new file mode 100644 index 0000000000..292ae1b6dc --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-block-start-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-block-start-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-block-start-radius", "10px"); +test_computed_value("border-block-start-radius", "10px 10px", "10px"); +test_computed_value("border-block-start-radius", "5px 10px"); +test_computed_value("border-block-start-radius", "10px / 5px 10px"); +test_computed_value("border-block-start-radius", "5px 10px / 10px"); +test_computed_value("border-block-start-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-invalid.html new file mode 100644 index 0000000000..0a9a8a9bb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-block-start-radius' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-block-start-radius' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-block-start-radius", "auto"); +test_invalid_value("border-block-start-radius", "none"); +test_invalid_value("border-block-start-radius", "1px 2px 3px"); +test_invalid_value("border-block-start-radius", "-1px"); +test_invalid_value("border-block-start-radius", "1px -2px"); +test_invalid_value("border-block-start-radius", "1em /"); +test_invalid_value("border-block-start-radius", "1px / 2px 3px 4px"); +test_invalid_value("border-block-start-radius", "1px / 2px / 3px"); +test_invalid_value("border-block-start-radius", "4"); +test_invalid_value("border-block-start-radius", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-valid.html new file mode 100644 index 0000000000..8c9f0e0bd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-block-start-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-block-start-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-block-start-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-block-start-radius", "1px"); +test_valid_value("border-block-start-radius", "10%"); +test_valid_value("border-block-start-radius", "1px 5%"); +test_valid_value("border-block-start-radius", "5% 1px"); +test_valid_value("border-block-start-radius", "1px / 2px"); +test_valid_value("border-block-start-radius", "1px / 1px 2%"); +test_valid_value("border-block-start-radius", "1px 2% / 3%"); +test_valid_value("border-block-start-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-computed.html new file mode 100644 index 0000000000..a83286a910 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-bottom-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-bottom-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-bottom-radius", "10px"); +test_computed_value("border-bottom-radius", "10px 10px", "10px"); +test_computed_value("border-bottom-radius", "5px 10px"); +test_computed_value("border-bottom-radius", "10px / 5px 10px"); +test_computed_value("border-bottom-radius", "5px 10px / 10px"); +test_computed_value("border-bottom-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-invalid.html new file mode 100644 index 0000000000..bbf7555cdc --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-bottom-radius' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-bottom-radius' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-bottom-radius", "auto"); +test_invalid_value("border-bottom-radius", "none"); +test_invalid_value("border-bottom-radius", "1px 2px 3px"); +test_invalid_value("border-bottom-radius", "-1px"); +test_invalid_value("border-bottom-radius", "1px -2px"); +test_invalid_value("border-bottom-radius", "1em /"); +test_invalid_value("border-bottom-radius", "1px / 2px 3px 4px"); +test_invalid_value("border-bottom-radius", "1px / 2px / 3px"); +test_invalid_value("border-bottom-radius", "4"); +test_invalid_value("border-bottom-radius", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-valid.html new file mode 100644 index 0000000000..fe3502beff --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-bottom-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-bottom-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-bottom-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-bottom-radius", "1px"); +test_valid_value("border-bottom-radius", "10%"); +test_valid_value("border-bottom-radius", "1px 5%"); +test_valid_value("border-bottom-radius", "5% 1px"); +test_valid_value("border-bottom-radius", "1px / 2px"); +test_valid_value("border-bottom-radius", "1px / 1px 2%"); +test_valid_value("border-bottom-radius", "1px 2% / 3%"); +test_valid_value("border-bottom-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-computed.html new file mode 100644 index 0000000000..37f20490bd --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-clip'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-clip"> +<meta name="assert" content="This test checks that the computed value of 'border-clip' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-clip", "normal"); +test_computed_value("border-clip", "10px"); +test_computed_value("border-clip", "10%"); +test_computed_value("border-clip", "0"); +test_computed_value("border-clip", "1fr"); +test_computed_value("border-clip", "10px 10%"); +test_computed_value("border-clip", "10px 1em 10% 1fr 2fr", "10px 16px 10% 1fr 2fr"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-invalid.html new file mode 100644 index 0000000000..8f6dff3f08 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-invalid.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-clip' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-clip"> +<meta name="assert" + content="This test checks that 'border-clip' supports only the keyword 'normal' or a list of <length-percentage> and <flex> values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-clip", "auto"); +test_invalid_value("border-clip", "none"); +test_invalid_value("border-clip", "padding-box"); +test_invalid_value("border-clip", "-10px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-valid.html new file mode 100644 index 0000000000..819d800b42 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-clip-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-clip' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-clip"> +<meta name="assert" + content="This test checks that 'border-clip' supports the 'normal' keyword, <length-percentage> and <flex> values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-clip", "normal"); +test_valid_value("border-clip", "10px"); +test_valid_value("border-clip", "10%"); +test_valid_value("border-clip", "0"); +test_valid_value("border-clip", "1fr"); +test_valid_value("border-clip", "10px 10%"); +test_valid_value("border-clip", "10px 1em 10% 1fr 2fr"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-computed.html new file mode 100644 index 0000000000..58f78efa6d --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-inline-end-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-inline-end-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-inline-end-radius", "10px"); +test_computed_value("border-inline-end-radius", "10px 10px", "10px"); +test_computed_value("border-inline-end-radius", "5px 10px"); +test_computed_value("border-inline-end-radius", "10px / 5px 10px"); +test_computed_value("border-inline-end-radius", "5px 10px / 10px"); +test_computed_value("border-inline-end-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-invalid.html new file mode 100644 index 0000000000..3ee5ccde33 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-radius-inline-end' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-radius-inline-end' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-radius-inline-end", "auto"); +test_invalid_value("border-radius-inline-end", "none"); +test_invalid_value("border-radius-inline-end", "1px 2px 3px"); +test_invalid_value("border-radius-inline-end", "-1px"); +test_invalid_value("border-radius-inline-end", "1px -2px"); +test_invalid_value("border-radius-inline-end", "1em /"); +test_invalid_value("border-radius-inline-end", "1px / 2px 3px 4px"); +test_invalid_value("border-radius-inline-end", "1px / 2px / 3px"); +test_invalid_value("border-radius-inline-end", "4"); +test_invalid_value("border-radius-inline-end", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-valid.html new file mode 100644 index 0000000000..72c8ad8c28 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-end-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-inline-end-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-inline-end-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-inline-end-radius", "1px"); +test_valid_value("border-inline-end-radius", "10%"); +test_valid_value("border-inline-end-radius", "1px 5%"); +test_valid_value("border-inline-end-radius", "5% 1px"); +test_valid_value("border-inline-end-radius", "1px / 2px"); +test_valid_value("border-inline-end-radius", "1px / 1px 2%"); +test_valid_value("border-inline-end-radius", "1px 2% / 3%"); +test_valid_value("border-inline-end-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-computed.html new file mode 100644 index 0000000000..f08c0b0bfd --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-inline-start-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-inline-start-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-inline-start-radius", "10px"); +test_computed_value("border-inline-start-radius", "10px 10px", "10px"); +test_computed_value("border-inline-start-radius", "5px 10px"); +test_computed_value("border-inline-start-radius", "10px / 5px 10px"); +test_computed_value("border-inline-start-radius", "5px 10px / 10px"); +test_computed_value("border-inline-start-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-invalid.html new file mode 100644 index 0000000000..eaf404cf02 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-inline-start-radius' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-inline-start-radius' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-inline-start-radius", "auto"); +test_invalid_value("border-inline-start-radius", "none"); +test_invalid_value("border-inline-start-radius", "1px 2px 3px"); +test_invalid_value("border-inline-start-radius", "-1px"); +test_invalid_value("border-inline-start-radius", "1px -2px"); +test_invalid_value("border-inline-start-radius", "1em /"); +test_invalid_value("border-inline-start-radius", "1px / 2px 3px 4px"); +test_invalid_value("border-inline-start-radius", "1px / 2px / 3px"); +test_invalid_value("border-inline-start-radius", "4"); +test_invalid_value("border-inline-start-radius", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-valid.html new file mode 100644 index 0000000000..1100664247 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-inline-start-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-inline-start-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-inline-start-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-inline-start-radius", "1px"); +test_valid_value("border-inline-start-radius", "10%"); +test_valid_value("border-inline-start-radius", "1px 5%"); +test_valid_value("border-inline-start-radius", "5% 1px"); +test_valid_value("border-inline-start-radius", "1px / 2px"); +test_valid_value("border-inline-start-radius", "1px / 1px 2%"); +test_valid_value("border-inline-start-radius", "1px 2% / 3%"); +test_valid_value("border-inline-start-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-computed.html new file mode 100644 index 0000000000..2db2025575 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-left-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-left-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-left-radius", "10px"); +test_computed_value("border-left-radius", "10px 10px", "10px"); +test_computed_value("border-left-radius", "5px 10px"); +test_computed_value("border-left-radius", "10px / 5px 10px"); +test_computed_value("border-left-radius", "5px 10px / 10px"); +test_computed_value("border-left-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-invalid.html new file mode 100644 index 0000000000..43002f7900 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-left-radius' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-left-radius' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-left-radius", "auto"); +test_invalid_value("border-left-radius", "none"); +test_invalid_value("border-left-radius", "1px 2px 3px"); +test_invalid_value("border-left-radius", "-1px"); +test_invalid_value("border-left-radius", "1px -2px"); +test_invalid_value("border-left-radius", "1em /"); +test_invalid_value("border-left-radius", "1px / 2px 3px 4px"); +test_invalid_value("border-left-radius", "1px / 2px / 3px"); +test_invalid_value("border-left-radius", "4"); +test_invalid_value("border-left-radius", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-valid.html new file mode 100644 index 0000000000..401eff5729 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-left-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-left-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-left-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-left-radius", "1px"); +test_valid_value("border-left-radius", "10%"); +test_valid_value("border-left-radius", "1px 5%"); +test_valid_value("border-left-radius", "5% 1px"); +test_valid_value("border-left-radius", "1px / 2px"); +test_valid_value("border-left-radius", "1px / 1px 2%"); +test_valid_value("border-left-radius", "1px 2% / 3%"); +test_valid_value("border-left-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-computed.html new file mode 100644 index 0000000000..b058938afc --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-right-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-right-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-right-radius", "10px"); +test_computed_value("border-right-radius", "10px 10px", "10px"); +test_computed_value("border-right-radius", "5px 10px"); +test_computed_value("border-right-radius", "10px / 5px 10px"); +test_computed_value("border-right-radius", "5px 10px / 10px"); +test_computed_value("border-right-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-invalid.html new file mode 100644 index 0000000000..f89f098376 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-right-radius' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-right-radius' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-right-radius", "auto"); +test_invalid_value("border-right-radius", "none"); +test_invalid_value("border-right-radius", "1px 2px 3px"); +test_invalid_value("border-right-radius", "-1px"); +test_invalid_value("border-right-radius", "1px -2px"); +test_invalid_value("border-right-radius", "1em /"); +test_invalid_value("border-right-radius", "1px / 2px 3px 4px"); +test_invalid_value("border-right-radius", "1px / 2px / 3px"); +test_invalid_value("border-right-radius", "4"); +test_invalid_value("border-right-radius", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-valid.html new file mode 100644 index 0000000000..dc2f598717 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-right-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-right-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-right-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-right-radius", "1px"); +test_valid_value("border-right-radius", "10%"); +test_valid_value("border-right-radius", "1px 5%"); +test_valid_value("border-right-radius", "5% 1px"); +test_valid_value("border-right-radius", "1px / 2px"); +test_valid_value("border-right-radius", "1px / 1px 2%"); +test_valid_value("border-right-radius", "1px 2% / 3%"); +test_valid_value("border-right-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-computed.html new file mode 100644 index 0000000000..e0dcc8ae4e --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'border-top-radius'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" content="This test checks that the computed value of 'border-top-radius' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("border-top-radius", "10px"); +test_computed_value("border-top-radius", "10px 10px", "10px"); +test_computed_value("border-top-radius", "5px 10px"); +test_computed_value("border-top-radius", "10px / 5px 10px"); +test_computed_value("border-top-radius", "5px 10px / 10px"); +test_computed_value("border-top-radius", "10px 10px / 5px 5px", "10px / 5px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-invalid.html new file mode 100644 index 0000000000..67b0fc8087 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-top-radius' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-top-radius' supports only the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("border-top-radius", "auto"); +test_invalid_value("border-top-radius", "none"); +test_invalid_value("border-top-radius", "1px 2px 3px"); +test_invalid_value("border-top-radius", "-1px"); +test_invalid_value("border-top-radius", "1px -2px"); +test_invalid_value("border-top-radius", "1em /"); +test_invalid_value("border-top-radius", "1px / 2px 3px 4px"); +test_invalid_value("border-top-radius", "1px / 2px / 3px"); +test_invalid_value("border-top-radius", "4"); +test_invalid_value("border-top-radius", "4 / 5"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-valid.html new file mode 100644 index 0000000000..8dbb9a4bb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-top-radius-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'border-top-radius' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-sizing"> +<meta name="assert" + content="This test checks that 'border-top-radius' supports the syntax <length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("border-top-radius", "1px"); +test_valid_value("border-top-radius", "10%"); +test_valid_value("border-top-radius", "1px 5%"); +test_valid_value("border-top-radius", "5% 1px"); +test_valid_value("border-top-radius", "1px / 2px"); +test_valid_value("border-top-radius", "1px / 1px 2%"); +test_valid_value("border-top-radius", "1px 2% / 3%"); +test_valid_value("border-top-radius", "1px 2% / 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-computed.html new file mode 100644 index 0000000000..1c61f9a8e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'box-shadow-blur'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-blur"> +<meta name="assert" content="This test checks that the computed value of 'box-shadow-blur' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("box-shadow-blur", "0", "0px"); +test_computed_value("box-shadow-blur", "1px"); +test_computed_value("box-shadow-blur", "1em", "16px"); +test_computed_value("box-shadow-blur", "1px, 2px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-invalid.html new file mode 100644 index 0000000000..20b2a50446 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-blur' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-blur"> +<meta name="assert" content="This test checks that 'box-shadow-blur' supports only properly defined length values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("box-shadow-blur", "auto"); +test_invalid_value("box-shadow-blur", "none"); +test_invalid_value("box-shadow-blur", "1"); +test_invalid_value("box-shadow-blur", "1px 2px"); +test_invalid_value("box-shadow-blur", "-1px"); +test_invalid_value("box-shadow-blur", "1%"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-valid.html new file mode 100644 index 0000000000..10d65ebbf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-blur-valid.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-blur' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-blur"> +<meta name="assert" content="This test checks that 'box-shadow-blur' supports length values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("box-shadow-blur", "0"); +test_valid_value("box-shadow-blur", "1px"); +test_valid_value("box-shadow-blur", "1em"); +test_valid_value("box-shadow-blur", "calc(1em + 2px)"); +test_valid_value("box-shadow-blur", "1px, 2px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-computed.html new file mode 100644 index 0000000000..53f0daffb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'box-shadow-color'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-color"> +<meta name="assert" content="This test checks that the computed value of 'box-shadow-color' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("box-shadow-color", "currentcolor", "rgb(0, 0, 0)"); +test_computed_value("box-shadow-color", "transparent", "rgba(0, 0, 0, 0)"); +test_computed_value("box-shadow-color", "red", "rgb(255, 0, 0)"); +test_computed_value("box-shadow-color", "magenta", "rgb(255, 0, 255)"); +test_computed_value("box-shadow-color", "#234", "rgb(34, 51, 68)"); +test_computed_value("box-shadow-color", "#FEDCBA", "rgb(254, 220, 186)"); +test_computed_value("box-shadow-color", "rgb(2, 3, 4)"); +test_computed_value("box-shadow-color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)"); +test_computed_value("box-shadow-color", "rgba(2, 3, 4, 0.5)"); +test_computed_value("box-shadow-color", "rgba(2, 3, 4, 50%)", "rgba(2, 3, 4, 0.5)"); +test_computed_value("box-shadow-color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)"); +test_computed_value("box-shadow-color", "hsla(120, 100%, 50%, 0.25)", "rgba(0, 255, 0, 0.25)"); +test_computed_value("box-shadow-color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)"); +test_computed_value("box-shadow-color", "rgb(100, 200, 300)", "rgb(100, 200, 255)"); +test_computed_value("box-shadow-color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)"); +test_computed_value("box-shadow-color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)"); +test_computed_value("box-shadow-color", "red, blue", "rgb(255, 0, 0), rgb(0, 0, 255)"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-invalid.html new file mode 100644 index 0000000000..7d92386de2 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-color' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-color"> +<meta name="assert" content="This test checks that 'box-shadow-color' supports only properly defined color values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("box-shadow-color", "auto"); +test_invalid_value("box-shadow-color", "123"); +test_invalid_value("box-shadow-color", "#12"); +test_invalid_value("box-shadow-color", "#123456789"); +test_invalid_value("box-shadow-color", "rgb"); +test_invalid_value("box-shadow-color", "rgb(1)"); +test_invalid_value("box-shadow-color", "rgb(1,2,3,4,5)"); +test_invalid_value("box-shadow-color", "hsla(1,2,3,4,5)"); +test_invalid_value("box-shadow-color", "rgb(10%, 20, 30%)"); +test_invalid_value("box-shadow-color", "rgba(-2, 300, 400%, -0.5)"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-valid.html new file mode 100644 index 0000000000..c278a7d1cc --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-color-valid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-color' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-color"> +<meta name="assert" content="This test checks that 'box-shadow-color' supports color values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("box-shadow-color", "currentcolor"); +test_valid_value("box-shadow-color", "transparent"); +test_valid_value("box-shadow-color", "red"); +test_valid_value("box-shadow-color", "magenta"); +test_valid_value("box-shadow-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("box-shadow-color", "#FEDCBA", "rgb(254, 220, 186)"); +test_valid_value("box-shadow-color", "rgb(2, 3, 4)"); +test_valid_value("box-shadow-color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)"); +test_valid_value("box-shadow-color", "rgba(2, 3, 4, 0.5)"); +test_valid_value("box-shadow-color", "rgba(2, 3, 4, 50%)", "rgba(2, 3, 4, 0.5)"); +test_valid_value("box-shadow-color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)"); +test_valid_value("box-shadow-color", "hsla(120, 100%, 50%, 0.25)", "rgba(0, 255, 0, 0.25)"); +test_valid_value("box-shadow-color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)"); +test_valid_value("box-shadow-color", "rgb(100, 200, 300)", "rgb(100, 200, 255)"); +test_valid_value("box-shadow-color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)"); +test_valid_value("box-shadow-color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)"); +test_valid_value("box-shadow-color", "red, blue", "rgb(255, 0, 0), rgb(0, 0, 255)"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-computed.html new file mode 100644 index 0000000000..8ed7d7bc9e --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'box-shadow-offset'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-offset"> +<meta name="assert" content="This test checks that the computed value of 'box-shadow-offset' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("box-shadow-offset", "0 0", "0px"); +test_computed_value("box-shadow-offset", "10px 0"); +test_computed_value("box-shadow-offset", "0 10px"); +test_computed_value("box-shadow-offset", "10px 10px", "10px"); +test_computed_value("box-shadow-offset", "10px 20px, 30px 40px"); +test_computed_value("box-shadow-offset", "calc(1em + 1px) calc(-1em + 1px)", "17px -15px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-invalid.html new file mode 100644 index 0000000000..dd1c0f3374 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-invalid.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-offset' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-offset"> +<meta name="assert" content="This test checks that 'box-shadow-offset' supports only properly defined offset values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("box-shadow-offset", "auto"); +test_invalid_value("box-shadow-offset", "1 2"); +test_invalid_value("box-shadow-offset", "1% 2%"); +test_invalid_value("box-shadow-offset", "1px 2px 3px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-valid.html new file mode 100644 index 0000000000..bfbe21f089 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-offset-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-offset' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-offset"> +<meta name="assert" content="This test checks that 'box-shadow-offset' supports offset values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("box-shadow-offset", "0"); +test_valid_value("box-shadow-offset", "0 0"); +test_valid_value("box-shadow-offset", "1px 2px"); +test_valid_value("box-shadow-offset", "1em 2em"); +test_valid_value("box-shadow-offset", "-1px -2px"); +test_valid_value("box-shadow-offset", "calc(1em + 2px) calc(3rem + 4vw)"); +test_valid_value("box-shadow-offset", "1px 2px, 3px 4px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-computed.html new file mode 100644 index 0000000000..9818199b58 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'box-shadow-position'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-position"> +<meta name="assert" content="This test checks that the computed value of 'box-shadow-position' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("box-shadow-position", "inset"); +test_computed_value("box-shadow-position", "outset"); +test_computed_value("box-shadow-position", "inset, outset"); +test_computed_value("box-shadow-position", "outset, inset"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-invalid.html new file mode 100644 index 0000000000..9738dd6107 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-invalid.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-position' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-position"> +<meta name="assert" content="This test checks that 'box-shadow-position' supports only valid keywords."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("box-shadow-position", "auto"); +test_invalid_value("box-shadow-position", "1 2"); +test_invalid_value("box-shadow-position", "1px"); +test_invalid_value("box-shadow-position", "1px 2px"); +test_invalid_value("box-shadow-position", "1%"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-valid.html new file mode 100644 index 0000000000..0d9b56fb01 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-position-valid.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-position' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-position"> +<meta name="assert" content="This test checks that 'box-shadow-position' supports positional keywords."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("box-shadow-position", "inset"); +test_valid_value("box-shadow-position", "outset"); +test_valid_value("box-shadow-position", "inset, outset"); +test_valid_value("box-shadow-position", "outset, inset"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-computed.html new file mode 100644 index 0000000000..e7f39d5565 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'box-shadow-spread'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-spread"> +<meta name="assert" content="This test checks that the computed value of 'box-shadow-spread' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("box-shadow-spread", "0", "0px"); +test_computed_value("box-shadow-spread", "1px"); +test_computed_value("box-shadow-spread", "1em", "16px"); +test_computed_value("box-shadow-spread", "-1px"); +test_computed_value("box-shadow-spread", "calc(1em + 1px)", "17px"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-invalid.html new file mode 100644 index 0000000000..205fd924b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-invalid.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-spread' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-spread"> +<meta name="assert" content="This test checks that 'box-shadow-spread' supports only properly defined length values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("box-shadow-spread", "auto"); +test_invalid_value("box-shadow-spread", "none"); +test_invalid_value("box-shadow-spread", "1"); +test_invalid_value("box-shadow-spread", "1px 2px"); +test_invalid_value("box-shadow-spread", "1%"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-valid.html new file mode 100644 index 0000000000..a368d13694 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/box-shadow-spread-valid.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'box-shadow-spread' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#box-shadow-spread"> +<meta name="assert" content="This test checks that 'box-shadow-spread' supports length values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("box-shadow-spread", "0"); +test_valid_value("box-shadow-spread", "1px"); +test_valid_value("box-shadow-spread", "1em"); +test_valid_value("box-shadow-spread", "-1px"); +test_valid_value("box-shadow-spread", "calc(1em + 2px)"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-computed.html new file mode 100644 index 0000000000..c238ddfb96 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'corner-shape'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping"> +<meta name="assert" content="This test checks that the computed value of 'corner-shape' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("corner-shape", "round"); +test_computed_value("corner-shape", "angle"); +test_computed_value("corner-shape", "round angle"); +test_computed_value("corner-shape", "round angle round"); +test_computed_value("corner-shape", "round angle round angle"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-invalid.html new file mode 100644 index 0000000000..51f8e05700 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'corner-shape' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping"> +<meta name="assert" content="This test checks that 'corner-shape' supports only up to four times the keywords 'round' and 'angle'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("corner-shape", "auto"); +test_invalid_value("corner-shape", "none"); +test_invalid_value("corner-shape", "scoop"); +test_invalid_value("corner-shape", "10px"); +test_invalid_value("corner-shape", "10%"); +test_invalid_value("corner-shape", "round round round round round"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-valid.html new file mode 100644 index 0000000000..62ee2630ac --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/corner-shape-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'corner-shape' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping"> +<meta name="assert" content="This test checks that 'corner-shape' supports the values 'round' and 'angle'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("corner-shape", "round"); +test_valid_value("corner-shape", "angle"); +test_valid_value("corner-shape", "angle round"); +test_valid_value("corner-shape", "round angle"); +test_valid_value("corner-shape", "angle round angle"); +test_valid_value("corner-shape", "angle round angle round"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-computed.html new file mode 100644 index 0000000000..6605f9eeb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-computed.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Computed values of 'corners'</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corners-shorthand"> +<meta name="assert" content="This test checks that the computed value of 'corners' is correct."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> + +<script> +test_computed_value("corners", "round"); +test_computed_value("corners", "angle"); +test_computed_value("corners", "round angle"); +test_computed_value("corners", "round angle round"); +test_computed_value("corners", "round angle round angle"); +test_computed_value("corners", "4px"); +test_computed_value("corners", "2%"); +test_computed_value("corners", "4px 2%"); +test_computed_value("corners", "4px 2% 1em", "4px 2% 16px"); +test_computed_value("corners", "4px 2% 1em 4%", "4px 2% 16px 4%"); +test_computed_value("corners", "4px / 2px"); +test_computed_value("corners", "2% / 2px"); +test_computed_value("corners", "4px 2% / 2px"); +test_computed_value("corners", "4px 2% 1em / 2px", "4px 2% 16px / 2px"); +test_computed_value("corners", "4px 2% 1em 4% / 2px", "4px 2% 16px 4% / 2px"); +test_computed_value("corners", "4px / 2px 4%"); +test_computed_value("corners", "4px / 2px 4% 1em", "4px / 2px 4% 16px"); +test_computed_value("corners", "4px / 2px 4% 1em 2%", "4px / 2px 4% 16px 2%"); +test_computed_value("corners", "4px 2% / 2px 4%"); +test_computed_value("corners", "4px 2% 1em / 2px 4% 1em", "4px 2% 16px / 2px 4% 16px"); +test_computed_value("corners", "4px 2% 1em 4% / 2px 4% 1em 2%", "4px 2% 16px 4% / 2px 4% 16px 2%"); +test_computed_value("corners", "4px round"); +test_computed_value("corners", "4px angle"); +test_computed_value("corners", "4px round angle"); +test_computed_value("corners", "4px round angle round"); +test_computed_value("corners", "4px round angle round angle"); +test_computed_value("corners", "4px 2% round"); +test_computed_value("corners", "4px 2% / 2px round"); +test_computed_value("corners", "4px / 2px 4% round"); +test_computed_value("corners", "4px / 2px 4% round angle"); +test_computed_value("corners", "round 4px"); +test_computed_value("corners", "round 4px 2%"); +test_computed_value("corners", "round 4px 2% / 2px"); +test_computed_value("corners", "round 4px / 2px 4%"); +test_computed_value("corners", "round angle 4px / 2px 4%"); +test_computed_value("corners", "round angle round angle 4px 2% 1em 4% / 2px 4% 1em 2%", "round angle round angle 4px 2% 16px 4% / 2px 4% 16px 2%"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-invalid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-invalid.html new file mode 100644 index 0000000000..1a762a7572 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'corners' with invalid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping"> +<meta name="assert" content="This test checks that 'corners' supports only a combination of 'border-radius' and 'corner-shape' values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("corners", "auto"); +test_invalid_value("corners", "none"); +test_invalid_value("corners", "scoop"); +test_invalid_value("corners", "round round round round round"); +test_invalid_value("corners", "-1px"); +test_invalid_value("corners", "4px 2% 1em 4% 2px"); +test_invalid_value("corners", "4px / 2px 4% 1em 2% 2px"); +test_invalid_value("corners", "4px / angle"); +test_invalid_value("corners", "angle / 4px"); +test_invalid_value("corners", "4px angle 2% round"); +test_invalid_value("corners", "round 4px angle 2%"); +test_invalid_value("corners", "4px / 2% angle 1em"); +test_invalid_value("corners", "round 4px / 2% angle"); +</script> diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-valid.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-valid.html new file mode 100644 index 0000000000..5b1ae7afb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-borders/tentative/parsing/corners-valid.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Borders and Box Decorations 4 Test: Parsing 'corners' with valid values</title> +<link rel="author" title="Sebastian Zartner" href="mailto:sebastianzartner@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping"> +<meta name="assert" content="This test checks that 'corners' supports a combination of 'border-radius' and 'corner-shape' values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("corners", "round"); +test_valid_value("corners", "angle"); +test_valid_value("corners", "round angle"); +test_valid_value("corners", "round angle round"); +test_valid_value("corners", "round angle round angle"); +test_valid_value("corners", "4px"); +test_valid_value("corners", "2%"); +test_valid_value("corners", "4px 2%"); +test_valid_value("corners", "4px 2% 1em"); +test_valid_value("corners", "4px 2% 1em 4%"); +test_valid_value("corners", "4px / 2px"); +test_valid_value("corners", "2% / 2px"); +test_valid_value("corners", "4px 2% / 2px"); +test_valid_value("corners", "4px 2% 1em / 2px"); +test_valid_value("corners", "4px 2% 1em 4% / 2px"); +test_valid_value("corners", "4px / 2px 4%"); +test_valid_value("corners", "4px / 2px 4% 1em"); +test_valid_value("corners", "4px / 2px 4% 1em 2%"); +test_valid_value("corners", "4px 2% / 2px 4%"); +test_valid_value("corners", "4px 2% 1em / 2px 4% 1em"); +test_valid_value("corners", "4px 2% 1em 4% / 2px 4% 1em 2%"); +test_valid_value("corners", "4px round"); +test_valid_value("corners", "4px angle"); +test_valid_value("corners", "4px round angle"); +test_valid_value("corners", "4px round angle round"); +test_valid_value("corners", "4px round angle round angle"); +test_valid_value("corners", "4px 2% round"); +test_valid_value("corners", "4px 2% / 2px round"); +test_valid_value("corners", "4px / 2px 4% round"); +test_valid_value("corners", "4px / 2px 4% round angle"); +test_valid_value("corners", "round 4px"); +test_valid_value("corners", "round 4px 2%"); +test_valid_value("corners", "round 4px 2% / 2px"); +test_valid_value("corners", "round 4px / 2px 4%"); +test_valid_value("corners", "round angle 4px / 2px 4%"); +test_valid_value("corners", "round angle round angle 4px 2% 1em 4% / 2px 4% 1em 2%"); +</script> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print-ref.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print-ref.html index ba0372df06..58cc0828d2 100644 --- a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print-ref.html +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com" /> -<p style="height: 50vh">Test passes if there is two purple rectangles at the start of both page 2 and 3 when printing the page (Ctrl+P).</p> +<p style="height: 50vh">Test passes if there is two purple rectangles at the start of both page 2 and 3 when printing the page (Ctrl+P, with "print backgrounds" enabled).</p> <div style="display:grid; grid-template-columns:1fr 1fr; break-before:page;"> <div style="contain:size; height:75vh;"> <div style="height:75vh; width: 100px; background:purple;"></div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print.html index 5a9e55973d..9b174caf96 100644 --- a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print.html +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print.html @@ -2,7 +2,7 @@ <link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com"> <link rel="help" href="https://issues.chromium.org/issues/327643792"> <link rel="match" href="./monolithic-overflow-print-ref.html"> -<p style="height: 50vh">Test passes if there is two purple rectangles at the start of both page 2 and 3 when printing the page (Ctrl+P).</p> +<p style="height: 50vh">Test passes if there is two purple rectangles at the start of both page 2 and 3 when printing the page (Ctrl+P, with "print backgrounds" enabled).</p> <div style="display:grid; grid-template-columns:1fr 1fr;"> <div style="contain:size; height:75vh;"> <div style="height:75vh; width: 100px; background:purple;"></div> diff --git a/testing/web-platform/tests/css/printing/transform-001-print-ref.html b/testing/web-platform/tests/css/css-break/transform-022-print-ref.html index 45c3abf181..45c3abf181 100644 --- a/testing/web-platform/tests/css/printing/transform-001-print-ref.html +++ b/testing/web-platform/tests/css/css-break/transform-022-print-ref.html diff --git a/testing/web-platform/tests/css/printing/transform-001-print.html b/testing/web-platform/tests/css/css-break/transform-022-print.html index f19b889d07..b8a097f225 100644 --- a/testing/web-platform/tests/css/printing/transform-001-print.html +++ b/testing/web-platform/tests/css/css-break/transform-022-print.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442522"> -<link rel="match" href="transform-001-print-ref.html"> +<link rel="match" href="transform-022-print-ref.html"> <style> body { margin: 0; } </style> diff --git a/testing/web-platform/tests/css/printing/transform-002-print-ref.html b/testing/web-platform/tests/css/css-break/transform-023-print-ref.html index 7204e1d657..7204e1d657 100644 --- a/testing/web-platform/tests/css/printing/transform-002-print-ref.html +++ b/testing/web-platform/tests/css/css-break/transform-023-print-ref.html diff --git a/testing/web-platform/tests/css/printing/transform-002-print.html b/testing/web-platform/tests/css/css-break/transform-023-print.html index 3ab37bf5bd..7650571abe 100644 --- a/testing/web-platform/tests/css/printing/transform-002-print.html +++ b/testing/web-platform/tests/css/css-break/transform-023-print.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1371426"> -<link rel="match" href="transform-002-print-ref.html"> +<link rel="match" href="transform-023-print-ref.html"> <p>There should be a green square on the second page, and no red.</p> <div style="break-before:page; width:100px; height:100px; background:red;"> <div style="position:absolute; width:0; height:0; transform:translateX(49px);"> diff --git a/testing/web-platform/tests/css/printing/transform-003-print-ref.html b/testing/web-platform/tests/css/css-break/transform-024-print-ref.html index 766c415a1b..766c415a1b 100644 --- a/testing/web-platform/tests/css/printing/transform-003-print-ref.html +++ b/testing/web-platform/tests/css/css-break/transform-024-print-ref.html diff --git a/testing/web-platform/tests/css/printing/transform-003-print.html b/testing/web-platform/tests/css/css-break/transform-024-print.html index c8effbb8f3..510b4c2e44 100644 --- a/testing/web-platform/tests/css/printing/transform-003-print.html +++ b/testing/web-platform/tests/css/css-break/transform-024-print.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1371426"> -<link rel="match" href="transform-003-print-ref.html"> +<link rel="match" href="transform-024-print-ref.html"> <style> body { margin: 0; } </style> diff --git a/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml new file mode 100644 index 0000000000..38aaee3021 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: cascade-layers + files: + - layer-* diff --git a/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html b/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html index 88e28fe4ff..8390738dd8 100644 --- a/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html +++ b/testing/web-platform/tests/css/css-cascade/at-scope-parsing.html @@ -42,9 +42,9 @@ test_valid('@scope to (.a)'); test_valid('@scope (.a) to (&)'); test_valid('@scope (.a) to (& > &)'); - test_valid('@scope (.a) to (> .b)'); - test_valid('@scope (.a) to (+ .b)'); - test_valid('@scope (.a) to (~ .b)'); + test_valid('@scope (.a) to (> .b)', '@scope (.a) to (:scope > .b)'); + test_valid('@scope (.a) to (+ .b)', '@scope (.a) to (:scope + .b)'); + test_valid('@scope (.a) to (~ .b)', '@scope (.a) to (:scope ~ .b)'); test_valid('@scope ()', '@scope'); test_valid('@scope to ()', '@scope'); test_valid('@scope () to ()', '@scope'); @@ -75,4 +75,5 @@ test_invalid('@scope (.a'); test_invalid('@scope (.a to (.b)'); test_invalid('@scope ( to (.b)'); + test_invalid('@scope (.a) from (.c)'); </script> diff --git a/testing/web-platform/tests/css/css-cascade/at-scope-relative-syntax.html b/testing/web-platform/tests/css/css-cascade/at-scope-relative-syntax.html new file mode 100644 index 0000000000..274d9afbeb --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/at-scope-relative-syntax.html @@ -0,0 +1,68 @@ +<!doctype html> +<title>@scope and Nesting: Parsing inner style rules with relative selector syntax</title> +<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-rules"> +<link rel="help" href="https://drafts.csswg.org/css-nesting/#nesting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<main id=main></main> +<script> + function create_rule_string(prelude, inner) { + if (prelude.length === 0) { + return `${inner} {}`; + } + let outermost = prelude[0]; + let rest = create_rule_string(prelude.slice(1), inner); + return `${outermost} { ${rest} }`; + } + + function create_rule_by_string(style, prelude, inner) { + style.textContent = create_rule_string(prelude, inner); + } + + function create_rule_by_insertion(style, prelude, inner) { + let current = style.sheet; + for (const p of prelude) { + let idx = current.insertRule(`${p} {}`); + current = current.cssRules[idx]; + } + current.insertRule(`${inner} {}`); + } + + function innermost_selector(depth, rules) { + let r = rules; + let d = depth + 1; + while (d != 0) { + assert_equals(r.cssRules.length, 1); + r = r.cssRules[0]; + d--; + } + return r.selectorText; + } + + const create_method = { + "string": create_rule_by_string, + "insertRule": create_rule_by_insertion, + }; + + function test_inner(prelude, method, actual, expected) { + if (expected === undefined) { + expected = actual; + } + test(t => { + t.add_cleanup(() => main.replaceChildren()); + const style = document.createElement('style'); + main.append(style); + create_method[method](style, prelude, actual); + const innerSelector = innermost_selector(prelude.length, style.sheet); + assert_equals(innerSelector, expected); + }, `${actual} in ${prelude} created by ${method} valid`); + } + + for (const method of Object.keys(create_method)) { + test_inner(['@scope' , '.nest'], method, '> .foo', '& > .foo'); + test_inner(['.nest', '@scope'], method, '> .foo', ':scope > .foo'); + + test_inner(['@scope' , '.nest', '@media screen'], method, '> .foo', '& > .foo'); + test_inner(['.nest', '@scope', '@media screen'], method, '> .foo', ':scope > .foo'); + } +</script> diff --git a/testing/web-platform/tests/css/css-cascade/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-cascade/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..56f7e89b85 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/parsing/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: cascade-layers + files: + - layer.html diff --git a/testing/web-platform/tests/css/css-cascade/scope-evaluation.html b/testing/web-platform/tests/css/css-cascade/scope-evaluation.html index f181048115..c6ea13c862 100644 --- a/testing/web-platform/tests/css/css-cascade/scope-evaluation.html +++ b/testing/web-platform/tests/css/css-cascade/scope-evaluation.html @@ -512,7 +512,6 @@ test_scope(document.currentScript, () => { }, ':scope in two different compounds'); </script> - <template> <style> @scope (.a:has(.c)) { @@ -545,3 +544,24 @@ test_scope(document.currentScript, () => { assert_not_green('.second .d'); }, 'Scope root with :has()'); </script> + +<template> + <style> + @scope (.a) to (.b, .c) { + * { background-color:green; } + } + </style> + <div class=a> + <span id="in"></span> + <div class=b> + <span id="out"</span> + <div class=c></div> + </div> + </div> +</template> +<script> +test_scope(document.currentScript, () => { + assert_green('#in'); + assert_not_green('#out'); +}, 'Any scope limit makes the element out of scope'); +</script> diff --git a/testing/web-platform/tests/css/css-cascade/scope-implicit.html b/testing/web-platform/tests/css/css-cascade/scope-implicit.html index 9add25fc9a..a1c6d1c626 100644 --- a/testing/web-platform/tests/css/css-cascade/scope-implicit.html +++ b/testing/web-platform/tests/css/css-cascade/scope-implicit.html @@ -196,4 +196,36 @@ test((t) => { assert_equals(getComputedStyle(outer).zIndex, 'auto'); assert_equals(getComputedStyle(outside_limit).zIndex, 'auto'); }, 'Implicit @scope with limit'); -</script>
\ No newline at end of file +</script> + +<template id=test_concurrent_scope_proximity> +<style> +@scope { + * { z-index: 1;} +} +</style> + <div> + <style> + @scope { + * { z-index:2; } + } + </style> + <div id=inner> + </div> + </div> + <div id=outer></div> +<style> +@scope { + * { z-index: 3;} +} +</style> +</template> +<script> +test((t) => { + t.add_cleanup(() => main.replaceChildren()); + main.append(test_concurrent_scope_proximity.content.cloneNode(true)); + + assert_equals(getComputedStyle(inner).zIndex, '2'); + assert_equals(getComputedStyle(outer).zIndex, '3'); +}, 'Proximity calculation of multiple implicit @scope'); +</script> diff --git a/testing/web-platform/tests/css/css-color/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-color/WEB_FEATURES.yml new file mode 100644 index 0000000000..8910deab28 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/WEB_FEATURES.yml @@ -0,0 +1,22 @@ +features: +- name: color-function + files: + - a98rgb-* + - display-p3-* + - predefined-* + - prophoto-rgb-* + - rec2020-* + - srgb-* + - xyz-* +- name: color-mix + files: + - color-mix-* + - nested-color-mix-with-currentcolor.html +- name: lab + files: + - lab-* + - lch-* +- name: oklab + files: + - oklab-* + - oklch-* diff --git a/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow-ref.html b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow-ref.html new file mode 100644 index 0000000000..7610a6f191 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div style="position: absolute; width: 200px; height: 200px; background: rgb(255 255 128)"></div> +<div style="position: absolute; width: 250px; height: 100px; background: rgb(128 128 255)"></div> +<div style="position: absolute; width: 100px; height: 250px; background: rgb(128 192 128)"></div> +</div> diff --git a/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow.html b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow.html new file mode 100644 index 0000000000..2ad0193806 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-color/#transparency"> +<link rel="help" href="https://drafts.csswg.org/css-position/#def-cb"> +<link rel="match" href="clip-opacity-out-of-flow-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-60000"> +<div style="overflow: hidden; width: 250px; height: 250px; will-change:transform"> + <div style="overflow: hidden; width: 300px; height: 300px; transform: translateX(0)"> + <div style="overflow: hidden; width: 200px; height: 200px"> + <div style="width: 300px; height: 300px; background: red; opacity: 0.5"> + <div style="width: 400px; height: 400px; background: yellow"> + <!-- These out-of-flow positioned elements are not contained by the inner clip, + while the outer clip and the opacity still apply. The opacity should also + apply to all descendants as a single group. --> + <div style="position: absolute; width: 400px; height: 100px; background: blue"></div> + <div style="position: fixed; width: 100px; height: 400px; background: green"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html b/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html index 287eba9824..be8833593d 100644 --- a/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html +++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html @@ -5,13 +5,16 @@ <link rel="match" href="lab-l-over-100-ref.html"> <meta name="assert" content="lab() with lightness greater than 100"> <style> - .ref { background-color: lab(100 150 20); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: lab(100 150 20); height: 100px} /* l = 150 should clamp back to 100 */ - .test { background-color: lab(150 150 20); width: 100px; height: 100px} + .test { background-color: lab(150 150 20); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html b/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html index e85d289d21..20a9568094 100644 --- a/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html +++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html @@ -5,13 +5,16 @@ <link rel="match" href="lab-l-over-100-ref.html"> <meta name="assert" content="lab() with lightness greater than 100%"> <style> - .ref { background-color: lab(100% 150 20); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: lab(100% 150 20); height: 100px} /* l = 150 should clamp back to 100 */ - .test { background-color: lab(150% 150 20); width: 100px; height: 100px} + .test { background-color: lab(150% 150 20); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html b/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html index 57328cfa7c..eccc492079 100644 --- a/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html +++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html @@ -2,10 +2,10 @@ <meta charset="utf-8"> <title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0 to 100</title> <style> - .ref { background-color: lab(100 150 20); width: 100px; height: 200px} + .ref { background-color: lab(100 150 20); border: 1px solid black; width: 200px; height: 200px} </style> <body> - <p>Test passes if you see a single color.</p> + <p>Test passes if you see a square border with a single color inside.</p> <div class="ref"></div> </body> diff --git a/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html b/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html index 6e0c62330c..12d594d1a3 100644 --- a/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html +++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html @@ -5,13 +5,16 @@ <link rel="match" href="lch-l-over-100-ref.html"> <meta name="assert" content="lch() with lightness greater than 100"> <style> - .ref { background-color: lch(100 150 20); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: lch(100 150 20); height: 100px} /* l = 150 should clamp back to 100 */ - .test { background-color: lch(150 150 20); width: 100px; height: 100px} + .test { background-color: lch(150 150 20); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html b/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html index 7752d0dc0e..68789b9c85 100644 --- a/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html +++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html @@ -5,13 +5,16 @@ <link rel="match" href="lch-l-over-100-ref.html"> <meta name="assert" content="lch() with lightness graeter than 100%"> <style> - .ref { background-color: lch(100% 150 20); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: lch(100% 150 20); height: 100px} /* l = 150% should clamp back to 100% */ - .test { background-color: lch(150% 150 20); width: 100px; height: 100px} + .test { background-color: lch(150% 150 20); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html b/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html index 67766274e5..291772e166 100644 --- a/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html +++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html @@ -2,11 +2,10 @@ <meta charset="utf-8"> <title>CSS Color 4: Specifying LCH with lightness over 100</title> <style> - .ref { background-color: lch(100 150 20); width: 100px; height: 200px} + .ref { background-color: lch(100 150 20); border: 1px solid black; width: 200px; height: 200px} </style> <body> - <p>Test passes if you see a single color.</p> + <p>Test passes if you see a square border with a single color inside.</p> <div class="ref"></div> - <div class="test"></div> </body> diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-0-ref.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-0-ref.html new file mode 100644 index 0000000000..244321ea69 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-0-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + .ref { background-color: oklab(0 0.15 0.15); border: 1px solid black; width: 200px; height: 200px; } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-0.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-0.html new file mode 100644 index 0000000000..e8cc1b9042 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-0.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="match" href="oklab-l-almost-0-ref.html"> +<meta name="assert" content="oklab() with lightness very close to 0 should render the same as 0"> +<style> + .square { border: 1px solid black; width: 200px; height: 200px; } + .test { background-color: red; height: 100px; } + /* Non-zero a/b is used to show if the result is black or not, but the + * test passes as long as it's the same color. */ + .ref { background-color: oklab(0 0.15 0.15); height: 100px; } + .test { background-color: oklab(0.0001% 0.15 0.15); } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-1-ref.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-1-ref.html new file mode 100644 index 0000000000..72cdf35447 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + .ref { background-color: oklab(1 0.15 0.15); border: 1px solid black; width: 200px; height: 200px; } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-1.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-1.html new file mode 100644 index 0000000000..352e7b58aa --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="match" href="oklab-l-almost-1-ref.html"> +<meta name="assert" content="oklab() with lightness very close to 1 should render the same as 1"> +<style> + .square { border: 1px solid black; width: 200px; height: 200px; } + .test { background-color: red; height: 100px; } + /* Non-zero a/b is used to show if the result is white or not, but the + * test passes as long as it's the same color. */ + .ref { background-color: oklab(1 0.15 0.15); height: 100px; } + .test { background-color: oklab(99.9999% 0.15 0.15); } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html b/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html index 612fe32acb..a16fe7886f 100644 --- a/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html +++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html @@ -5,13 +5,16 @@ <link rel="match" href="oklab-l-over-1-ref.html"> <meta name="assert" content="oklab() with lightness greater than 1"> <style> - .ref { background-color: oklab(1 0.5 0.2); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: oklab(1 0.5 0.2); height: 100px} /* l = 1.5 should clamp back to 1 */ - .test { background-color: oklab(1.5 0.5 0.2); width: 100px; height: 100px} + .test { background-color: oklab(1.5 0.5 0.2); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html b/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html index 11948f014b..6300cb8af3 100644 --- a/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html +++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html @@ -5,13 +5,16 @@ <link rel="match" href="oklab-l-over-1-ref.html"> <meta name="assert" content="oklab() with lightness greater than 100%"> <style> - .ref { background-color: oklab(100% 0.5 0.2); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: oklab(100% 0.5 0.2); height: 100px} /* l = 150 should clamp back to 100 */ - .test { background-color: oklab(150% 0.5 0.2); width: 100px; height: 100px} + .test { background-color: oklab(150% 0.5 0.2); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html b/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html index eb380dcb75..f050bbc643 100644 --- a/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html +++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html @@ -2,10 +2,10 @@ <meta charset="utf-8"> <title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0 to 100</title> <style> - .ref { background-color: oklab(1 0.5 0.2); width: 100px; height: 200px} + .ref { background-color: oklab(1 0.5 0.2); border: 1px solid black; width: 200px; height: 200px} </style> <body> - <p>Test passes if you see a single color.</p> + <p>Test passes if you see a square border with a single color inside.</p> <div class="ref"></div> </body> diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-0-ref.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-0-ref.html new file mode 100644 index 0000000000..e019136f96 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-0-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + .ref { background-color: oklch(0 0.2 45); border: 1px solid black; width: 200px; height: 200px; } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-0.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-0.html new file mode 100644 index 0000000000..c171befe64 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-0.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="match" href="oklch-l-almost-0-ref.html"> +<meta name="assert" content="oklch() with lightness very close to 0 should render the same as 0"> +<style> + .square { border: 1px solid black; width: 200px; height: 200px; } + .test { background-color: red; height: 100px; } + /* Non-zero chroma is used to show if the result is black or not, but the + * test passes as long as it's the same color. */ + .ref { background-color: oklch(0 0.2 45); height: 100px; } + .test { background-color: oklch(0.0001% 0.2 45); } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-1-ref.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-1-ref.html new file mode 100644 index 0000000000..e1f29eaa18 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + .ref { background-color: oklch(1 0.2 45); border: 1px solid black; width: 200px; height: 200px; } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-1.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-1.html new file mode 100644 index 0000000000..c98cea292f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="match" href="oklch-l-almost-1-ref.html"> +<meta name="assert" content="oklch() with lightness very close to 1 should render the same as 1"> +<style> + .square { border: 1px solid black; width: 200px; height: 200px; } + .test { background-color: red; height: 100px; } + /* Non-zero chroma is used to show if the result is white or not, but the + * test passes as long as it's the same color. */ + .ref { background-color: oklch(1 0.2 45); height: 100px; } + .test { background-color: oklch(99.9999% 0.2 45); } +</style> +<body> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html b/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html index 4eb3cda846..c734723541 100644 --- a/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html +++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html @@ -5,13 +5,16 @@ <link rel="match" href="oklch-l-over-1-ref.html"> <meta name="assert" content="oklch() with lightness greater than 1"> <style> - .ref { background-color: oklch(1 0.5 50); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: oklch(1 0.5 50); height: 100px} /* l = 1.5 should clamp back to 1 */ - .test { background-color: oklch(1.5 0.5 50); width: 100px; height: 100px} + .test { background-color: oklch(1.5 0.5 50); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html b/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html index de8b1a6cdd..59eac2b367 100644 --- a/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html +++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html @@ -5,13 +5,16 @@ <link rel="match" href="oklch-l-over-1-ref.html"> <meta name="assert" content="oklch() with lightness greater than 100%"> <style> - .ref { background-color: oklch(100% 0.5 50); width: 100px; height: 100px} + .square { border: 1px solid black; width: 200px; height: 200px} + .ref { background-color: oklch(100% 0.5 50); height: 100px} /* l = 150% should clamp back to 100% */ - .test { background-color: oklch(150% 0.5 50); width: 100px; height: 100px} + .test { background-color: oklch(150% 0.5 50); height: 100px} </style> <body> - <p>Test passes if you see a single color.</p> - <div class="ref"></div> - <div class="test"></div> + <p>Test passes if you see a square border with a single color inside.</p> + <div class="square"> + <div class="ref"></div> + <div class="test"></div> + </div> </body> diff --git a/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html b/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html index 2c7815c5f0..ae1b5e00e5 100644 --- a/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html +++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html @@ -2,10 +2,10 @@ <meta charset="utf-8"> <title>CSS Color 4: Verify lightness in Oklch is always clamped to a value between 0 to 1</title> <style> - .ref { background-color: oklch(1 0.5 50); width: 100px; height: 200px} + .ref { background-color: oklch(1 0.5 50); border: 1px solid black; width: 200px; height: 200px} </style> <body> - <p>Test passes if you see a single color.</p> + <p>Test passes if you see a square border with a single color inside.</p> <div class="ref"></div> </body> diff --git a/testing/web-platform/tests/css/css-color/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-color/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..cc8273c2ad --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/WEB_FEATURES.yml @@ -0,0 +1,5 @@ +features: +- name: color-mix + files: + - "*-color-mix-*" + - color-mix-out-of-gamut.html diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html index b54aa0da12..88cb20e6eb 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html @@ -42,8 +42,8 @@ fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / 0), hsl(30deg 30% 40%))`, `color(srgb 0.46 0.52 0.28 / 0.5)`); fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / 0) 10%, hsl(30deg 30% 40%))`, `color(srgb 0.52 0.436 0.28 / 0.9)`); - fuzzy_test_computed_color(`color-mix(in hsl, white, blue)`, `color(srgb 0.62 0.62 0.87)`); - fuzzy_test_computed_color(`color-mix(in hsl, white 10%, blue)`, `color(srgb 0.15 0.15 0.96)`); + fuzzy_test_computed_color(`color-mix(in hsl, white, blue)`, `color(srgb 0.625 0.625 0.875)`); + fuzzy_test_computed_color(`color-mix(in hsl, white 10%, blue)`, `color(srgb 0.145 0.145 0.955)`); fuzzy_test_computed_color(`color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); fuzzy_test_computed_color(`color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); @@ -421,8 +421,8 @@ fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 0), oklab(0.3 0.4 0.5))`, 'oklab(0.3 0.4 0.5 / 0.5)'); fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 0) 10%, oklab(0.3 0.4 0.5))`, 'oklab(0.3 0.4 0.5 / 0.9)'); - fuzzy_test_computed_color(`color-mix(in oklab, white, blue)`, `oklab(0.73 -0.02 -0.16)`); - fuzzy_test_computed_color(`color-mix(in oklab, white 10%, blue)`, `oklab(0.51 -0.03 -0.28)`); + fuzzy_test_computed_color(`color-mix(in oklab, white, blue)`, `oklab(0.726 -0.016 -0.156)`); + fuzzy_test_computed_color(`color-mix(in oklab, white 10%, blue)`, `oklab(0.507 -0.029 -0.28)`); fuzzy_test_computed_color(`color-mix(in oklab, oklab(none none none), oklab(none none none))`, `oklab(none none none)`); fuzzy_test_computed_color(`color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `oklab(0.5 0.6 0.7)`); @@ -441,7 +441,7 @@ fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(none none none / 0.5))`, `oklab(0.1 0.2 0.3 / 0.5)`); fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(0.5 none none / 0.5))`, `oklab(0.5 0.2 0.3 / 0.5)`); - for (const colorSpace of [ "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) { + for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) { const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.3 0.4 0.5)`); diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html index 95c8eee226..ac2f9c87aa 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html @@ -106,6 +106,10 @@ fuzzy_test_computed_color(`rgb(from rgb(100 110 120 / 0.8) calc(r + 1) calc(g + 1) calc(b + 1) / calc(alpha + 0.01))`, `color(srgb 0.396 0.435 0.474 / 0.81)`); // rgb(101 111 121) fuzzy_test_computed_color(`rgb(from rebeccapurple calc((r / 255) * 100%) calc((g / 255) * 100%) calc((b / 255) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`rgb(from rgb(from rebeccapurple r g b / calc(alpha + 0.5)) r g b / calc(alpha - 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`); + fuzzy_test_computed_color(`rgb(from rgb(from rebeccapurple r g b / calc(alpha - 1.5)) r g b / calc(alpha + 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`); + // Testing with 'none'. Missing components are resolved to zero during color space conversion. // https://drafts.csswg.org/css-color-4/#missing fuzzy_test_computed_color(`rgb(from rebeccapurple none none none)`, `color(srgb 0 0 0)`); @@ -119,6 +123,7 @@ fuzzy_test_computed_color(`rgb(from rgb(none none none / none) r g b / alpha)`, `color(srgb 0 0 0 / 0)`); fuzzy_test_computed_color(`rgb(from rgb(20% none 60%) r g b)`, `color(srgb 0.2 0 0.6)`); fuzzy_test_computed_color(`rgb(from rgb(20% 40% 60% / none) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0)`); + fuzzy_test_computed_color(`color-mix(in srgb, rgb(from rebeccapurple none g b), rebeccapurple)`, `color(srgb 0.4 0.2 0.6)`); // color-mix fuzzy_test_computed_color(`rgb(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`); @@ -165,20 +170,24 @@ // Testing valid permutation (types match). fuzzy_test_computed_color(`hsl(from rebeccapurple h l s)`, `color(srgb 0.5 0.3 0.7)`); - fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0 0.8 / 0.5)`); - fuzzy_test_computed_color(`hsl(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56 / 0.4)`); - fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 1 1 1)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0.396 0.404)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01)`); fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l s)`, `color(srgb 0.3 0.5 0.7 / 0.8)`); - fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.08 0.4 0.72 / 0.5)`); - fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56 / 0.4)`); - fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.64 0.8 0.96 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.397 0.4 0.403)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01 / 0.8)`); // Testing with calc(). fuzzy_test_computed_color(`hsl(from rebeccapurple calc(h) calc(s) calc(l))`, `color(srgb 0.4 0.2 0.6)`); fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); - fuzzy_test_computed_color(`hsl(from hsl(20 30 40 / 0.8) calc(h + 1) calc(s + 1) calc(l + 1) / calc(alpha + 0.01))`, `color(srgb 0.54 0.37 0.28 / 0.81)`); // hsl(21 31 41) + fuzzy_test_computed_color(`hsl(from hsl(20 30 40 / 0.8) calc(h + 1) calc(s + 1) calc(l + 1) / calc(alpha + 0.01))`, `color(srgb 0.537 0.372 0.283 / 0.81)`); // hsl(21 31 41) fuzzy_test_computed_color(`hsl(from rebeccapurple calc((h / 360) * 360deg) calc((s / 100) * 100%) calc((l / 100) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`hsl(from hsl(from rebeccapurple h s l / calc(alpha + 0.5)) h s l / calc(alpha - 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`); + fuzzy_test_computed_color(`hsl(from hsl(from rebeccapurple h s l / calc(alpha - 1.5)) h s l / calc(alpha + 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`); + // Testing with 'none'. Missing components are resolved to zero during color space conversion. // https://drafts.csswg.org/css-color-4/#missing fuzzy_test_computed_color(`hsl(from rebeccapurple none none none)`, `color(srgb 0 0 0)`); @@ -195,6 +204,7 @@ fuzzy_test_computed_color(`hsl(from hsl(120deg none 50% / .5) h s l)`, `color(srgb 0.5 0.5 0.5 / 0.5)`); fuzzy_test_computed_color(`hsl(from hsl(120deg 20% 50% / none) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0)`); fuzzy_test_computed_color(`hsl(from hsl(none 20% 50% / .5) h s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(from rebeccapurple none s l), rebeccapurple)`, `color(srgb 0.4 0.2 0.6)`); // color-mix fuzzy_test_computed_color(`hsl(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`); @@ -240,13 +250,13 @@ // Testing valid permutation (types match). fuzzy_test_computed_color(`hwb(from rebeccapurple h b w)`, `color(srgb 0.6 0.4 0.8)`); - fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.8333 0.8333 0.8333 / 0.4)`); - fuzzy_test_computed_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8 / 0.2)`); - fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.405 0.01 0.8)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.01 0.99)`); fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h b w)`, `color(srgb 0.4 0.6 0.8 / 0.8)`); - fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.8 0.8 0.8 / 0.4)`); - fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8 / 0.2)`); - fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.01 0.404 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.5 0.992 / 0.8)`); // Testing with calc(). fuzzy_test_computed_color(`hwb(from rebeccapurple calc(h) calc(w) calc(b))`, `color(srgb 0.4 0.2 0.6)`); @@ -254,6 +264,10 @@ fuzzy_test_computed_color(`hwb(from hwb(20 30 40 / 0.8) calc(h + 1) calc(w + 1) calc(b + 1) / calc(alpha + 0.01))`, `color(srgb 0.59 0.41 0.31 / 0.81)`); // hwb(21 31 41) fuzzy_test_computed_color(`hwb(from rebeccapurple calc((h / 360) * 360deg) calc((w / 100) * 100%) calc((b / 100) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`hwb(from hwb(from rebeccapurple h w b / calc(alpha + 0.5)) h w b / calc(alpha - 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`); + fuzzy_test_computed_color(`hwb(from hwb(from rebeccapurple h w b / calc(alpha - 1.5)) h w b / calc(alpha + 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`); + // Testing with 'none'. Missing components are resolved to zero during color space conversion. // https://drafts.csswg.org/css-color-4/#missing fuzzy_test_computed_color(`hwb(from rebeccapurple none none none)`, `color(srgb 1 0 0)`); @@ -270,6 +284,7 @@ fuzzy_test_computed_color(`hwb(from hwb(120deg none 50% / .5) h w b)`, `color(srgb 0 0.5 0 / 0.5)`); fuzzy_test_computed_color(`hwb(from hwb(120deg 20% 50% / none) h w b / alpha)`, `color(srgb 0.2 0.5 0.2 / 0)`); fuzzy_test_computed_color(`hwb(from hwb(none 20% 50% / .5) h w b / alpha)`, `color(srgb 0.5 0.2 0.2 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(from rebeccapurple none w b), rebeccapurple)`, `color(srgb 0.4 0.2 0.6)`); // color-mix fuzzy_test_computed_color(`hwb(from color-mix(in srgb, red, red) h w b / alpha)`, `color(srgb 1 0 0)`); @@ -325,6 +340,10 @@ fuzzy_test_computed_color(`lab(from lab(50 5 10 / 0.8) calc(l + 1) calc(a + 1) calc(b + 1) / calc(alpha + 0.01))`, `lab(51 6 11 / 0.81)`); fuzzy_test_computed_color(`lab(from lab(25 20 50) calc((l / 100) * 100%) calc((a / 125) * 100%) calc((b / 125) * 100%) / calc(alpha * 100%))`, `lab(25 20 50)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`lab(from lab(from lab(25 20 50) l a b / calc(alpha + 0.5)) l a b / calc(alpha - 0.5))`, `lab(25 20 50 / 0.5)`); + fuzzy_test_computed_color(`lab(from lab(from lab(25 20 50) l a b / calc(alpha - 1.5)) l a b / calc(alpha + 0.5))`, `lab(25 20 50 / 0.5)`); + // Testing with 'none'. fuzzy_test_computed_color(`lab(from lab(25 20 50) none none none)`, `lab(none none none)`); fuzzy_test_computed_color(`lab(from lab(25 20 50) none none none / none)`, `lab(none none none / none)`); @@ -338,6 +357,7 @@ fuzzy_test_computed_color(`lab(from lab(none none none / none) l a b / alpha)`, `lab(0 0 0 / 0)`); fuzzy_test_computed_color(`lab(from lab(25 none 50) l a b)`, `lab(25 0 50)`); fuzzy_test_computed_color(`lab(from lab(25 20 50 / none) l a b / alpha)`, `lab(25 20 50 / 0)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(from lab(25 20 50) none a b), lab(25 20 50))`, `lab(25 20 50)`); // color-mix fuzzy_test_computed_color(`lab(from color-mix(in lab, lab(25 20 50), lab(25 20 50)) l a b / alpha)`, `lab(25 20 50)`); @@ -393,6 +413,10 @@ fuzzy_test_computed_color(`oklab(from oklab(0.5 .05 0.1 / 0.8) calc(l + 0.01) calc(a + 0.01) calc(b + 0.01) / calc(alpha + 0.01))`, `oklab(0.51 .06 0.11 / 0.81)`); fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) calc(l * 100%) calc((a / 0.4) * 100%) calc((b / 0.4) * 100%) / calc(alpha * 100%))`, `oklab(0.25 0.2 0.5)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`oklab(from oklab(from oklab(0.25 0.2 0.5) l a b / calc(alpha + 0.5)) l a b / calc(alpha - 0.5))`, `oklab(0.25 0.2 0.5 / 0.5)`); + fuzzy_test_computed_color(`oklab(from oklab(from oklab(0.25 0.2 0.5) l a b / calc(alpha - 1.5)) l a b / calc(alpha + 0.5))`, `oklab(0.25 0.2 0.5 / 0.5)`); + // Testing with 'none'. fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) none none none)`, `oklab(none none none)`); fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) none none none / none)`, `oklab(none none none / none)`); @@ -406,6 +430,7 @@ fuzzy_test_computed_color(`oklab(from oklab(none none none / none) l a b / alpha)`, `oklab(0 0 0 / 0)`); fuzzy_test_computed_color(`oklab(from oklab(0.25 none 0.5) l a b)`, `oklab(0.25 0 0.5)`); fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / none) l a b / alpha)`, `oklab(0.25 0.2 0.5 / 0)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(from oklab(0.25 0.2 0.5) none a b), oklab(0.25 0.2 0.5))`, `oklab(0.25 0.2 0.5)`); // color-mix fuzzy_test_computed_color(`oklab(from color-mix(in oklab, oklab(0.25 0.2 0.5), oklab(0.25 0.2 0.5)) l a b / alpha)`, `oklab(0.25 0.2 0.5)`); @@ -469,6 +494,10 @@ fuzzy_test_computed_color(`lch(from lch(50 5 10 / 0.8) calc(l + 1) calc(c + 1) calc(h + 1) / calc(alpha + 0.01))`, `lch(51 6 11 / 0.81)`); fuzzy_test_computed_color(`lch(from lch(0.7 45 30) calc((l / 100) * 100%) calc((c / 150) * 100%) calc((h / 360) * 360deg) / calc(alpha * 100%))`, `lch(0.7 45 30)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`lch(from lch(from lch(0.7 45 30) l c h / calc(alpha + 0.5)) l c h / calc(alpha - 0.5))`, `lch(0.7 45 30 / 0.5)`); + fuzzy_test_computed_color(`lch(from lch(from lch(0.7 45 30) l c h / calc(alpha - 1.5)) l c h / calc(alpha + 0.5))`, `lch(0.7 45 30 / 0.5)`); + // Testing with 'none'. fuzzy_test_computed_color(`lch(from lch(0.7 45 30) none none none)`, `lch(none none none)`); fuzzy_test_computed_color(`lch(from lch(0.7 45 30) none none none / none)`, `lch(none none none / none)`); @@ -482,6 +511,7 @@ fuzzy_test_computed_color(`lch(from lch(none none none / none) l c h / alpha)`, `lch(0 0 0 / 0)`); fuzzy_test_computed_color(`lch(from lch(0.7 none 30) l c h)`, `lch(0.7 0 30)`); fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / none) l c h / alpha)`, `lch(0.7 45 30 / 0)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(from lch(0.7 45 30) l c none), lch(0.7 45 30))`, `lch(0.7 45 30)`); // color-mix fuzzy_test_computed_color(`lch(from color-mix(in lch, lch(70 45 30), lch(70 45 30)) l c h / alpha)`, `lch(70 45 30)`); @@ -546,6 +576,10 @@ fuzzy_test_computed_color(`oklch(from oklch(0.5 .05 0.1 / 0.8) calc(l + 0.01) calc(c + 0.01) calc(h + 0.01) / calc(alpha + 0.01))`, `oklch(0.51 .06 0.11 / 0.81)`); fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) calc(l * 100%) calc((c / 0.4) * 100%) calc((h / 360) * 360deg) / calc(alpha * 100%))`, `oklch(0.7 0.45 30)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`oklch(from oklch(from oklch(0.7 0.45 30) l c h / calc(alpha + 0.5)) l c h / calc(alpha - 0.5))`, `oklch(0.7 0.45 30 / 0.5)`); + fuzzy_test_computed_color(`oklch(from oklch(from oklch(0.7 0.45 30) l c h / calc(alpha - 1.5)) l c h / calc(alpha + 0.5))`, `oklch(0.7 0.45 30 / 0.5)`); + // Testing with 'none'. fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) none none none)`, `oklch(none none none)`); fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) none none none / none)`, `oklch(none none none / none)`); @@ -559,6 +593,7 @@ fuzzy_test_computed_color(`oklch(from oklch(none none none / none) l c h / alpha)`, `oklch(0 0 0 / 0)`); fuzzy_test_computed_color(`oklch(from oklch(0.7 none 30) l c h)`, `oklch(0.7 0 30)`); fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / none) l c h / alpha)`, `oklch(0.7 0.45 30 / 0)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(from oklch(0.7 0.45 30) l c none), oklch(0.7 0.45 30))`, `oklch(0.7 0.45 30)`); // color-mix fuzzy_test_computed_color(`oklch(from color-mix(in oklch, oklch(0.7 0.45 30), oklch(0.7 0.45 30)) l c h / alpha)`, `oklch(0.7 0.45 30)`); @@ -637,6 +672,10 @@ fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 0.8) ${colorSpace} calc(r + 0.01) calc(g + 0.01) calc(b + 0.01) / calc(alpha + 0.01))`, `color(${colorSpace} 0.71 0.51 0.31 / 0.81)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r * 100%) calc(g * 100%) calc(b * 100%) / calc(alpha * 100%))`, `color(${colorSpace} 0.7 0.5 0.3)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / calc(alpha + 0.5)) ${colorSpace} r g b / calc(alpha - 0.5))`, `color(${colorSpace} 0.7 0.5 0.3 / 0.5)`); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / calc(alpha - 1.5)) ${colorSpace} r g b / calc(alpha + 0.5))`, `color(${colorSpace} 0.7 0.5 0.3 / 0.5)`); + // Testing with 'none'. fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} none none none)`, `color(${colorSpace} none none none)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} none none none / none)`, `color(${colorSpace} none none none / none)`); @@ -702,6 +741,10 @@ fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 0.8) ${colorSpace} calc(x + 1) calc(y + 1) calc(z + 1) / calc(alpha + 0.01))`, `color(${resultColorSpace} 8 -19.5 101 / 0.81)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x * 100%) calc(y * 100%) calc(z * 100%) / calc(alpha * 100%))`, `color(${resultColorSpace} 7 -20.5 100)`); + // Alpha is clamped to [0,1] + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / calc(alpha + 0.5)) ${colorSpace} x y z / calc(alpha - 0.5))`, `color(${resultColorSpace} 7 -20.5 100 / 0.5)`); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / calc(alpha - 1.5)) ${colorSpace} x y z / calc(alpha + 0.5))`, `color(${resultColorSpace} 7 -20.5 100 / 0.5)`); + // Testing with 'none'. fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} none none none)`, `color(${resultColorSpace} none none none)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} none none none / none)`, `color(${resultColorSpace} none none none / none)`); @@ -744,6 +787,26 @@ fuzzy_test_computed_color(`oklch(from color(srgb 0.25 0.5 0.75) l c h)`, `oklch(0.585502 0.118254 250.546)`, 0.02); // Larger values means larger epsilon. fuzzy_test_computed_color(`color(from oklch(72.322% 0.12403 247.996) srgb r g b)`, `color(srgb 0.382631 0.672756 0.938904)`, 0.001); + // Test that conversion are relatively lossless. + for (const colorSpace of ["xyz-d50", "xyz-d65"]) { + fuzzy_test_computed_color(`color(from rgb(from color(${colorSpace} 0.99 0.88 0.77) r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from hsl(from color(${colorSpace} 0.99 0.88 0.77) h s l) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from hwb(from color(${colorSpace} 0.99 0.88 0.77) h w b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from lab(from color(${colorSpace} 0.99 0.88 0.77) l a b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from lch(from color(${colorSpace} 0.99 0.88 0.77) l c h) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from oklab(from color(${colorSpace} 0.99 0.88 0.77) l a b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from oklch(from color(${colorSpace} 0.99 0.88 0.77) l c h) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) srgb r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) srgb-linear r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) display-p3 r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) a98-rgb r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) prophoto-rgb r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) rec2020 r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) xyz x y z) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) xyz-d50 x y z) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) xyz-d65 x y z) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001); + } + // Spec Examples: https://www.w3.org/TR/css-color-5/#relative-colors // All examples here have multiple stages of calculations so minor disagreements in the values of keyword colors and other constants can compound. // These tests require a wider epsilon of 0.02. diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html index 5a39d42c2d..e02fb44fcb 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html @@ -12,7 +12,10 @@ </head> <body> <script> -for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) { +const RGB_SPACES = ["srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb"]; +const XYZ_SPACES = ["xyz", "xyz-d50", "xyz-d65"]; + +for (const colorSpace of RGB_SPACES) { test_invalid_value("color", `color(${colorSpace} 0 0 0 0)`); test_invalid_value("color", `color(${colorSpace} 0deg 0% 0)`); test_invalid_value("color", `color(${colorSpace} 0% 0 0 1)`); @@ -29,7 +32,7 @@ for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophot test_invalid_value("color", `color(${colorSpace} / 0.5)`); } -for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { +for (const colorSpace of XYZ_SPACES) { test_invalid_value("color", `color(${colorSpace} 0 0 0 0)`); test_invalid_value("color", `color(${colorSpace} 0deg 0% 0)`); test_invalid_value("color", `color(${colorSpace} 0% 0 0 1)`); @@ -52,12 +55,17 @@ test_invalid_value("color", "color(displayp3 1 1 1)"); // Bad Display P3 color test_invalid_value("color", "color(1 1 1)"); // No color space test_invalid_value("color", "color(srgb 1 1)"); // One missing component test_invalid_value("color", "color(srgb 1)"); // Two missing components +test_invalid_value("color", "color(srgb 0, 0, 0)"); // Commas as separators test_invalid_value("color", "color(srgb 1 1 1 1)"); // Too many parameters test_invalid_value("color", "color(srgb 1 1 1 1 1)"); // Way too many parameters test_invalid_value("color", "color(srgb 1 eggs 1)"); // Bad parameters test_invalid_value("color", "color(srgb 1 1 1 / bacon)"); // Bad alpha test_invalid_value("color", "color(srgb 1 1 1 / 1 cucumber)"); // Junk after alpha + +for (const colorSpace of [...RGB_SPACES, ...XYZ_SPACES]) { + test_invalid_value("color", `${colorSpace}(0 0 0)`); +} </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html index 40299644bf..2f815f8140 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html @@ -74,7 +74,7 @@ test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Missing interpolation method. } - for (const colorSpace of [ "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) { + for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) { test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) -10%, color(${colorSpace} .5 .6 .7))`); // Percentages less than 0 are not valid. test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 150%, color(${colorSpace} .5 .6 .7))`); // Percentages greater than 100 are not valid. test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7) 0%)`); // Sum of percengates cannot be 0%. diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html index 2cb3a25291..c6f1370abd 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html @@ -28,13 +28,15 @@ test_invalid_value(`color`, `rgb(from rebeccapurple l g b)`); test_invalid_value(`color`, `rgb(from rebeccapurple h g b)`); - // Testing invalid function name variation (only rgb() is valid, rgba() is invalid) - test_invalid_value(`color`, `rgba(from rebeccapurple r g b)`); - test_invalid_value(`color`, `rgba(from rgb(10%, 20%, 30%, 40%) r g b / alpha)`); + // Testing invalid separator + test_invalid_value(`color`, `rgb(from rebeccapurple, r, g, b)`); + test_invalid_value(`color`, `rgba(from rgb(10%, 20%, 30%, 40%), r, g, b, alpha)`); // Testing with calc(). test_invalid_value(`color`, `rgb(from rebeccapurple calc(r + 1%) g b)`); + // Using a channel keyword without being a relative color. + test_invalid_value(`color`, `rgb(0 0 0 / alpha)`); // hsl(from ...) @@ -47,9 +49,9 @@ test_invalid_value(`color`, `hsl(from rebeccapurple x s l)`); test_invalid_value(`color`, `hsl(from rebeccapurple h g b)`); - // Testing invalid function name variation (only hsl() is valid, hsla() is invalid) - test_invalid_value(`color`, `hsla(from rebeccapurple h s l)`); - test_invalid_value(`color`, `hsla(from rgb(10%, 20%, 30%, 40%) h s l / alpha)`); + // Testing invalid separator + test_invalid_value(`color`, `hsl(from rebeccapurple, h, s, l)`); + test_invalid_value(`color`, `hsla(from rgb(10%, 20%, 30%, 40%), h, s, l, alpha)`); // Testing with calc(). test_invalid_value(`color`, `hsl(from rebeccapurple calc(h + 1deg) s l)`); diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html index 90dd082f2a..08d4c6735a 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html @@ -22,6 +22,8 @@ tests = [ ["rgb(10%, 50%, 0)", "Values must be all numbers or all percentages"], ["rgb(255, 50%, 0%)", "Values must be all numbers or all percentages"], ["rgb(0, 0 0)", "Comma optional syntax requires no commas at all"], + ["rgb(,0, 0, 0)", "Leading commas are invalid"], + ["rgb(0, 0,, 0)", "Double commas are invalid"], ["rgb(0, 0, 0deg)", "Angles are not accepted in the rgb function"], ["rgb(0, 0, light)", "Keywords are not accepted in the rgb function"], ["rgb()", "The rgb function requires 3 or 4 arguments"], diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html index f11ecc8e47..cd1f381a1a 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html @@ -380,7 +380,7 @@ test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`); test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`); - for (const colorSpace of [ "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) { + for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) { const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`); diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html index 5f83f0f074..eb730b51c5 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html @@ -24,185 +24,189 @@ <body> <script> // rgb(from ...) + for (const rgbFunction of ["rgb", "rgba"]) { - // Testing no modifications. - fuzzy_test_valid_color(`rgb(from rebeccapurple r g b)`, `color(srgb 0.4 0.2 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / alpha)`, `color(srgb 0.4 0.2 0.6)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); - fuzzy_test_valid_color(`rgb(from hsl(120deg 20% 50% / .5) r g b / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`); + // Testing no modifications. + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from hsl(120deg 20% 50% / .5) r g b / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`); - // Test nesting relative colors. - fuzzy_test_valid_color(`rgb(from rgb(from rebeccapurple r g b) r g b)`, `color(srgb 0.4 0.2 0.6)`); + // Test nesting relative colors. + fuzzy_test_valid_color(`${rgbFunction}(from rgb(from rebeccapurple r g b) r g b)`, `color(srgb 0.4 0.2 0.6)`); - // Testing replacement with 0. - fuzzy_test_valid_color(`rgb(from rebeccapurple 0 0 0)`, `color(srgb 0 0 0)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple 0 0 0 / 0)`, `color(srgb 0 0 0 / 0)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple 0 g b / alpha)`, `color(srgb 0 0.2 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r 0 b / alpha)`, `color(srgb 0.4 0 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g 0 / alpha)`, `color(srgb 0.4 0.2 0)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 0 g b / alpha)`, `color(srgb 0 0.4 0.6 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 0 b / alpha)`, `color(srgb 0.2 0 0.6 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 0 / alpha)`, `color(srgb 0.2 0.4 0 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`); - - // Testing replacement with a number. - fuzzy_test_valid_color(`rgb(from rebeccapurple 25 g b / alpha)`, `color(srgb 0.098 0.2 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r 25 b / alpha)`, `color(srgb 0.4 0.098 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g 25 / alpha)`, `color(srgb 0.4 0.2 0.098)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / alpha)`, `color(srgb 0.098 0.4 0.6 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / alpha)`, `color(srgb 0.2 0.098 0.6 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / alpha)`, `color(srgb 0.2 0.4 0.098 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / .20)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); - - // Testing replacement with a percentage. - fuzzy_test_valid_color(`rgb(from rebeccapurple 20% g b / alpha)`, `color(srgb 0.2 0.2 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r 20% b / alpha)`, `color(srgb 0.4 0.2 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g 20% / alpha)`, `color(srgb 0.4 0.2 0.2)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / 20%)`, `color(srgb 0.4 0.2 0.6 / 0.2)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 20% g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 20% b / alpha)`, `color(srgb 0.2 0.2 0.6 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 20% / alpha)`, `color(srgb 0.2 0.4 0.2 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / 20%)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); - - // Testing replacement with a number for r, g, b but percent for alpha. - fuzzy_test_valid_color(`rgb(from rebeccapurple 25 g b / 25%)`, `color(srgb 0.098 0.2 0.6 / 0.25)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r 25 b / 25%)`, `color(srgb 0.4 0.098 0.6 / 0.25)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g 25 / 25%)`, `color(srgb 0.4 0.2 0.098 / 0.25)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / 25%)`, `color(srgb 0.098 0.4 0.6 / 0.25)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / 25%)`, `color(srgb 0.2 0.098 0.6 / 0.25)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / 25%)`, `color(srgb 0.2 0.4 0.098 / 0.25)`); - - // Testing permutation. - fuzzy_test_valid_color(`rgb(from rebeccapurple g b r)`, `color(srgb 0.2 0.6 0.4)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple b alpha r / g)`, `color(srgb 0.6 1 0.4 / 0.2)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r r r / r)`, `color(srgb 0.4 0.4 0.4 / 0.4)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple alpha alpha alpha / alpha)`, `color(srgb 1 1 1)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) g b r)`, `color(srgb 0.4 0.6 0.2 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) b alpha r / g)`, `color(srgb 0.6 0.8 0.2 / 0.4)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r r r / r)`, `color(srgb 0.2 0.2 0.2 / 0.2)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) alpha alpha alpha / alpha)`, `color(srgb 0.8 0.8 0.8 / 0.8)`); - - // Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax). - fuzzy_test_valid_color(`rgb(from rebeccapurple r 20% 10)`, `color(srgb 0.4 0.2 0.0392)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r 10 20%)`, `color(srgb 0.4 0.0392 0.2)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple 0% 10 10)`, `color(srgb 0 0.0392 0.0392)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 20% 10)`, `color(srgb 0.2 0.2 0.0392 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 10 20%)`, `color(srgb 0.2 0.0392 0.2 / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 0% 10 10)`, `color(srgb 0 0.0392 0.0392 / 0.8)`); - - // r g b - // 102 51 153 - // 40% 20% 60% - // Testing with calc(). - fuzzy_test_valid_color(`rgb(from rebeccapurple calc(r) calc(g) calc(b))`, `color(srgb 0.4 0.2 0.6)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r calc(g * 2) 10)`, `color(srgb 0.4 0.4 0.0392)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple b calc(r * .5) 10)`, `color(srgb 0.6 0.2 0.0392)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r calc(g * .5 + g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`); - fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) calc(r) calc(g) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + // Testing replacement with 0. + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0 0 0)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0 0 0 / 0)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0 g b / alpha)`, `color(srgb 0 0.2 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 0 b / alpha)`, `color(srgb 0.4 0 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 0 / alpha)`, `color(srgb 0.4 0.2 0)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 0 g b / alpha)`, `color(srgb 0 0.4 0.6 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 0 b / alpha)`, `color(srgb 0.2 0 0.6 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 0 / alpha)`, `color(srgb 0.2 0.4 0 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`); + + // Testing replacement with a number. + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 25 g b / alpha)`, `color(srgb 0.098 0.2 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 25 b / alpha)`, `color(srgb 0.4 0.098 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 25 / alpha)`, `color(srgb 0.4 0.2 0.098)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 25 g b / alpha)`, `color(srgb 0.098 0.4 0.6 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 25 b / alpha)`, `color(srgb 0.2 0.098 0.6 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 25 / alpha)`, `color(srgb 0.2 0.4 0.098 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / .20)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); + + // Testing replacement with a percentage. + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 20% g b / alpha)`, `color(srgb 0.2 0.2 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 20% b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 20% / alpha)`, `color(srgb 0.4 0.2 0.2)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / 20%)`, `color(srgb 0.4 0.2 0.6 / 0.2)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 20% g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 20% b / alpha)`, `color(srgb 0.2 0.2 0.6 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 20% / alpha)`, `color(srgb 0.2 0.4 0.2 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / 20%)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); + + // Testing replacement with a number for r, g, b but percent for alpha. + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 25 g b / 25%)`, `color(srgb 0.098 0.2 0.6 / 0.25)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 25 b / 25%)`, `color(srgb 0.4 0.098 0.6 / 0.25)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 25 / 25%)`, `color(srgb 0.4 0.2 0.098 / 0.25)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 25 g b / 25%)`, `color(srgb 0.098 0.4 0.6 / 0.25)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 25 b / 25%)`, `color(srgb 0.2 0.098 0.6 / 0.25)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 25 / 25%)`, `color(srgb 0.2 0.4 0.098 / 0.25)`); + + // Testing permutation. + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple g b r)`, `color(srgb 0.2 0.6 0.4)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple b alpha r / g)`, `color(srgb 0.6 0.004 0.4)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r r r / r)`, `color(srgb 0.4 0.4 0.4)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple alpha alpha alpha / alpha)`, `color(srgb 0.004 0.004 0.004)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) g b r)`, `color(srgb 0.4 0.6 0.2 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) b alpha r / g)`, `color(srgb 0.6 0.003 0.2)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r r r / r)`, `color(srgb 0.2 0.2 0.2)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) alpha alpha alpha / alpha)`, `color(srgb 0.003 0.003 0.003 / 0.8)`); + + // Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax). + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 20% 10)`, `color(srgb 0.4 0.2 0.0392)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 10 20%)`, `color(srgb 0.4 0.0392 0.2)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0% 10 10)`, `color(srgb 0 0.0392 0.0392)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 20% 10)`, `color(srgb 0.2 0.2 0.0392 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 10 20%)`, `color(srgb 0.2 0.0392 0.2 / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 0% 10 10)`, `color(srgb 0 0.0392 0.0392 / 0.8)`); + + // r g b + // 102 51 153 + // 40% 20% 60% + // Testing with calc(). + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple calc(r) calc(g) calc(b))`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r calc(g * 2) 10)`, `color(srgb 0.4 0.4 0.0392)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple b calc(r * .5) 10)`, `color(srgb 0.6 0.2 0.0392)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r calc(g * .5 + g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) calc(r) calc(g) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); - // Testing with 'none'. - fuzzy_test_valid_color(`rgb(from rebeccapurple none none none)`, `color(srgb none none none)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g none)`, `color(srgb 0.4 0.2 none)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g none / alpha)`, `color(srgb 0.4 0.2 none)`); - fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / none)`, `color(srgb 0.4 0.2 0.6 / none)`); - fuzzy_test_valid_color(`rgb(from rgb(20% 40% 60% / 80%) r g none / alpha)`, `color(srgb 0.2 0.4 none / 0.8)`); - fuzzy_test_valid_color(`rgb(from rgb(20% 40% 60% / 80%) r g b / none)`, `color(srgb 0.2 0.4 0.6 / none)`); - // FIXME: Clarify with spec editors if 'none' should pass through to the constants. - fuzzy_test_valid_color(`rgb(from rgb(none none none) r g b)`, `color(srgb 0 0 0)`); - fuzzy_test_valid_color(`rgb(from rgb(none none none / none) r g b / alpha)`, `color(srgb 0 0 0 / 0)`); - fuzzy_test_valid_color(`rgb(from rgb(20% none 60%) r g b)`, `color(srgb 0.2 0 0.6)`); - fuzzy_test_valid_color(`rgb(from rgb(20% 40% 60% / none) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0)`); + // Testing with 'none'. + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple none none none)`, `color(srgb none none none)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g none)`, `color(srgb 0.4 0.2 none)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g none / alpha)`, `color(srgb 0.4 0.2 none)`); + fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / none)`, `color(srgb 0.4 0.2 0.6 / none)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% 40% 60% / 80%) r g none / alpha)`, `color(srgb 0.2 0.4 none / 0.8)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% 40% 60% / 80%) r g b / none)`, `color(srgb 0.2 0.4 0.6 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`${rgbFunction}(from rgb(none none none) r g b)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(none none none / none) r g b / alpha)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% none 60%) r g b)`, `color(srgb 0.2 0 0.6)`); + fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% 40% 60% / none) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0)`); - // Testing with 'currentColor' - fuzzy_test_valid_color(`rgb(from currentColor r g b)`, `rgb(from currentColor r g b)`); + // Testing with 'currentColor' + fuzzy_test_valid_color(`${rgbFunction}(from currentColor r g b)`, `rgb(from currentColor r g b)`); - // color-mix - fuzzy_test_valid_color(`rgb(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`); + // color-mix + fuzzy_test_valid_color(`${rgbFunction}(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`); + } // hsl(from ...) + for (const hslFunction of ["hsl", "hsla"]) { - // Testing no modifications. - fuzzy_test_valid_color(`hsl(from rebeccapurple h s l)`, `color(srgb 0.4 0.2 0.6)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / alpha)`, `color(srgb 0.4 0.2 0.6)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); - fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`); + // Testing no modifications. + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s l / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`); - // Test nesting relative colors. - fuzzy_test_valid_color(`hsl(from hsl(from rebeccapurple h s l) h s l)`, `color(srgb 0.4 0.2 0.6)`); + // Test nesting relative colors. + fuzzy_test_valid_color(`${hslFunction}(from hsl(from rebeccapurple h s l) h s l)`, `color(srgb 0.4 0.2 0.6)`); - // Testing replacement with 0. - fuzzy_test_valid_color(`hsl(from rebeccapurple 0 0% 0%)`, `color(srgb 0 0 0)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple 0deg 0% 0%)`, `color(srgb 0 0 0)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple 0 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple 0deg 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h s 0% / alpha)`, `color(srgb 0 0 0)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s 0% / alpha)`, `color(srgb 0 0 0 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`); - - fuzzy_test_valid_color(`hsl(from rebeccapurple 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h 20% l / alpha)`, `color(srgb 0.4 0.32 0.48)`); - // hsl(from rebeccapurple h s 20% / alpha) is equivalent to color(srgb 0.2 0.1 0.3). - // For the green channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26. - // https://www.w3.org/TR/css-color-4/#rgb-functions - fuzzy_test_valid_color(`hsl(from rebeccapurple h s 20% / alpha)`, `color(srgb 0.2 0.1 0.3)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h 20% l / alpha)`, `color(srgb 0.32 0.4 0.48 / 0.8)`); - // hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha) is equivalent to color(srgb 0.1 0.2 0.3). - // For the red channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26. - // https://www.w3.org/TR/css-color-4/#rgb-functions - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha)`, `color(srgb 0.1 0.2 0.3 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / .2)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); + // Testing replacement with 0. + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0 0% 0%)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0deg 0% 0%)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0deg 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s 0% / alpha)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s 0% / alpha)`, `color(srgb 0 0 0 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s l / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`); + + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h 20% l / alpha)`, `color(srgb 0.4 0.32 0.48)`); + // hsl(from rebeccapurple h s 20% / alpha) is equivalent to color(srgb 0.2 0.1 0.3). + // For the green channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26. + // https://www.w3.org/TR/css-color-4/#rgb-functions + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s 20% / alpha)`, `color(srgb 0.2 0.1 0.3)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h 20% l / alpha)`, `color(srgb 0.32 0.4 0.48 / 0.8)`); + // hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha) is equivalent to color(srgb 0.1 0.2 0.3). + // For the red channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26. + // https://www.w3.org/TR/css-color-4/#rgb-functions + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha)`, `color(srgb 0.1 0.2 0.3 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s l / .2)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); - // Testing valid permutation (types match). - fuzzy_test_valid_color(`hsl(from rebeccapurple h l s)`, `color(srgb 0.5 0.3 0.7)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0 0.8 / 0.5)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56 / 0.4)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 1 1 1)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l s)`, `color(srgb 0.3 0.5 0.7 / 0.8)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.08 0.4 0.72 / 0.5)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56 / 0.4)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.64 0.8 0.96 / 0.8)`); + // Testing valid permutation (types match). + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h l s)`, `color(srgb 0.5 0.3 0.7)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0.396 0.404)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h l s)`, `color(srgb 0.3 0.5 0.7 / 0.8)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.4 0.4 0.4)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01 / 0.8)`); - // Testing with calc(). - fuzzy_test_valid_color(`hsl(from rebeccapurple calc(h) calc(s) calc(l))`, `color(srgb 0.4 0.2 0.6)`); - fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + // Testing with calc(). + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple calc(h) calc(s) calc(l))`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); - // Testing with 'none'. - fuzzy_test_valid_color(`hsl(from rebeccapurple none none none)`, `color(srgb none none none)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h s none)`, `color(srgb 0 0 none)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h s none / alpha)`, `color(srgb 0 0 none)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / none)`, `color(srgb 0.4 0.2 0.6 / none)`); - fuzzy_test_valid_color(`hsl(from rebeccapurple none s l / alpha)`, `color(srgb none 0.2 0.2)`); - fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) h s none / alpha)`, `color(srgb 0 0 none / 0.5)`); - fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) h s l / none)`, `color(srgb 0.4 0.6 0.4 / none)`); - fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) none s l / alpha)`, `color(srgb none 0.4 0.4 / 0.5)`); - // FIXME: Clarify with spec editors if 'none' should pass through to the constants. - fuzzy_test_valid_color(`hsl(from hsl(none none none) h s l)`, `color(srgb 0 0 0)`); - fuzzy_test_valid_color(`hsl(from hsl(none none none / none) h s l / alpha)`, `color(srgb 0 0 0 / 0)`); - fuzzy_test_valid_color(`hsl(from hsl(120deg none 50% / .5) h s l)`, `color(srgb 0.5 0.5 0.5 / 0.5)`); - fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / none) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0)`); - fuzzy_test_valid_color(`hsl(from hsl(none 20% 50% / .5) h s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`); + // Testing with 'none'. + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple none none none)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple none none none / none)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s none)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s none / alpha)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / none)`, `color(srgb 0.4 0.2 0.6 / none)`); + fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple none s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) h s none / alpha)`, `color(srgb 0 0 0 / 0.5)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) h s l / none)`, `color(srgb 0.4 0.6 0.4 / none)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) none s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`${hslFunction}(from hsl(none none none) h s l)`, `color(srgb 0 0 0)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(none none none / none) h s l / alpha)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg none 50% / .5) h s l)`, `color(srgb 0.5 0.5 0.5 / 0.5)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / none) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0)`); + fuzzy_test_valid_color(`${hslFunction}(from hsl(none 20% 50% / .5) h s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`); - // Testing with 'currentColor' - fuzzy_test_valid_color(`hsl(from currentColor h s l)`, `hsl(from currentColor h s l)`); + // Testing with 'currentColor' + fuzzy_test_valid_color(`${hslFunction}(from currentColor h s l)`, `hsl(from currentColor h s l)`); - // color-mix - fuzzy_test_valid_color(`hsl(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`); + // color-mix + fuzzy_test_valid_color(`${hslFunction}(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`); + } // hwb(from ...) @@ -245,28 +249,28 @@ // Testing valid permutation (types match). fuzzy_test_valid_color(`hwb(from rebeccapurple h b w)`, `color(srgb 0.6 0.4 0.8)`); - fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.8333 0.8333 0.8333 / 0.4)`); - fuzzy_test_valid_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8 / 0.2)`); - fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.405 0.01 0.8)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.01 0.99)`); fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h b w)`, `color(srgb 0.4 0.6 0.8 / 0.8)`); - fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.8 0.8 0.8 / 0.4)`); - fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8 / 0.2)`); - fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.01 0.404 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.5 0.99 / 0.8)`); // Testing with calc(). fuzzy_test_valid_color(`hwb(from rebeccapurple calc(h) calc(w) calc(b))`, `color(srgb 0.4 0.2 0.6)`); fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) calc(h) calc(w) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); // Testing with 'none'. - fuzzy_test_valid_color(`hwb(from rebeccapurple none none none)`, `color(srgb none none none)`); - fuzzy_test_valid_color(`hwb(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`); - fuzzy_test_valid_color(`hwb(from rebeccapurple h w none)`, `color(srgb 0.6 0.2 none)`); - fuzzy_test_valid_color(`hwb(from rebeccapurple h w none / alpha)`, `color(srgb 0.6 0.2 none)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple none none none)`, `color(srgb 1 0 0)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple none none none / none)`, `color(srgb 1 0 0 / none)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w none)`, `color(srgb 0.6 0.2 1)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w none / alpha)`, `color(srgb 0.6 0.2 1)`); fuzzy_test_valid_color(`hwb(from rebeccapurple h w b / none)`, `color(srgb 0.4 0.2 0.6 / none)`); - fuzzy_test_valid_color(`hwb(from rebeccapurple none w b / alpha)`, `color(srgb none 0.2 0.2)`); - fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) h w none / alpha)`, `color(srgb 0.2 1 none / 0.5)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple none w b / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) h w none / alpha)`, `color(srgb 0.2 1 0.2 / 0.5)`); fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) h w b / none)`, `color(srgb 0.2 0.5 0.2 / none)`); - fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) none w b / alpha)`, `color(srgb none 0.2 0.2 / 0.5)`); + fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) none w b / alpha)`, `color(srgb 0.5 0.2 0.2 / 0.5)`); // FIXME: Clarify with spec editors if 'none' should pass through to the constants. fuzzy_test_valid_color(`hwb(from hwb(none none none) h w b)`, `color(srgb 1 0 0)`); fuzzy_test_valid_color(`hwb(from hwb(none none none / none) h w b / alpha)`, `color(srgb 1 0 0 / 0)`); @@ -400,7 +404,7 @@ fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) calc(l) calc(a) calc(b))`, `oklab(0.25 0.2 0.5)`); fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `oklab(0.25 0.2 0.5 / 0.4)`); fuzzy_test_valid_color(`oklab(from oklab(0.7 0.25 -0.15) calc(l - 0.2) a b)`, `oklab(0.5 0.25 -0.15)`); - fuzzy_test_valid_color(`oklab(from oklab(0.7 0.25 -0.15) l calc(a / 2) calc(b / 3))`, `oklab(0.7 0.125 -0.075)`); + fuzzy_test_valid_color(`oklab(from oklab(0.7 0.25 -0.15) l calc(a / 2) calc(b / 3))`, `oklab(0.7 0.125 -0.05)`); // Testing with 'none'. fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) none none none)`, `oklab(none none none)`); diff --git a/testing/web-platform/tests/css/css-contain/quote-scoping-shadow-dom-crash.html b/testing/web-platform/tests/css/css-contain/quote-scoping-shadow-dom-crash.html new file mode 100644 index 0000000000..dd67e61952 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/quote-scoping-shadow-dom-crash.html @@ -0,0 +1,20 @@ +<!doctype html> +<link rel="help" href="http://crbug.com/329231572"> +<style> + #test { contain: style; } +</style> +<body> +<q id="test"></q> +<div> + <template shadowrootmode="open"> + <slot></slot> + </template> + <q id="test2"></q> +</div> +<script> + test.offsetTop; + test2.slot = "1"; + test2.appendChild(test); + test.offsetTop; +</script> +</body> diff --git a/testing/web-platform/tests/css/css-counter-styles/hebrew/counter-hebrew-nested-ref.html b/testing/web-platform/tests/css/css-counter-styles/hebrew/counter-hebrew-nested-ref.html index 7e725760e8..9ae6b5e011 100644 --- a/testing/web-platform/tests/css/css-counter-styles/hebrew/counter-hebrew-nested-ref.html +++ b/testing/web-platform/tests/css/css-counter-styles/hebrew/counter-hebrew-nested-ref.html @@ -12,54 +12,51 @@ <p></p> <div> <span>א.א</span> - <span>ב</span> - <span>ג</span> - <span>ד</span> - <span>ה</span> - <span>ו</span> - <span>ז</span> - <span>ח</span> - <span>ט</span> - <span>י</span> - <span>יא</span> - <span>יב</span> - <span>יג</span> - <span>יד</span> - <span>טו</span> - <span>טז</span> - <span>יז</span> - <span>יז.כ</span> - <span>יז.ל</span> - <span>יז.מ</span> - <span>יז.נ</span> - <span>יז.ס</span> - <span>יז.ע</span> - <span>יז.פ</span> - <span>יז.צ</span> - <span>יז.ק</span> - <span>יז.ר</span> - <span>יז.ש</span> - <span>יז.ת</span> - <span>יז.תק</span> - <span>יז.תר</span> - <span>יז.תש</span> - <span>יז.תת</span> - <span>יז.תתק</span> - <span>יז.א׳</span> - <span>יז.ב׳</span> - <span>יז.ג׳</span> - <span>יז.ד׳</span> - <span>יז.ה׳</span> - <span>יז.ו׳</span> - <span>יז.ז׳</span> - <span>יז.ח׳</span> - <span>יז.ט׳</span> - <span>יז.ט׳תתקצט</span> - <span>יז.תתקצט׳תתקצט</span> - <style> - #c18:before { counter-set: c 18; content: counter(c, hebrew); } - </style> - <span id="c18"></span> + <span>א.ב</span> + <span>א.ג</span> + <span>א.ד</span> + <span>א.ה</span> + <span>א.ו</span> + <span>א.ז</span> + <span>א.ח</span> + <span>א.ט</span> + <span>א.י</span> + <span>א.יא</span> + <span>א.יב</span> + <span>א.יג</span> + <span>א.יד</span> + <span>א.טו</span> + <span>א.טז</span> + <span>א.יז</span> + <span>א.כ</span> + <span>א.ל</span> + <span>א.מ</span> + <span>א.נ</span> + <span>א.ס</span> + <span>א.ע</span> + <span>א.פ</span> + <span>א.צ</span> + <span>א.ק</span> + <span>א.ר</span> + <span>א.ש</span> + <span>א.ת</span> + <span>א.תק</span> + <span>א.תר</span> + <span>א.תש</span> + <span>א.תת</span> + <span>א.תתק</span> + <span>א.א׳</span> + <span>א.ב׳</span> + <span>א.ג׳</span> + <span>א.ד׳</span> + <span>א.ה׳</span> + <span>א.ו׳</span> + <span>א.ז׳</span> + <span>א.ח׳</span> + <span>א.ט׳</span> + <span>א.ט׳תתקצט</span> + <span>א.תתקצט׳תתקצט</span> + <span>א.1000000</span> </div> </body> diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-crash.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-crash.html new file mode 100644 index 0000000000..09222296c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-crash.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/331646698"> +<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: min-content; align-items: baseline;"> + <div style="writing-mode: vertical-rl;">crash</div> +</div> diff --git a/testing/web-platform/tests/css/css-fonts/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-fonts/WEB_FEATURES.yml new file mode 100644 index 0000000000..5e69c923ab --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/WEB_FEATURES.yml @@ -0,0 +1,13 @@ +features: +- name: font-palette + files: + - font-palette.html + - font-palette-* + - palette-values-rule-* +- name: font-synthesis + files: + - font-synthesis-* +- name: font-variant-alternates + files: + - alternates-order.html + - font-variant-alternates-* diff --git a/testing/web-platform/tests/css/css-fonts/animations/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-fonts/animations/WEB_FEATURES.yml new file mode 100644 index 0000000000..f99e4bb4e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/animations/WEB_FEATURES.yml @@ -0,0 +1,6 @@ +features: +- name: font-palette-animation + files: + - font-palette-animation-not-specified-endpoints.html + - font-palette-interpolation.html + - multiple-elements-font-palette-animation.html diff --git a/testing/web-platform/tests/css/css-fonts/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-fonts/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..6a24d269b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/parsing/WEB_FEATURES.yml @@ -0,0 +1,14 @@ +features: +- name: font-optical-sizing + files: + - font-optical-sizing-* +- name: font-palette + files: + - font-palette-* + - font-palette-values-* +- name: font-synthesis + files: + - font-synthesis-* +- name: font-variant-alternates + files: + - font-variant-alternates-* diff --git a/testing/web-platform/tests/css/css-fonts/variations/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-fonts/variations/WEB_FEATURES.yml new file mode 100644 index 0000000000..c035a0ee11 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/variations/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: font-optical-sizing + files: + - variable-opsz* diff --git a/testing/web-platform/tests/css/css-grid/grid-fragmentation-between-rows-001-print-ref.tentative.html b/testing/web-platform/tests/css/css-grid/grid-fragmentation-between-rows-001-print-ref.tentative.html new file mode 100644 index 0000000000..78464712c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-fragmentation-between-rows-001-print-ref.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<div style="height:40vh"> + Test passes if there is two purple boxes on both page 1 and page 2 in print mode. (Ctrl+P, with "print backgrounds" enabled) +</div> +<div style="display:grid; grid-template-columns:1fr 1fr;"> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> +</div> +<div style="display:grid; grid-template-columns:1fr 1fr; break-before:page;"> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-fragmentation-between-rows-001-print.tentative.html b/testing/web-platform/tests/css/css-grid/grid-fragmentation-between-rows-001-print.tentative.html new file mode 100644 index 0000000000..01fd97528f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-fragmentation-between-rows-001-print.tentative.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#pagination"> +<link rel="match" href="./grid-fragmentation-between-rows-001-print-ref.tentative.html"> +<div style="height: 40vh"> + Test passes if there is two purple boxes on both page 1 and page 2 in print mode. (Ctrl+P, with "print backgrounds" enabled) +</div> +<div style="display: grid; grid-template-columns: 1fr 1fr;"> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> + <div style="contain:size; height:40vh;"> + <div style="height:40vh; width: 20vw; background:purple;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html index ab55502487..892dbe40b4 100644 --- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html @@ -36,26 +36,30 @@ function clamp(value, min, max) { } const minContent = 50; const maxContent = 100; -for (const percentage of [0, 50, 75, 100, 150]) { - const container = document.createElement("div"); - container.className = "container"; - document.body.appendChild(container); - const grid = document.createElement("div"); - grid.className = "grid"; - grid.style.gridTemplateColumns = `fit-content(${percentage}%)`; - container.appendChild(grid); - const item = document.createElement("div"); - item.className = "item"; - grid.appendChild(item); - test(function() { - const colSize = clamp(percentage * maxContent / 100, minContent, maxContent); - const height = colSize < maxContent ? maxContent : minContent; - assert_equals(item.offsetWidth, colSize, "Grid item width"); - assert_equals(item.offsetHeight, height, "Grid item height"); - assert_equals(grid.offsetWidth, maxContent, "Grid container width"); - assert_equals(grid.offsetHeight, height, "Grid container height"); - assert_equals(getComputedStyle(grid).gridTemplateColumns, colSize + "px", - "Grid column size"); - }, `fit-content(${percentage}%)`); +for (const use_calc of [false, true]) { + for (const percentage of [0, 50, 75, 100, 150]) { + const value = use_calc ? `fit-content(calc(0px + ${percentage}%))` + : `fit-content(${percentage}%)`; + const container = document.createElement("div"); + container.className = "container"; + document.body.appendChild(container); + const grid = document.createElement("div"); + grid.className = "grid"; + grid.style.gridTemplateColumns = value; + container.appendChild(grid); + const item = document.createElement("div"); + item.className = "item"; + grid.appendChild(item); + test(function() { + const colSize = clamp(percentage * maxContent / 100, minContent, maxContent); + const height = colSize < maxContent ? maxContent : minContent; + assert_equals(item.offsetWidth, colSize, "Grid item width"); + assert_equals(item.offsetHeight, height, "Grid item height"); + assert_equals(grid.offsetWidth, maxContent, "Grid container width"); + assert_equals(grid.offsetHeight, height, "Grid container height"); + assert_equals(getComputedStyle(grid).gridTemplateColumns, colSize + "px", + "Grid column size"); + }, value); + } } </script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/placement-invalidation-001.html b/testing/web-platform/tests/css/css-grid/subgrid/placement-invalidation-001.html new file mode 100644 index 0000000000..954880e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/placement-invalidation-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgridded item placement invalidation</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#track-sizing"> +<style> +html, body { + margin: 0; + padding: 0; +} +#grid { + width: 200px; + display: grid; + background: lightgray; + grid-template-columns: [start] auto [end] 1fr; + grid-template-rows: 100px; +} +#subgrid { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; +} +#item { + width: 50px; + background: lightblue; + border: 5px solid gray; + grid-column: start / end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="subgrid"> + <div id="item" data-offset-x="140"></div> + </div> +</div> +<script> +"use strict"; + +let grid = document.getElementById("grid"); +let item = document.getElementById("item"); + +// Computing an offset forces layout. +let item_offset = item.offsetLeft; + +grid.style.gridTemplateColumns = "1fr [start] auto [end]"; +item_offset = item.offsetLeft; +checkLayout("#item"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-button-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-button-ref.html new file mode 100644 index 0000000000..b6b5e6115c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-button-ref.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<style> +.grid { + display: grid; + width: 400px; + grid-template-columns: auto auto 1fr; + background-color: #ccc; +} +.button { + display: grid; + grid-template-columns: subgrid; + grid-column: span 3; + text-align: initial; + + background: transparent; + padding: 5px 10px; + margin: 0; + border: 2px solid; + font: inherit; +} +.right { + text-align: right; +} +</style> +<div class="grid"> + <div class="button"> + <span>hello</span> + <span>,</span> + <span class="right">world</span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-button.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-button.html new file mode 100644 index 0000000000..774702238f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-button.html @@ -0,0 +1,36 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrids"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1887867"> +<link rel="match" href="subgrid-button-ref.html"> +<title>Button subgrid</title> +<style> +.grid { + display: grid; + width: 400px; + grid-template-columns: auto auto 1fr; + background-color: #ccc; +} +.button { + display: grid; + grid-template-columns: subgrid; + grid-column: span 3; + text-align: initial; + + background: transparent; + padding: 5px 10px; + margin: 0; + border: 2px solid; + font: inherit; +} +.right { + text-align: right; +} +</style> +<div class="grid"> + <button class="button"> + <span>hello</span> + <span>,</span> + <span class="right">world</span> + </button> +</div> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-019-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-019-ref.html new file mode 100644 index 0000000000..2266233684 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-019-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Highlight API Reference: Non-overlapping highlight colors</title> +<style> + body { + text-decoration: 2px green underline; + } + #highlight { + color:blue; + text-decoration: 2px blue underline; + } +</style> +<body><span id="highlight">This part should be blue</span> and this part should be black diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-019.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-019.html new file mode 100644 index 0000000000..8c5ccbf020 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-019.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Highlight API Test: Non-overlapping highlight colors</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-text"> +<link rel="match" href="custom-highlight-painting-019-ref.html"> +<meta name="assert" value="When painting non-overlapping highlights the current color should be resolved against the next layer beneath the highlight at the current location within the span."> +<meta name="fuzzy" content="0-130;0-4"> +<style> + body { + text-decoration: 2px green underline; + } + ::highlight(foo) { + color:blue; + text-decoration: 2px blue underline; + } + ::highlight(bar) { + text-decoration-line: underline; + text-decoration-thickness: 2px; + } +</style> +<body>This part should be blue and this part should be black +<script> + let textNode = document.body.firstChild; + + let r1 = new Range(); + r1.setStart(textNode, 0); + r1.setEnd(textNode, 24); + + let r2 = new Range(); + r2.setStart(textNode, 29); + r2.setEnd(textNode, 54); + + let h1 = new Highlight(r1); + let h2 = new Highlight(r2); + + CSS.highlights.set("foo", h1); + CSS.highlights.set("bar", h2); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html b/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html index efb3b58d61..dbecb4a654 100644 --- a/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html +++ b/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html @@ -24,29 +24,29 @@ test_computed_value( 'background-image', 'cross-fade(30% color-mix(in srgb, currentcolor, blue), white)', - 'cross-fade(30% color(srgb 0.5 0 0.5), rgb(255, 255, 255))'); + 'cross-fade(color(srgb 0.5 0 0.5) 30%, rgb(255, 255, 255))'); // Unneccessary percentages should be kept. test_computed_value('background-image', 'cross-fade(50% red, 50% green)', - 'cross-fade(50% rgb(255, 0, 0), 50% rgb(0, 128, 0))'); + 'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%)'); // Percentage normalization should not be visible computed-value time. test_computed_value('background-image', 'cross-fade(20% red, 20% green)', - 'cross-fade(20% rgb(255, 0, 0), 20% rgb(0, 128, 0))'); + 'cross-fade(rgb(255, 0, 0) 20%, rgb(0, 128, 0) 20%)'); // More than two values. test_computed_value('background-image', 'cross-fade(50% red, 50% green, 50% blue)', - 'cross-fade(50% rgb(255, 0, 0), 50% rgb(0, 128, 0), 50% rgb(0, 0, 255))'); + 'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%, rgb(0, 0, 255) 50%)'); // More-than-100% should be invalid, but in calc() we can't reject it parse-time; // it will be clamped on serialization. test_computed_value('background-image', 'cross-fade(calc(101%) red, green)', - 'cross-fade(100% rgb(255, 0, 0), rgb(0, 128, 0))'); + 'cross-fade(rgb(255, 0, 0) 100%, rgb(0, 128, 0))'); test_computed_value('background-image', 'cross-fade(calc(-200%) red, green)', - 'cross-fade(0% rgb(255, 0, 0), rgb(0, 128, 0))'); + 'cross-fade(rgb(255, 0, 0) 0%, rgb(0, 128, 0))'); </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html new file mode 100644 index 0000000000..28d57bc19c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop"> +<link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#light-dark"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#color-mix"> +<title>Reference: Test changing used color-scheme updates gradient with color-scheme dependent color stops.</title> +<style> + +.box { + color-scheme: dark; + + width: 100px; + height: 100px; +} + +#system-color { + background-image: linear-gradient(CanvasText, CanvasText); +} + +#system-color-in-color-mix { + background-image: linear-gradient(color-mix(in lch, Canvas, pink), color-mix(in lch, Canvas, pink)); +} + +#light-dark { + background-image: linear-gradient(light-dark(red, green), light-dark(red, green)); +} + +#light-dark-in-color-mix { + background-image: linear-gradient(color-mix(in lch, light-dark(red, green), pink), color-mix(in lch, light-dark(red, green), pink)); +} + +</style> +</head> +<body> +<p>Test system color</p> +<div id="system-color" class="box"></div> +<p>Test system color in color-mix()</p> +<div id="system-color-in-color-mix" class="box"></div> +<p>Test light-dark()</p> +<div id="light-dark" class="box"></div> +<p>Test light-dark() in color-mix()</p> +<div id="light-dark-in-color-mix" class="box"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html new file mode 100644 index 0000000000..f95a557703 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop"> +<link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#light-dark"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#color-mix"> +<title>Test changing used color-scheme updates gradient with color-scheme dependent color stops.</title> +<link rel="match" href="color-scheme-dependent-color-stops-ref.html"> +<style> + +.dark { + color-scheme: dark; +} + +.box { + width: 100px; + height: 100px; +} + +#system-color { + background-image: linear-gradient(CanvasText, CanvasText); +} + +#system-color-in-color-mix { + background-image: linear-gradient(color-mix(in lch, Canvas, pink), color-mix(in lch, Canvas, pink)); +} + +#light-dark { + background-image: linear-gradient(light-dark(red, green), light-dark(red, green)); +} + +#light-dark-in-color-mix { + background-image: linear-gradient(color-mix(in lch, light-dark(red, green), pink), color-mix(in lch, light-dark(red, green), pink)); +} + +</style> +</head> +<body> +<p>Test system color</p> +<div id="system-color" class="box"></div> +<p>Test system color in color-mix()</p> +<div id="system-color-in-color-mix" class="box"></div> +<p>Test light-dark()</p> +<div id="light-dark" class="box"></div> +<p>Test light-dark() in color-mix()</p> +<div id="light-dark-in-color-mix" class="box"></div> +<script> + +requestAnimationFrame(() => { + document.querySelectorAll(".box").forEach((box) => { + box.classList.add("dark"); + }); + + document.documentElement.className = ''; +}); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html new file mode 100644 index 0000000000..cf47c75834 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in HSL space</title> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in hsl shorter hue 0deg, hsl(0, 100%, 50%) 0%, hsl(120, 100%, 50%) 33.3333%, hsl(240, 100%, 50%) 66.6667%, hsl(0, 100%, 50%) 100%); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html new file mode 100644 index 0000000000..bbadccb53e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html @@ -0,0 +1,28 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in HSL space</title> + <meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-90000"> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests that a multi-stop shorter hue gradient and a single-stop longer hue (wrapping) gradient match in appearance"> + <link rel="match" href="gradient-single-stop-longer-hue-hsl-ref.html"> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in hsl longer hue 0deg, hsl(0, 100%, 50%) 0 0); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html new file mode 100644 index 0000000000..c3f51781c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in OKLCH space</title> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in oklch shorter hue 0deg, oklch(0.62796 0.25768 29.23388) 0%, oklch(0.62796 0.25768 149.23388) 33.3333%, oklch(0.62796 0.25768 269.23388) 66.6667%, oklch(0.62796 0.25768 29.23388) 100%); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html new file mode 100644 index 0000000000..abe6604fc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html @@ -0,0 +1,28 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in OKLCH space</title> + <meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-90000"> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests that a multi-stop shorter hue gradient and a single-stop longer hue (wrapping) gradient match in appearance"> + <link rel="match" href="gradient-single-stop-longer-hue-oklch-ref.html"> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in oklch longer hue 0deg, oklch(0.62796 0.25768 29.23388) 0 0); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch-ref.html b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch-ref.html new file mode 100644 index 0000000000..a5e1554be1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch-ref.html @@ -0,0 +1,47 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Repeating linear gradients in HSL and OKLCH space</title> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <style> + body { + background: #fff; + } + + .a { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + hsl(180 50% 70%) 0px 20px, + hsl(0 50% 50%) 20px 40px, + hsl(180 50% 70%) 40px 60px, + hsl(0 50% 50%) 60px 80px, + hsl(180 50% 70%) 80px 100px + ); + } + + .b { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + oklch(70% 50% 180) 0px 20px, + oklch(50% 50% 0) 20px 40px, + oklch(70% 50% 180) 40px 60px, + oklch(50% 50% 0) 60px 80px, + oklch(70% 50% 180) 80px 100px + ); + } + </style> +</head> + +<body> + <p>repeating-linear-gradient with HSL</p> + <div class="a"></div> + <p>repeating-linear-gradient with OKLCH</p> + <div class="b"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html new file mode 100644 index 0000000000..71e615d919 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Repeating linear gradients in HSL and OKLCH space</title> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests that a multi-stop shorter hue gradient and a single-stop longer hue (wrapping) gradient match in appearance"> + <link rel="match" href="repeating-gradient-hsl-and-oklch-ref.html"> + <style> + body { + background: #fff; + } + + .a { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + hsl(180 50% 70%) 0px 20px, + hsl(0 50% 50%) 20px 40px + ); + } + + .b { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + oklch(70% 50% 180) 0px 20px, + oklch(50% 50% 0) 20px 40px + ); + } + </style> +</head> + +<body> + <p>repeating-linear-gradient with HSL</p> + <div class="a"></div> + <p>repeating-linear-gradient with OKLCH</p> + <div class="b"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html index 4fc498a27b..2dfe344ce3 100644 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html +++ b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html @@ -2,7 +2,6 @@ <title>Reference for trimming block-boxes at their first/last formatted lines</title> <link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<link rel="match" href="text-box-trim-half-leading-inline-box-001-ref.html"> <style> .div-parent { diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html index 9ad9ffc3fc..2cbf1c26db 100644 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html +++ b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html @@ -2,7 +2,7 @@ <title>Tests block boxes's edges are trimmed at text-over/text-under baselines of their first/last formatted lines</title> <link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<link rel="match" href="text-box-trim-half-leading-inline-box-001-ref.html"> +<link rel="match" href="text-box-trim-half-leading-block-box-001-ref.html"> <style> .div-parent { diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-001-ref.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-001-ref.html deleted file mode 100644 index 54df108fb9..0000000000 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-001-ref.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<title>Reference for trimming inline boxes</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> - -<style> -div { - border: 1px solid orange; - font-size: 20px; - line-height: 1; -} - -span { - border: 1px solid blue; - border-right: 0; - border-left: 0; - font-family: Ahem; - font-size: 20px; - line-height: 1; -} -</style> - -<div> - <span>Test</span> -</div> -<div> - <span>Test<br><br></span> -</div> -<div> - <span><br>Test</span> -</div> diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-001.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-001.html deleted file mode 100644 index 130b68c6eb..0000000000 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-001.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<title>Tests inline boxes are trimmed at text-over/text-under baselines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<link rel="match" href="text-box-trim-half-leading-inline-box-001-ref.html"> - -<style> -div { - border: 1px solid orange; - font-size: 20px; - line-height: 1; -} - -span { - border: 1px solid blue; - border-right: 0; - border-left: 0; - font-family: Ahem; - font-size: 20px; - line-height: 3; -} -</style> - -<div> - <span style="text-box-trim:both">Test</span> -</div> -<div> - <span style="text-box-trim:start">Test</span> -</div> -<div> - <span style="text-box-trim:end">Test</span> -</div> diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-002-ref.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-002-ref.html deleted file mode 100644 index 0a615e6222..0000000000 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-002-ref.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<title>Reference for trimming multi-line text in inline boxes</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> - -<style> -div { - border: 1px solid orange; - font-size: 20px; - line-height: 1; -} - -span { - border: 1px solid blue; - border-right: 0; - border-left: 0; - font-family: Ahem; - font-size: 20px; - line-height: 1; -} -</style> - -<div> - <span>Testline1<br>TestLine2<br>TestLine3</span> -</div> -<div> - <span>Testline1<br><br>TestLine2<br><br>TestLine3<br><br></span> -</div> -<div> - <span><br>Testline1<br><br>TestLine2<br><br>TestLine3</span> -</div> diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-002.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-002.html deleted file mode 100644 index 631b53697c..0000000000 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-002.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<title>Tests inline boxes with multi-line text are trimmed at text-over/text-under baselines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<link rel="match" href="text-box-trim-half-leading-inline-box-002-ref.html"> - -<style> -div { - border: 1px solid orange; - font-size: 20px; - line-height: 1; -} - -span { - border: 1px solid blue; - border-right: 0; - border-left: 0; - font-family: Ahem; - font-size: 20px; - line-height: 3; -} - -</style> - -<div> - <span style="text-box-trim: both">Testline1<br>TestLine2<br>TestLine3</span> -</div> -<div> - <span style="text-box-trim: start">Testline1<br>TestLine2<br>TestLine3</span> -</div> -<div> - <span style="text-box-trim: end">Testline1<br>TestLine2<br>TestLine3</span> -</div> diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-003-ref.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-003-ref.html deleted file mode 100644 index bf0fb3283d..0000000000 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-003-ref.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<title>Reference for trimming inline boxes</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> - -<style> -div { - border: 1px solid orange; - font-size: 20px; - line-height: 1; - writing-mode:vertical-lr; -} - -span { - border: 1px solid blue; - border-top: 0; - border-bottom: 0; - font-family: Ahem; - font-size: 20px; - line-height: 1; -} -</style> - -<div> - <span>Test</span> -</div> -<div> - <span>Test<br><br></span> -</div> -<div> - <span><br>Test</span> -</div> diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-003.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-003.html deleted file mode 100644 index 4c7e33663b..0000000000 --- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-inline-box-003.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<title>Tests inline boxes are trimmed at text-over/text-under baselines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<link rel="match" href="text-box-trim-half-leading-inline-box-003-ref.html"> - -<style> -div { - border: 1px solid orange; - font-size: 20px; - line-height: 1; - writing-mode:vertical-lr; -} - -span { - border: 1px solid blue; - border-top: 0; - border-bottom: 0; - font-family: Ahem; - font-size: 20px; - line-height: 3; -} -</style> - -<div> - <span style="text-box-trim:both">Test</span> -</div> -<div> - <span style="text-box-trim:start">Test</span> -</div> -<div> - <span style="text-box-trim:end">Test</span> -</div> diff --git a/testing/web-platform/tests/css/css-logical/animations/margin-block-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/margin-block-interpolation.html new file mode 100644 index 0000000000..be4b6fdd8e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animations/margin-block-interpolation.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>margin-block interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<meta name="assert" content="margin-block supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_interpolation({ + property: 'margin-block', + from: '10px', + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-logical/animations/margin-inline-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/margin-inline-interpolation.html new file mode 100644 index 0000000000..86408ea6e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animations/margin-inline-interpolation.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>margin-inline interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-inline"> +<meta name="assert" content="margin-inline supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_interpolation({ + property: 'margin-inline', + from: '10px', + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape.html b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape.html index ad3e2a0bdb..638e133c26 100644 --- a/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape.html +++ b/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape.html @@ -1,10 +1,10 @@ <!DOCTYPE html> <meta charset="UTF-8"> -<meta charset="UTF-8"> <title>clip-path-interpolation</title> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> -<meta name="assert" content="clip-path supports animation"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#interpolating-shape"> +<meta name="assert" content="clip-path supports animation for shape()"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -83,7 +83,6 @@ test_no_interpolation({ to: 'shape(from 10px 10px, close)', }); - test_interpolation({ property: 'clip-path', from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)', @@ -116,6 +115,7 @@ test_interpolation({ {at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px via -3% 86px, curve by 33% 17px via 17% 53px 34% 61px)'}, {at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)'}, {at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px via 5% 70px, curve by 25% 25px via 25% 45px 10% 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'}, {at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'}, ]); @@ -127,6 +127,7 @@ test_interpolation({ {at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px via -3% 86px, smooth to 33% 17px)'}, {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'}, {at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px via 5% 70px, smooth to 25% 25px)'}, + {at: 1, expect: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)'}, {at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'}, ]); @@ -138,6 +139,7 @@ test_interpolation({ {at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px via -3% 86px, smooth by 33% 17px)'}, {at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)'}, {at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px via 5% 70px, smooth by 25% 25px)'}, + {at: 1, expect: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)'}, {at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'}, ]); @@ -149,14 +151,14 @@ test_interpolation({ {at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px ccw small, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px ccw small)'}, {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, {at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px ccw small, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px ccw small )'}, - {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw small, arc to 25% 20px of 10px 5px cw small)'}, + {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw large, arc to 25% 20px of 10px 5px cw small)'}, {at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px rotate 270deg cw small, arc to 25% 20px of 10px 5px cw small)'}, {at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px ccw small, arc by 30% -20px of 15px rotate 390deg cw small, arc to 25% 20px of 10px 5px cw small)'}, ]); test_interpolation({ property: 'clip-path', - from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 1vh, close, vline by 3pt)', + from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 8.25px, close, vline by 3pt)', to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)', }, [ {at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'}, @@ -166,5 +168,115 @@ test_interpolation({ {at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'}, ]); +test_no_interpolation({ + property: 'clip-path', + from: 'shape(from 10px 10px, move to 10% 10%)', + to: 'path("M10 10 z")', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'path("M10 10 M10 10")', + to: 'shape(from 10px 10px, close)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'path("M10 10 h 5")', + to: 'shape(from 10px 10px, hline to 5px)', +}); + +test_no_interpolation({ + property: 'clip-path', + from: 'shape(nonzero from 10px 10px, move to 10% 10%)', + to: 'path(evenodd, "M0 0 M20 20")', +}); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)', + to: 'path("M 15 15 H 25 V -15 Z")', +}, [ + {at: -0.3, expect: 'shape(from 2px 2px, hline to -1px, vline to -2px, close)'}, + {at: 0, expect: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)'}, + {at: 0.5, expect: 'shape(from 10px 10px, hline to 15px, vline to -10px, close)'}, + {at: 1, expect: 'shape(from 15px 15px, hline to 25px, vline to -15px, close)'}, + {at: 1.5, expect: 'shape(from 20px 20px, hline to 35px, vline to -20px, close)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)', + to: 'path("M 15 15 Q 10 60 20 0 C 30 40 -5 100 20 30")', +}, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, curve to calc(13% - 6px) 13px via calc(0% - 3px) 86px, curve to calc(39% - 6px) 17px via calc(26% - 9px) 53px calc(32.5% + 1.5px) 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, curve to calc(5% + 10px) 5px via calc(0% + 5px) 70px, curve to calc(15% + 10px) 25px via calc(10% + 15px) 45px calc(12.5% - 2.5px) 85px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, curve to calc(0% + 20px) 0px via calc(0% + 10px) 60px, curve to calc(0% + 20px) 30px via calc(0% + 30px) 40px calc(0% - 5px) 100px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, curve to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, curve to calc(-15% + 30px) 35px via calc(-10% + 45px) 35px calc(-12.5% - 7.5px) 115px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'path("M 5 5 q 0 80 10 10 c 20 50 25 70 30 20")', + to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)', +}, [ + {at: -0.3, expect: 'shape(from calc(-4.5% + 6.5px) 2px, curve by calc(-6% + 13px) 13px via -3% 86px, curve by calc(-6% + 39px) 17px via calc(-9% + 26px) 53px calc(1.5% + 32.5px) 61px)'}, + {at: 0, expect: 'shape(from calc(0% + 5px) 5px, curve by calc(0% + 10px) 10px via 0% 80px, curve by calc(0% + 30px) 20px via calc(0% + 20px) 50px calc(0% + 25px) 70px)'}, + {at: 0.5, expect: 'shape(from calc(7.5% + 2.5px) 10px, curve by calc(10% + 5px) 5px via 5% 70px, curve by calc(10% + 15px) 25px via calc(15% + 10px) 45px calc(-2.5% + 12.5px) 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'}, + {at: 1.5, expect: 'shape(from calc(22.5% - 2.5px) 20px, curve by calc(30% - 5px) -5px via 15% 50px, curve by calc(30% - 15px) 35px via calc(45% - 10px) 35px calc(-7.5% - 12.5px) 115px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)', + to: 'path("M 15 15 S 10 60 20 0 T 20 30")', +}, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, smooth to calc(13% - 6px) 13px via calc(0% - 3px) 86px, smooth to calc(39% - 6px) 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, smooth to calc(5% + 10px) 5px via calc(0% + 5px) 70px, smooth to calc(15% + 10px) 25px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, smooth to calc(0% + 20px) 0px via calc(0% + 10px) 60px, smooth to calc(0% + 20px) 30px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, smooth to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, smooth to calc(-15% + 30px) 35px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'path("M 5 5 s 0 80 10 10 t 30 20")', + to: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)', +}, [ + {at: -0.3, expect: 'shape(from 2px 2px, smooth by 7px 13px via -3px 86px, smooth by 33px 17px)'}, + {at: 0, expect: 'shape(from 5px 5px, smooth by 10px 10px via 0px 80px, smooth by 30px 20px)'}, + {at: 0.5, expect: 'shape(from 10px 10px, smooth by 15px 5px via 5px 70px, smooth by 25px 25px)'}, + {at: 1, expect: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)'}, + {at: 1.5, expect: 'shape(from 20px 20px, smooth by 25px -5px via 15px 50px, smooth by 15px 35px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', + to: 'path("M 15 15 A 20,30 0 0,0 5,-25 a 20,20 270 0,1 25,-15 A 10,5 0 0,0 25 20")', +}, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, arc to calc(19.5% - 1.5px) -12px of 7px 17px, arc by calc(19.5% - 7.5px) -2px of 33px cw large rotate -42deg, arc to calc(32.5% - 7.5px) 20px of 10px 5px)'}, + {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from calc(3.5% + 4.5px) 8px, arc to calc(10.5% + 1.5px) -18px of 13px 23px, arc by calc(10.5% + 7.5px) -8px of 27px cw large rotate 102deg, arc to calc(17.5% + 7.5px) 20px of 10px 5px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, arc to calc(7.5% + 2.5px) -20px of 15px 25px, arc by calc(7.5% + 12.5px) -10px of 25px cw large rotate 150deg, arc to calc(12.5% + 12.5px) 20px of 10px 5px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, arc to calc(0% + 5px) -25px of 20px 30px, arc by calc(0% + 25px) -15px of 20px cw rotate 270deg, arc to calc(0% + 25px) 20px of 10px 5px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, arc to calc(-7.5% + 7.5px) -30px of 25px 35px, arc by calc(-7.5% + 37.5px) -20px of 15px cw rotate 390deg, arc to calc(-12.5% + 37.5px) 20px of 10px 5px)'}, +]); + +test_interpolation({ + property: 'clip-path', + from: 'path("M 5 5 A 10,20 0 0,0 15,-15 a 30,30 30 1,1 15,-5 A 10,5 0 0,0 25 20")', + to: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px cw rotate 270deg small, arc to 25px 20px of 10px 5px small cw)' +}, [ + {at: -0.3, expect: 'shape(from 2px 2px, arc to 18px -12px of 7px 17px ccw small, arc by 12px -2px of 33px 33px rotate -42deg cw large , arc to 25px 20px of 10px 5px ccw small)'}, + {at: 0, expect: 'shape(from 5px 5px, arc to 15px -15px of 10px 20px, arc by 15px -5px of 30px cw rotate 30deg large, arc to 25px 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from 8px 8px, arc to 12px -18px of 13px 23px ccw small, arc by 18px -8px of 27px 27px rotate 102deg cw large, arc to 25px 20px of 10px 5px ccw small )'}, + {at: 0.5, expect: 'shape(from 10px 10px, arc to 10px -20px of 15px 25px ccw small, arc by 20px -10px of 25px rotate 150deg cw large, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1, expect: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px rotate 270deg cw small, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1.5, expect: 'shape(from 20px 20px, arc to 0px -30px of 25px 35px ccw small, arc by 30px -20px of 15px rotate 390deg cw small, arc to 25px 20px of 10px 5px cw small)'}, +]); + </script> </body> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html new file mode 100644 index 0000000000..1324aad97f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path interpolation from shape() to path()</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="clip-path-path-interpolation-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test the interpolation of nonzero + shape and path function."> + <style> + @keyframes anim { + from { + clip-path: shape(nonzero from 20px 20px, + hline by 60px, vline by 60px, hline by -60%, close, + move to 30% 30px, hline by 40px, vline by 40px, hline by -40px, close); + } + to { + clip-path: path(nonzero, "M50 50 h50 v50 h-50 z M20 20 h50 v50 h-50 z"); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html new file mode 100644 index 0000000000..69bec3c097 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-shape-interpolation-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>CSS Masking: Test clip-path interpolation from path() to shape()</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="clip-path-path-interpolation-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test the interpolation of evenodd + path and shape function."> + <style> + @keyframes anim { + from { + clip-path: path(evenodd, "M20 20 h60 v60 h-60 z M30 30 h40 v40 h-40 z"); + } + to { + clip-path: shape(evenodd from 50px 50px, + hline by 50px, vline by 50px, hline by -50%, close, + move to 20px 20%, hline by 50px, vline by 50px, hline by -50px, close); + } + } + #rect { + width: 100px; + height: 100px; + background-color: green; + animation: anim 10s -5s paused linear; + } + </style> +</head> +<body> + <div id="rect"></div> +</body> +<script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html index 30ceefcbc0..ff85e8ff80 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html @@ -10,7 +10,7 @@ width: 100px; height: 100px; background-color: green; - clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0'); + clip-path: path(nonzero, 'M0,0 L100,0 L0,100 L0,0'); zoom: 2; } </style> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html index 5879917f36..981519d22b 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-path-with-zoom.html @@ -15,7 +15,7 @@ width: 100px; height: 100px; background-color: green; - clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0'); + clip-path: path(nonzero, 'M0,0 L100,0 L0,100 L0,0'); zoom: 2; } </style> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html index c92702d8e7..03e1b21d17 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-scaled-video.html @@ -14,32 +14,32 @@ </clipPath> <g clip-path="url(#clip)" transform="scale(0.112)"> <foreignObject width="320" height="240"> - <video src="/media/test.ogv" autoplay loop></video> + <video src="/media/test.webm" autoplay loop></video> </foreignObject> </g> <g clip-path="url(#clip)" transform="scale(0.345)"> <foreignObject width="320" height="240"> - <video src="/media/test.ogv" autoplay loop></video> + <video src="/media/test.webm" autoplay loop></video> </foreignObject> </g> <g clip-path="url(#clip)" transform="scale(0.778)"> <foreignObject width="320" height="240"> - <video src="/media/test.ogv" autoplay loop></video> + <video src="/media/test.webm" autoplay loop></video> </foreignObject> </g> <g clip-path="url(#clip)" transform="scale(0.912)"> <foreignObject width="320" height="240"> - <video src="/media/test.ogv" autoplay loop></video> + <video src="/media/test.webm" autoplay loop></video> </foreignObject> </g> <g clip-path="url(#clip)" transform="scale(1.678)"> <foreignObject width="320" height="240"> - <video src="/media/test.ogv" autoplay loop></video> + <video src="/media/test.webm" autoplay loop></video> </foreignObject> </g> <g clip-path="url(#clip)" transform="scale(3.333)"> <foreignObject width="320" height="240"> - <video src="/media/test.ogv" oncanplaythrough="takeScreenshot()" autoplay loop></video> + <video src="/media/test.webm" oncanplaythrough="takeScreenshot()" autoplay loop></video> </foreignObject> </g> </svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html index 22e7d9aaf5..ef03f85b28 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-003.html @@ -8,15 +8,6 @@ 'shape()' for clipping. Test curves."> </head> <style> - div { - width: 100px; - height: 100px; - } - #ref { - clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10"); - background-color: red; - position: absolute; - } #rect { width: 100px; height: 100px; @@ -29,8 +20,6 @@ } </style> <body> - <p>You should see no red.</p> - <div id="ref"></div> <div id="rect"></div> </body> </html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html index 14e3ba6329..1da9177de5 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-004.html @@ -8,15 +8,6 @@ 'shape()' for clipping. Test arcs."> </head> <style> - div { - width: 100px; - height: 100px; - } - #ref { - clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20"); - background-color: red; - position: absolute; - } #rect { width: 100px; height: 100px; @@ -28,8 +19,6 @@ } </style> <body> - <p>You should see no red.</p> - <div id="ref"></div> <div id="rect"></div> </body> </html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html new file mode 100644 index 0000000000..44e358bb59 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-005.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with padding-box</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="reference/clip-path-path-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test the usage of the reference box. On pass you + should see a green square."> +</head> +<style> + #rect { + /* The size of the padding-box is 100x100. */ + width: 120px; + height: 120px; + padding: 10px; + border: 10px solid red; + box-sizing: border-box; + background-color: green; + clip-path: shape(from 0px 0px, + hline by 80px, vline by 80%, hline by -80%, close) + padding-box; + } +</style> +<body> + <p>The test passes if there are a green filled rect.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html new file mode 100644 index 0000000000..7f6db73ebd --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-006.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and shape function with content-box</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> + <link rel="match" href="reference/clip-path-path-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'shape()' for clipping. Test the usage of the reference box. On pass you + should see a green square."> +</head> +<style> + #rect { + width: 140px; + height: 140px; + padding: 10px; + border: 10px solid red; + box-sizing: border-box; + background-color: green; + /* The size of the content-box is 100x100. */ + clip-path: shape(from -10px -10%, + hline by 80px, vline by 80%, hline by -80%, close) + content-box; + } +</style> +<body> + <p>The test passes if there are a green filled rect.</p> + <div id="rect"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html index ef91c619c4..76b6e473f0 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html @@ -6,7 +6,7 @@ width: 200px; height: 200px; background: green; - clip-path: path(nonzero, 'M0 0, L200 0, L0 200'); + clip-path: path(nonzero, 'M0,0 L200,0 L0,200'); } </style> <div id="rect"></div> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html index 46e098c4eb..8d6173464c 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html @@ -5,18 +5,14 @@ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> </head> <style> - div { + #ref { width: 100px; height: 100px; - } - #ref { background-color: green; - clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10"); - position: absolute; + clip-path: path(nonzero, "M 10 10 Q 40 0 60 20 T 90 0 c 10 40 20 20 -20 60 s -10 70 -40 -10"); } </style> <body> - <p>You should see no red.</p> <div id="ref"></div> </body> </html> diff --git a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html index ec8f941079..b74e6abdd9 100644 --- a/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html +++ b/testing/web-platform/tests/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html @@ -5,18 +5,14 @@ <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> </head> <style> - div { + #ref { width: 100px; height: 100px; - } - #ref { background-color: green; - clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20"); - position: absolute; + clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20 a 33 33 120 1 1 -40 50 A 20 25 0 0 0 20 20"); } </style> <body> - <p>You should see no red.</p> <div id="ref"></div> </body> </html> diff --git a/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html b/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html index 40020d91d4..e9a84e8e9c 100644 --- a/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html +++ b/testing/web-platform/tests/css/css-masking/parsing/clip-path-invalid.html @@ -51,6 +51,7 @@ test_invalid_value("clip-path", 'path(evenodd, "")'); test_invalid_value("clip-path", 'path(abc, "m 20 0 h -100 z")'); test_invalid_value("clip-path", 'path(nonzero)'); test_invalid_value("clip-path", 'path("m 20 0 h -100", nonzero)'); +test_invalid_value("clip-path", "path(nonzero, 'M0 0, L100 0, L0 100, L 0 0');"); test_invalid_value("clip-path", "xywh(0px)"); test_invalid_value("clip-path", "xywh(0px 1%)"); diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/block-in-inline-become-float.html b/testing/web-platform/tests/css/css-multicol/crashtests/block-in-inline-become-float.html new file mode 100644 index 0000000000..6d557b7c3a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/block-in-inline-become-float.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="http://crbug.com/329674902"> +<div style="width:10px; line-height:20px; columns:3; gap:0; height:40px; column-fill:auto; orphans:1; widows:1;"> + <br> + <span> + <div id="trouble" style="contain:size; width:100%; height:100px;"></div> + xxxxxxxxxxxxxxxxxxxxxxxx + xxxxxxxxxxxxxxxxxxxxxxxx + </span> + <script> + document.body.offsetTop; + trouble.style.cssFloat = "left"; + </script> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-001.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-001.tentative.html new file mode 100644 index 0000000000..c8cfcb1066 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-001.tentative.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp basic test</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="line-clamp should clamp to the specified number of lines, without needing display: -webkit-box, -webkit-box-orient, or overflow: hidden."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-002.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-002.tentative.html new file mode 100644 index 0000000000..5f21b545fb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-002.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with fewer lines than specified</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="line-clamp should not have an effect on an element with fewer lines than specified."> +<style> +.clamp { + line-clamp: 6; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-003.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-003.tentative.html new file mode 100644 index 0000000000..fa3b7472e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-003.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with exactly as many lines as specified</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="line-clamp should not have an effect on an element with exactly as many lines as specified."> +<style> +.clamp { + line-clamp: 5; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-004.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-004.tentative.html new file mode 100644 index 0000000000..c766d195b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-004.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: sizing of line-clamp affected elements</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-006-ref.html"> +<meta name="assert" content="line-clamp should size the element to the clamped number of lines."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-005.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-005.tentative.html new file mode 100644 index 0000000000..143aa65d89 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-005.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with same-BFC block children</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-009-ref.html"> +<meta name="assert" content="line-clamp should count lines in same-BFC block children"> +<style> +.clamp { + line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="child">Line 3 +Line 4</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-006.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-006.tentative.html new file mode 100644 index 0000000000..f06d94161b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-006.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with same-BFC block children</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-010-ref.html"> +<meta name="assert" content="line-clamp should count lines in same-BFC block children"> +<style> +.clamp { + line-clamp: 5; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5 +Line 6</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-007.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-007.tentative.html new file mode 100644 index 0000000000..c71068641b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-007.tentative.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with independent BFC children</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-011-ref.html"> +<meta name="assert" content="line-clamp should skip lines in children with independent BFCs"> +<style> +.clamp { + line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + overflow: auto; + font: 24px / 48px serif; + color: blue; + padding: 0 4px; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5 +Line 6</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-008.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-008.tentative.html new file mode 100644 index 0000000000..0d91b3612d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-008.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp hides lines and in-flow boxes after the clamp point</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="line-clamp should hide lines and in-flow boxes after the clamp point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.pre { + white-space: pre; +} +.red { + background-color: red; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> + +<div class="red">Test</div> + +<table class="red"> + <tr> + <td>A</td> + <td>B</td> + </tr> + <tr> + <td>C</td> + <td>D</td> + </tr> +</table> + +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-009.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-009.tentative.html new file mode 100644 index 0000000000..4dfd3d6194 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-009.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: sizing of line-clamp affected elements with clamped block boxes</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-006-ref.html"> +<meta name="assert" content="line-clamp should size the element to the clamped number of lines, regardless of whether there are hidden block boxes after the clamp point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.pre { + white-space: pre; +} +.red { + background-color: red; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> + +<div class="red">Test</div> + +<table class="red"> + <tr> + <td>A</td> + <td>B</td> + </tr> + <tr> + <td>C</td> + <td>D</td> + </tr> +</table> + +</div> + +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-010.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-010.tentative.html new file mode 100644 index 0000000000..1386b147ce --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-010.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, lines after clamp are hidden even when they don't overflow</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-010-ref.html"> +<meta name="assert" content="When line-clamp is used with a number of lines, it should hide all lines after clamp, regardless of whether the box's height is set so they don't overflow"> +<style> +.clamp { + line-clamp: 2; + font: 16px / 32px serif; + height: 4lh; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-011.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-011.tentative.html new file mode 100644 index 0000000000..953f0c4faa --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-011.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, lines before clamp are not hidden even when they overflow</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-011-ref.html"> +<meta name="assert" content="When line-clamp is used with a number of lines, it should not hide any lines before clamp, regardless of whether the box's height is set so they overflow"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + height: 3lh; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-012.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-012.tentative.html new file mode 100644 index 0000000000..be39074037 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-012.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, borders and padding are respected</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-012-ref.html"> +<meta name="assert" content="when line-clamp is used with a number of lines, the box and its clamped children should be sized respecting borders and padding"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4 +Line 5 +Line 6</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-013.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-013.tentative.html new file mode 100644 index 0000000000..1bda501f02 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-013.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, clamped block descendent heights are respected</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-013-ref.html"> +<meta name="assert" content="when line-clamp is used with a number of lines, if the clamp happens inside a block descendent with a set height, that height will be respected"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + height: 3lh; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4 +Line 5 +Line 6</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-014.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-014.tentative.html new file mode 100644 index 0000000000..9ca7c89372 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-014.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp doesn't apply to inline boxes</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="line-clamp only affects block containers, not inline boxes"> +<style> +.block { + font: 16px / 32px serif; + background-color: yellow; +} +.clamp { + line-clamp: 4; + white-space: pre; +} +</style> +<div class="block"><span class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</span></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-015.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-015.tentative.html new file mode 100644 index 0000000000..8203007322 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-015.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp applies to inline blocks</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-015-ref.html"> +<meta name="assert" content="line-clamp affects block containers, which includes inline blocks"> +<style> +.clamp { + display: inline-block; + line-clamp: 3; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + width: 7.01ch; + background-color: yellow; +} +</style> +Before <div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> After</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-016.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-016.tentative.html new file mode 100644 index 0000000000..09714c499d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-016.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with -webkit-box and -webkit-box-orient</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, it becomes a block container, and so line-clamp applies to that box."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-017.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-017.tentative.html new file mode 100644 index 0000000000..11d6ceeb55 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-017.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with -webkit-box and -webkit-box-orient</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, it becomes a block container, and other flexbox properties don't apply."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + + /* These properties horizontally center the child, if this box is either a + * -webkit-box or a regular flexbox. */ + -webkit-box-align: center; + align-items: center; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-018.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-018.tentative.html new file mode 100644 index 0000000000..af75f7dfb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-018.tentative.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with -webkit-box and -webkit-box-orient</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, it becomes a block container, and other flexbox properties don't apply. This happens even if there is no clamping."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + line-clamp: 6; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + + /* These properties horizontally center the child, if this box is either a + * -webkit-box or a regular flexbox. */ + -webkit-box-align: center; + align-items: center; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-019.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-019.tentative.html new file mode 100644 index 0000000000..b39376d395 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-019.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp takes priority over -webkit-line-clamp</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="If both line-clamp and -webkit-line-clamp are present, line-clamp takes priority"> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-020.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-020.tentative.html new file mode 100644 index 0000000000..9d8a2b4d06 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-020.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp: none has no effect</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="line-clamp: none should have no effect."> +<style> +.clamp { + line-clamp: none; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-001.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-001.tentative.html new file mode 100644 index 0000000000..79667f23fb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-001.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos at the start of a line-clamp</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-with-abspos-001-ref.html"> +<meta name="assert" content="Absolute positioned boxes in an inline formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-002.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-002.tentative.html new file mode 100644 index 0000000000..cecb9d52bc --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-002.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos at the start of a line-clamp</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-with-abspos-001-ref.html"> +<meta name="assert" content="Absolute positioned boxes in a block formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="abspos"></div> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-003.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-003.tentative.html new file mode 100644 index 0000000000..e4bd1de222 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-003.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp after clamp point</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="Absolute positioned boxes in an inline formatting context inside a line-clamp container are always hidden if they are in the box tree after the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<div class="abspos"></div>Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-004.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-004.tentative.html new file mode 100644 index 0000000000..483e6d1da6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-004.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp after clamp point</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="Absolute positioned boxes in a block formatting context inside a line-clamp container are always hidden if they are in the box tree after the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4</div> +<div class="abspos"></div> +<div>Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-005.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-005.tentative.html new file mode 100644 index 0000000000..3dc77831a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-005.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp before clamp point which overflows</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-with-abspos-005-ref.html"> +<meta name="assert" content="Absolute positioned boxes in an inline formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point, even if they visually extend beyond that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="abspos"></div> +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-006.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-006.tentative.html new file mode 100644 index 0000000000..f18fed6c2d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-006.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp before clamp point which overflows</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-with-abspos-006-ref.html"> +<meta name="assert" content="Absolute positioned boxes in a block formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point, even if they visually extend beyond that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 75px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3</div> +<div class="abspos"></div> +<div class="pre">Line 4 +Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-007.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-007.tentative.html new file mode 100644 index 0000000000..f0a1f58c8d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-007.tentative.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp before clamp point positioned after it</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-with-abspos-007-ref.html"> +<meta name="assert" content="Absolute positioned boxes inside a line-clamp container are not hidden if they are in the box tree before the clamp point, even if they are positioned after that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + top: 148px; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-008.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-008.tentative.html new file mode 100644 index 0000000000..9c62e44f38 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-008.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: bottom: 0 abspos in line-clamp before clamp point</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-with-abspos-008-ref.html"> +<meta name="assert" content="Absolute positioned boxes inside a line-clamp container are not hidden if they are in the box tree before the clamp point."> +<style> +.clamp { + line-clamp: 4; + position: relative; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-009.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-009.tentative.html new file mode 100644 index 0000000000..dce04d720c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-009.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp after clamp point positioned before it</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="Absolute positioned boxes inside a line-clamp container are hidden if they are in the box tree after the clamp point, even if they are positioned before that point"> +<style> +.clamp { + line-clamp: 4; + position: relative; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + top: 0; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5<div class="abspos"></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-010.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-010.tentative.html new file mode 100644 index 0000000000..325278b3a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-010.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp doesn't propagate to abspos</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-with-abspos-010-ref.html"> +<meta name="assert" content="Absolute positioned boxes create a new BFC, and line-clamp does not propagate into independent BFCs"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + margin: 4px; + white-space: pre; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="abspos">Line A +Line B +Line C +Line D +Line E</div> +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-010-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-010-ref.html new file mode 100644 index 0000000000..46ca731c54 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-010-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + height: 4lh; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-011-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-011-ref.html new file mode 100644 index 0000000000..04297fff2b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-011-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + height: 3lh; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-012-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-012-ref.html new file mode 100644 index 0000000000..f412e0110d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-012-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4…</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-013-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-013-ref.html new file mode 100644 index 0000000000..b2eb05e884 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-013-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + height: 3lh; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4…</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-015-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-015-ref.html new file mode 100644 index 0000000000..1af45c1225 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-015-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: inline-block; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + width: 7.01ch; + background-color: yellow; +} +</style> +Before <div class="clamp">Line 1 +Line 2 +Line 3…</div> After</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-001-ref.html new file mode 100644 index 0000000000..d756162dde --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-005-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-005-ref.html new file mode 100644 index 0000000000..3b1f9218e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-005-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="abspos"></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-006-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-006-ref.html new file mode 100644 index 0000000000..4b55c37a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-006-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 75px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3</div> +<div class="abspos"></div> +<div class="pre">Line 4…</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-007-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-007-ref.html new file mode 100644 index 0000000000..e3dcc696e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-007-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + top: 148px; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-008-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-008-ref.html new file mode 100644 index 0000000000..373b2755c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-008-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + position: relative; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-010-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-010-ref.html new file mode 100644 index 0000000000..ecc2fcee1b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-010-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + margin: 4px; + white-space: pre; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="abspos">Line A +Line B +Line C +Line D +Line E</div></div> diff --git a/testing/web-platform/tests/css/printing/crashtests/root-element-remove-print.html b/testing/web-platform/tests/css/css-page/crashtests/root-element-remove-print.html index 8497e8c4fd..8497e8c4fd 100644 --- a/testing/web-platform/tests/css/printing/crashtests/root-element-remove-print.html +++ b/testing/web-platform/tests/css/css-page/crashtests/root-element-remove-print.html diff --git a/testing/web-platform/tests/css/printing/crashtests/tall-inline-block-in-float-in-table-cell-print.html b/testing/web-platform/tests/css/css-page/crashtests/tall-inline-block-in-float-in-table-cell-print.html index c70dce2160..c70dce2160 100644 --- a/testing/web-platform/tests/css/printing/crashtests/tall-inline-block-in-float-in-table-cell-print.html +++ b/testing/web-platform/tests/css/css-page/crashtests/tall-inline-block-in-float-in-table-cell-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-001-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-001-print-ref.html index 3d66305db0..3d66305db0 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-001-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-001-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-001-print.html b/testing/web-platform/tests/css/css-page/fixedpos-001-print.html index 04feb96e84..04feb96e84 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-001-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-001-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-002-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-002-print-ref.html index 3d66305db0..3d66305db0 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-002-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-002-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-002-print.html b/testing/web-platform/tests/css/css-page/fixedpos-002-print.html index c23c6be7d2..c23c6be7d2 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-002-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-002-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-003-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-003-print-ref.html index 3d66305db0..3d66305db0 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-003-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-003-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-003-print.html b/testing/web-platform/tests/css/css-page/fixedpos-003-print.html index 1b06257175..1b06257175 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-003-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-003-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-004-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-004-print-ref.html index 3e3473bcb8..3e3473bcb8 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-004-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-004-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-004-print.html b/testing/web-platform/tests/css/css-page/fixedpos-004-print.html index c138e9cd6a..c138e9cd6a 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-004-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-004-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-005-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-005-print-ref.html index e692ff8db3..e692ff8db3 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-005-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-005-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-005-print.html b/testing/web-platform/tests/css/css-page/fixedpos-005-print.html index 0a2edc7178..0a2edc7178 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-005-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-005-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-006-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-006-print-ref.html index b03e1d78d0..b03e1d78d0 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-006-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-006-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-006-print.html b/testing/web-platform/tests/css/css-page/fixedpos-006-print.html index 2386c166c8..2386c166c8 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-006-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-006-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-007-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-007-print-ref.html index f576c93771..f576c93771 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-007-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-007-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-007-print.html b/testing/web-platform/tests/css/css-page/fixedpos-007-print.html index 8dcb700b96..8dcb700b96 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-007-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-007-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-008-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-008-print-ref.html index 6ed2528115..6ed2528115 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-008-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-008-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-008-print.html b/testing/web-platform/tests/css/css-page/fixedpos-008-print.html index 02b5d63cc7..02b5d63cc7 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-008-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-008-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print-ref.html index 000c05350b..000c05350b 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print.html b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print.html index 057ddc9146..057ddc9146 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print-ref.html index 5c17140450..5c17140450 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print.html b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print.html index 5102d045c4..5102d045c4 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print-ref.html index f12d31acd9..f12d31acd9 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print-ref.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print-ref.html diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print.html b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print.html index 694e5376cb..694e5376cb 100644 --- a/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print.html +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print.html diff --git a/testing/web-platform/tests/css/printing/media-queries-001-print-ref.html b/testing/web-platform/tests/css/css-page/media-queries-001-print-ref.html index 35af04dc3c..35af04dc3c 100644 --- a/testing/web-platform/tests/css/printing/media-queries-001-print-ref.html +++ b/testing/web-platform/tests/css/css-page/media-queries-001-print-ref.html diff --git a/testing/web-platform/tests/css/printing/media-queries-001-print.html b/testing/web-platform/tests/css/css-page/media-queries-001-print.html index 01b2a00e47..01b2a00e47 100644 --- a/testing/web-platform/tests/css/printing/media-queries-001-print.html +++ b/testing/web-platform/tests/css/css-page/media-queries-001-print.html diff --git a/testing/web-platform/tests/css/printing/media-queries-002-print.html b/testing/web-platform/tests/css/css-page/media-queries-002-print.html index 5f71f3d17a..5f71f3d17a 100644 --- a/testing/web-platform/tests/css/printing/media-queries-002-print.html +++ b/testing/web-platform/tests/css/css-page/media-queries-002-print.html diff --git a/testing/web-platform/tests/css/printing/media-queries-003-print-ref.html b/testing/web-platform/tests/css/css-page/media-queries-003-print-ref.html index 99642ca567..99642ca567 100644 --- a/testing/web-platform/tests/css/printing/media-queries-003-print-ref.html +++ b/testing/web-platform/tests/css/css-page/media-queries-003-print-ref.html diff --git a/testing/web-platform/tests/css/printing/media-queries-003-print.html b/testing/web-platform/tests/css/css-page/media-queries-003-print.html index 2c125296ad..2c125296ad 100644 --- a/testing/web-platform/tests/css/printing/media-queries-003-print.html +++ b/testing/web-platform/tests/css/css-page/media-queries-003-print.html diff --git a/testing/web-platform/tests/css/printing/page-margin-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-001-print-ref.html index 12ebd76dc9..12ebd76dc9 100644 --- a/testing/web-platform/tests/css/printing/page-margin-001-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-margin-001-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-margin-001-print.html b/testing/web-platform/tests/css/css-page/page-margin-001-print.html index c59b3c6427..c59b3c6427 100644 --- a/testing/web-platform/tests/css/printing/page-margin-001-print.html +++ b/testing/web-platform/tests/css/css-page/page-margin-001-print.html diff --git a/testing/web-platform/tests/css/printing/page-margin-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-002-print-ref.html index 2b56504855..2b56504855 100644 --- a/testing/web-platform/tests/css/printing/page-margin-002-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-margin-002-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-margin-002-print.html b/testing/web-platform/tests/css/css-page/page-margin-002-print.html index 944d7efcfd..944d7efcfd 100644 --- a/testing/web-platform/tests/css/printing/page-margin-002-print.html +++ b/testing/web-platform/tests/css/css-page/page-margin-002-print.html diff --git a/testing/web-platform/tests/css/printing/page-margin-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-003-print-ref.html index 52bf736090..52bf736090 100644 --- a/testing/web-platform/tests/css/printing/page-margin-003-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-margin-003-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-margin-003-print.html b/testing/web-platform/tests/css/css-page/page-margin-003-print.html index e7410c02e0..e7410c02e0 100644 --- a/testing/web-platform/tests/css/printing/page-margin-003-print.html +++ b/testing/web-platform/tests/css/css-page/page-margin-003-print.html diff --git a/testing/web-platform/tests/css/printing/page-margin-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-004-print-ref.html index 24549d4954..24549d4954 100644 --- a/testing/web-platform/tests/css/printing/page-margin-004-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-margin-004-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-margin-004-print.html b/testing/web-platform/tests/css/css-page/page-margin-004-print.html index cb9343dcf1..cb9343dcf1 100644 --- a/testing/web-platform/tests/css/printing/page-margin-004-print.html +++ b/testing/web-platform/tests/css/css-page/page-margin-004-print.html diff --git a/testing/web-platform/tests/css/printing/page-margin-005-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-005-print-ref.html index bd1829be38..bd1829be38 100644 --- a/testing/web-platform/tests/css/printing/page-margin-005-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-margin-005-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-margin-005-print.html b/testing/web-platform/tests/css/css-page/page-margin-005-print.html index 8ca80bc697..8ca80bc697 100644 --- a/testing/web-platform/tests/css/printing/page-margin-005-print.html +++ b/testing/web-platform/tests/css/css-page/page-margin-005-print.html diff --git a/testing/web-platform/tests/css/printing/page-margin-006-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-006-print-ref.html index fe7a2c66db..fe7a2c66db 100644 --- a/testing/web-platform/tests/css/printing/page-margin-006-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-margin-006-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-margin-006-print.html b/testing/web-platform/tests/css/css-page/page-margin-006-print.html index 43621acf80..43621acf80 100644 --- a/testing/web-platform/tests/css/printing/page-margin-006-print.html +++ b/testing/web-platform/tests/css/css-page/page-margin-006-print.html diff --git a/testing/web-platform/tests/css/css-page/page-margin-negative-print-ref.tentative.html b/testing/web-platform/tests/css/css-page/page-margin-negative-print-ref.tentative.html new file mode 100644 index 0000000000..9e816c12fb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-negative-print-ref.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 300px; + margin: 0; + } + body { + margin: 0; + background: green; + } +</style> +<div> + Green background, no red / yellow. +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-negative-print.tentative.html b/testing/web-platform/tests/css/css-page/page-margin-negative-print.tentative.html new file mode 100644 index 0000000000..205a13f7a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-negative-print.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8508"> +<link rel="match" href="page-margin-negative-print-ref.tentative.html"> +<style> + @page { + size: 300px; + margin: -20px; + } + body { + margin: 0; + background: yellow; + } + .fullpager { + width: 300px; + height: 300px; + border: 20px solid red; + background: green; + } +</style> +<div class="fullpager"> + Green background, no red / yellow. +</div> diff --git a/testing/web-platform/tests/css/printing/page-name-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-000-print-ref.html index 69c5c37b5a..69c5c37b5a 100644 --- a/testing/web-platform/tests/css/printing/page-name-001-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-name-000-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-name-001-print.html b/testing/web-platform/tests/css/css-page/page-name-000-print.html index 56281bb4ed..f01d5cac48 100644 --- a/testing/web-platform/tests/css/printing/page-name-001-print.html +++ b/testing/web-platform/tests/css/css-page/page-name-000-print.html @@ -2,7 +2,7 @@ <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-page-3/#using-named-pages"> <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414718"> -<link rel="match" href="page-name-001-print-ref.html"> +<link rel="match" href="page-name-000-print-ref.html"> <div style="page:foo;"> <div style="float:left;">First page</div> <div style="clear:both;">Also first page</div> diff --git a/testing/web-platform/tests/css/printing/page-name-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-002-print-ref.html index 17ecc93e57..17ecc93e57 100644 --- a/testing/web-platform/tests/css/printing/page-name-002-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-name-002-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-name-002-print.html b/testing/web-platform/tests/css/css-page/page-name-002-print.html index 060b93b0bf..060b93b0bf 100644 --- a/testing/web-platform/tests/css/printing/page-name-002-print.html +++ b/testing/web-platform/tests/css/css-page/page-name-002-print.html diff --git a/testing/web-platform/tests/css/printing/page-name-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-003-print-ref.html index 52ea6bfffc..52ea6bfffc 100644 --- a/testing/web-platform/tests/css/printing/page-name-003-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-name-003-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-name-003-print.html b/testing/web-platform/tests/css/css-page/page-name-003-print.html index 9ef4db8c75..9ef4db8c75 100644 --- a/testing/web-platform/tests/css/printing/page-name-003-print.html +++ b/testing/web-platform/tests/css/css-page/page-name-003-print.html diff --git a/testing/web-platform/tests/css/printing/page-name-and-break-001-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-001-print.html index 04de5f7073..04de5f7073 100644 --- a/testing/web-platform/tests/css/printing/page-name-and-break-001-print.html +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-001-print.html diff --git a/testing/web-platform/tests/css/printing/page-name-and-break-002-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-002-print.html index 3dd755b027..3dd755b027 100644 --- a/testing/web-platform/tests/css/printing/page-name-and-break-002-print.html +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-002-print.html diff --git a/testing/web-platform/tests/css/printing/page-name-and-break-003-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-003-print.html index b7e8a20e1d..b7e8a20e1d 100644 --- a/testing/web-platform/tests/css/printing/page-name-and-break-003-print.html +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-003-print.html diff --git a/testing/web-platform/tests/css/printing/page-name-and-break-004-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-004-print.html index 2e252ea4eb..2e252ea4eb 100644 --- a/testing/web-platform/tests/css/printing/page-name-and-break-004-print.html +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-004-print.html diff --git a/testing/web-platform/tests/css/printing/page-name-and-break-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-and-break-print-ref.html index e3f73e41e2..e3f73e41e2 100644 --- a/testing/web-platform/tests/css/printing/page-name-and-break-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-001-print-ref.html index b016d8949f..b016d8949f 100644 --- a/testing/web-platform/tests/css/printing/page-size-001-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-001-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-001-print.html b/testing/web-platform/tests/css/css-page/page-size-001-print.html index 19d72b0231..19d72b0231 100644 --- a/testing/web-platform/tests/css/printing/page-size-001-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-001-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-002-print-ref.html index 78a1646943..78a1646943 100644 --- a/testing/web-platform/tests/css/printing/page-size-002-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-002-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-002-print.html b/testing/web-platform/tests/css/css-page/page-size-002-print.html index 243c382ca2..243c382ca2 100644 --- a/testing/web-platform/tests/css/printing/page-size-002-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-002-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-003-print-ref.html index 38ea150878..38ea150878 100644 --- a/testing/web-platform/tests/css/printing/page-size-003-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-003-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-003-print.html b/testing/web-platform/tests/css/css-page/page-size-003-print.html index 805ff0e568..805ff0e568 100644 --- a/testing/web-platform/tests/css/printing/page-size-003-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-003-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-004-print-ref.html index 0468a745b2..0468a745b2 100644 --- a/testing/web-platform/tests/css/printing/page-size-004-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-004-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-004-print.html b/testing/web-platform/tests/css/css-page/page-size-004-print.html index 125d7636d2..125d7636d2 100644 --- a/testing/web-platform/tests/css/printing/page-size-004-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-004-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-005-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-005-print-ref.html index c2e07daa29..c2e07daa29 100644 --- a/testing/web-platform/tests/css/printing/page-size-005-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-005-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-005-print.html b/testing/web-platform/tests/css/css-page/page-size-005-print.html index 37876ae230..37876ae230 100644 --- a/testing/web-platform/tests/css/printing/page-size-005-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-005-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-006-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-006-print-ref.html index 7167da2ac2..7167da2ac2 100644 --- a/testing/web-platform/tests/css/printing/page-size-006-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-006-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-006-print.html b/testing/web-platform/tests/css/css-page/page-size-006-print.html index 1da29d334d..1da29d334d 100644 --- a/testing/web-platform/tests/css/printing/page-size-006-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-006-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-007-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-007-print-ref.html index 9498e2c17b..9498e2c17b 100644 --- a/testing/web-platform/tests/css/printing/page-size-007-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-007-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-007-print.html b/testing/web-platform/tests/css/css-page/page-size-007-print.html index 50ab2f4d10..50ab2f4d10 100644 --- a/testing/web-platform/tests/css/printing/page-size-007-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-007-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-008-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-008-print-ref.html index f50ad3531e..f50ad3531e 100644 --- a/testing/web-platform/tests/css/printing/page-size-008-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-008-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-008-print.html b/testing/web-platform/tests/css/css-page/page-size-008-print.html index 683bdc3a50..683bdc3a50 100644 --- a/testing/web-platform/tests/css/printing/page-size-008-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-008-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-009-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-009-print-ref.html index 86ffa278c9..86ffa278c9 100644 --- a/testing/web-platform/tests/css/printing/page-size-009-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-009-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-009-print.html b/testing/web-platform/tests/css/css-page/page-size-009-print.html index 48ead4eab3..48ead4eab3 100644 --- a/testing/web-platform/tests/css/printing/page-size-009-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-009-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-010-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-010-print-ref.html index 27cbe4435c..27cbe4435c 100644 --- a/testing/web-platform/tests/css/printing/page-size-010-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-010-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-010-print.html b/testing/web-platform/tests/css/css-page/page-size-010-print.html index 21205e06a0..21205e06a0 100644 --- a/testing/web-platform/tests/css/printing/page-size-010-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-010-print.html diff --git a/testing/web-platform/tests/css/printing/page-size-011-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-011-print-ref.html index 945f105ef4..945f105ef4 100644 --- a/testing/web-platform/tests/css/printing/page-size-011-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-size-011-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-size-011-print.html b/testing/web-platform/tests/css/css-page/page-size-011-print.html index 2747605806..2747605806 100644 --- a/testing/web-platform/tests/css/printing/page-size-011-print.html +++ b/testing/web-platform/tests/css/css-page/page-size-011-print.html diff --git a/testing/web-platform/tests/css/printing/page-visibility-hidden-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print-ref.html index 24d3806eb9..24d3806eb9 100644 --- a/testing/web-platform/tests/css/printing/page-visibility-hidden-001-print-ref.html +++ b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print-ref.html diff --git a/testing/web-platform/tests/css/printing/page-visibility-hidden-001-print.html b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print.html index 0de5c5ae82..0de5c5ae82 100644 --- a/testing/web-platform/tests/css/printing/page-visibility-hidden-001-print.html +++ b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print.html diff --git a/testing/web-platform/tests/css/printing/reference/blank-print-ref.html b/testing/web-platform/tests/css/css-page/reference/blank-print-ref.html index ad73420cdb..ad73420cdb 100644 --- a/testing/web-platform/tests/css/printing/reference/blank-print-ref.html +++ b/testing/web-platform/tests/css/css-page/reference/blank-print-ref.html diff --git a/testing/web-platform/tests/css/printing/reference/filled-green-100px-square-print-ref.html b/testing/web-platform/tests/css/css-page/reference/filled-green-100px-square-print-ref.html index d4834d1358..d4834d1358 100644 --- a/testing/web-platform/tests/css/printing/reference/filled-green-100px-square-print-ref.html +++ b/testing/web-platform/tests/css/css-page/reference/filled-green-100px-square-print-ref.html diff --git a/testing/web-platform/tests/css/printing/remote-origin-iframe-print-ref.html b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print-ref.html index f632519cd6..f632519cd6 100644 --- a/testing/web-platform/tests/css/printing/remote-origin-iframe-print-ref.html +++ b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print-ref.html diff --git a/testing/web-platform/tests/css/printing/remote-origin-iframe-print.html b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print.html index aba10a2a39..73b3878386 100644 --- a/testing/web-platform/tests/css/printing/remote-origin-iframe-print.html +++ b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print.html @@ -14,6 +14,6 @@ <p>The word "PASS" should be seen below.</p> <script> const iframe = document.createElement("iframe"); - iframe.src = get_host_info().REMOTE_ORIGIN + "/css/printing/resources/iframe-with-abspos.html"; + iframe.src = get_host_info().REMOTE_ORIGIN + "/css/css-page/resources/iframe-with-abspos.html"; document.body.appendChild(iframe); </script> diff --git a/testing/web-platform/tests/css/printing/resources/iframe-with-abspos.html b/testing/web-platform/tests/css/css-page/resources/iframe-with-abspos.html index 27de3aad5e..27de3aad5e 100644 --- a/testing/web-platform/tests/css/printing/resources/iframe-with-abspos.html +++ b/testing/web-platform/tests/css/css-page/resources/iframe-with-abspos.html diff --git a/testing/web-platform/tests/css/printing/resources/mq-frame-100px.html b/testing/web-platform/tests/css/css-page/resources/mq-frame-100px.html index ed823c09e8..ed823c09e8 100644 --- a/testing/web-platform/tests/css/printing/resources/mq-frame-100px.html +++ b/testing/web-platform/tests/css/css-page/resources/mq-frame-100px.html diff --git a/testing/web-platform/tests/css/printing/root-element-display-none-print.html b/testing/web-platform/tests/css/css-page/root-element-display-none-print.html index d6802f6225..d6802f6225 100644 --- a/testing/web-platform/tests/css/printing/root-element-display-none-print.html +++ b/testing/web-platform/tests/css/css-page/root-element-display-none-print.html diff --git a/testing/web-platform/tests/css/printing/subpixel-page-size-001-print-ref.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print-ref.html index cf59f2be37..cf59f2be37 100644 --- a/testing/web-platform/tests/css/printing/subpixel-page-size-001-print-ref.html +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print-ref.html diff --git a/testing/web-platform/tests/css/printing/subpixel-page-size-001-print.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print.html index 9054cd4513..9054cd4513 100644 --- a/testing/web-platform/tests/css/printing/subpixel-page-size-001-print.html +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print.html diff --git a/testing/web-platform/tests/css/printing/subpixel-page-size-002-print-ref.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print-ref.html index 4ed4bdb5ff..4ed4bdb5ff 100644 --- a/testing/web-platform/tests/css/printing/subpixel-page-size-002-print-ref.html +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print-ref.html diff --git a/testing/web-platform/tests/css/printing/subpixel-page-size-002-print.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print.html index 463cb21f25..463cb21f25 100644 --- a/testing/web-platform/tests/css/printing/subpixel-page-size-002-print.html +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print.html diff --git a/testing/web-platform/tests/css/css-paint-api/parse-input-arguments-018.https.html b/testing/web-platform/tests/css/css-paint-api/parse-input-arguments-018.https.html index 1554cc6445..a07bb2d619 100644 --- a/testing/web-platform/tests/css/css-paint-api/parse-input-arguments-018.https.html +++ b/testing/web-platform/tests/css/css-paint-api/parse-input-arguments-018.https.html @@ -22,11 +22,15 @@ should never be called. In other words, there should be no red painted in the re <div id="canvas-geometry" class="container"></div> <script id="code" type="text/worklet"> -function generateRandString(length) { - var text = ""; - var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; - for (var i = 0; i < length; i++) - text += possible.charAt(Math.floor(Math.random() * possible.length)); +function generateRandomIdentifier(length) { + const firstChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; + const nthChars = firstChars + "0123456789"; + // Pick a letter for the first character so that the string is a valid + // identifier. + var text = firstChars.charAt(Math.floor(Math.random() * firstChars.length)); + for (var i = 0; i < length - 1; i++) { + text += nthChars.charAt(Math.floor(Math.random() * nthChars.length)); + } return text; } @@ -39,7 +43,7 @@ try { // the input properties here. We make the string length 100 to make sure // that it is veryyyyyyyyyyyy unlikely that two strings will be the same // when running this test. - var current_str = generateRandString(100); + var current_str = generateRandomIdentifier(100); return [current_str]; } // The paint function here should never be called because the inputArguments diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/registered-neutral-keyframe.html b/testing/web-platform/tests/css/css-properties-values-api/animation/registered-neutral-keyframe.html new file mode 100644 index 0000000000..ac3ad0c2c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/registered-neutral-keyframe.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@keyframes test { + to { --x: to; } +} +#target { + --x: underlying; + animation: test 1s; +} +</style> +<div id="target"></div> +<script> +CSS.registerProperty({ + name: '--x', + syntax: '*', + inherits: false, +}); + +test(() => { + target.style.animationDelay = '-0.25s'; + assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'underlying', 'at 25%'); + + target.style.animationDelay = '-0.75s'; + assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'to', 'at 25%'); +}, 'CSS Animations neutral keyframes on registered custom properties should produce the underlying value'); +</script> diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/registered-var-to-registered-animating.html b/testing/web-platform/tests/css/css-properties-values-api/animation/registered-var-to-registered-animating.html new file mode 100644 index 0000000000..477e30b47b --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/animation/registered-var-to-registered-animating.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#target { + --static: 100; +} +</style> +<div id="target"></div> +<script> +setup(() => { + for (let name of ['--test', '--static', '--animated']) { + CSS.registerProperty({ + name, + syntax: '<number>', + initialValue: '0', + inherits: false, + }); + } +}); + +test(() => { + // --test is animating from a static value to an animated value resulting in it changing quadratically. + let animation = target.animate({'--test': ['var(--static)', 'var(--animated)']}, 100); + let referencedAnimation = target.animate({'--animated': ['200', '300']}, 100); + + referencedAnimation.currentTime = 25; + { + animation.currentTime = 25; + // lerp(100, lerp(200, 300, 25%), 25%) == 0.75*100 + 0.25*(0.75*200 + 0.25*300) == 131.25 + assert_equals(getComputedStyle(target).getPropertyValue('--test'), '131.25', 'target at 25%, to at 25%'); + + animation.currentTime = 75; + // lerp(100, lerp(200, 300, 25%), 75%) == 0.25*100 + 0.75*(0.75*200 + 0.25*300) == 193.75 + assert_equals(getComputedStyle(target).getPropertyValue('--test'), '193.75', 'target at 75%, to at 25%'); + } + + referencedAnimation.currentTime = 75; + { + animation.currentTime = 25; + // lerp(100, lerp(200, 300, 75%), 25%) == 0.75*100 + 0.25*(0.25*200 + 0.75*300) == 143.75 + assert_equals(getComputedStyle(target).getPropertyValue('--test'), '143.75', 'target at 25%, to at 25%'); + + animation.currentTime = 75; + // lerp(100, lerp(200, 300, 75%), 75%) == 0.25*100 + 0.75*(0.25*200 + 0.75*300) == 231.25 + assert_equals(getComputedStyle(target).getPropertyValue('--test'), '231.25', 'target at 75%, to at 25%'); + } +}, 'Animated registered custom properties can var() reference other animated registered custom properties across separate Animations.'); +</script> diff --git a/testing/web-platform/tests/css/css-scoping/font-face-006.html b/testing/web-platform/tests/css/css-scoping/font-face-006.html index 5eabe6ab76..8c6e341713 100644 --- a/testing/web-platform/tests/css/css-scoping/font-face-006.html +++ b/testing/web-platform/tests/css/css-scoping/font-face-006.html @@ -16,7 +16,7 @@ </style> <div id="host"></div> <script> -test(function() { +promise_test(async function() { host.attachShadow({ mode: "open" }).innerHTML = ` <style> :host::before, :host::after { @@ -27,6 +27,8 @@ test(function() { <slot></slot> `; + await document.fonts.ready; + //shrinkwrapped size for a default font will be a bit more than 80-90 //if the font is applied, it will be a bit more than 160 assert_greater_than(document.getElementById('host').offsetWidth, 160); diff --git a/testing/web-platform/tests/css/css-scoping/host-defined.html b/testing/web-platform/tests/css/css-scoping/host-defined.html new file mode 100644 index 0000000000..9e9776754a --- /dev/null +++ b/testing/web-platform/tests/css/css-scoping/host-defined.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Shadow host is considered, but does not match :defined</title> +<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> +<link rel="help" href="https://crbug.com/332587538"> +<link rel="help" href="https://drafts.csswg.org/selectors/#featureless"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div id="host"></div> +<script> + host.attachShadow({mode: "open"}).innerHTML = ` + <style> + :host div { + width: 100px; + height: 100px; + background-color: red; + } + :not(:defined) div { + background-color: green; + } + </style> + <div></div> + `; +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js index a641553bea..a3591d48ed 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js +++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js @@ -8,32 +8,26 @@ function checkSnapEventSupport(event_type) { } } -// This function is deprecated. It tests a deprecated SnapEvent interface. -function assertSnapEventDeprecated(evt, expected_ids) { +function assertSnapEvent(evt, expected_ids) { assert_equals(evt.bubbles, false, "snap events don't bubble"); assert_false(evt.cancelable, "snap events are not cancelable."); - const actual = Array.from(evt.snapTargets, el => el.id).join(","); - const expected = expected_ids.join(","); - assert_equals(actual, expected, "snap event supplied expected targets"); + assert_equals(evt.snapTargetBlock, expected_ids.block, + "snap event supplied expected target in block axis"); + assert_equals(evt.snapTargetInline, expected_ids.inline, + "snap event supplied expected target in inline axis"); } -// This function is deprecated. It tests a deprecated SnapEvent interface. -// This function holds logic intended to be used by tests for scroll snap -// events. -// |test_data| should contain: -// - |scroller|: the snap container being scrolled (or -// document.scrollingElement) -// - |scrolling_function|: this function should trigger the desired snap event -// when executed. -// - |expected_snap_targets|: a list of element ids which the triggered snap -// event should supply in SnapEvent.snapTargets. -// - |expected_scroll_offsets|: the scroll offsets at which the snap container -// should be after scrolling function has been -// executed. -// |event_type|: should be "snapchanged" or "snapchanging". -async function test_snap_event_deprecated(test, test_data, event_type) { +async function snap_test_setup(test, scroller, event_type) { checkSnapEventSupport(event_type); - await waitForScrollReset(test, test_data.scroller); + await waitForScrollReset(test, scroller); + await waitForCompositorCommit(); + test.add_cleanup(async () => { + await waitForScrollReset(test, scroller); + }); +} + +async function test_snap_event(test, test_data, event_type) { + await snap_test_setup(test, test_data.scroller, event_type); let listener = test_data.scroller == document.scrollingElement ? document : test_data.scroller; @@ -42,7 +36,7 @@ async function test_snap_event_deprecated(test, test_data, event_type) { await test_data.scrolling_function(); let evt = await event_promise; - assertSnapEventDeprecated(evt, test_data.expected_snap_targets); + assertSnapEvent(evt, test_data.expected_snap_targets); assert_approx_equals(test_data.scroller.scrollTop, test_data.expected_scroll_offsets.y, 1, "vertical scroll offset mismatch."); @@ -52,7 +46,7 @@ async function test_snap_event_deprecated(test, test_data, event_type) { } async function test_snapchanged(test, test_data) { - await test_snap_event_deprecated(test, test_data, "snapchanged"); + await test_snap_event(test, test_data, "snapchanged"); } function waitForEventUntil(event_target, event_type, wait_until) { @@ -83,6 +77,20 @@ function waitForEventsUntil(event_target, event_type, wait_until) { }); } +function waitForOnSnapchanging(event_target) { + return new Promise(resolve => { + let result = null; + const listener = (evt) => { + result = evt; + }; + event_target.onsnapchanging = listener; + waitForScrollendEventNoTimeout(event_target).then(() => { + event_target.onsnapchanging = null; + resolve(result); + }); + }); +} + // Proxy a wait for a snap event. We want to avoid having a test // timeout in the event of an expected snap event not firing in a particular // test case as that would cause the entire file to fail. diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js new file mode 100644 index 0000000000..8257b98fe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js @@ -0,0 +1,26 @@ +// Helper functions for snapchanged-on-programmatic-* tests. + +// Utility function to test that onsnapchanging is triggered for +// snapchanging-on-programmatic-* tests which set up a similar layout in which +// the |scroller| has 3 snap targets that form a vertical column along +// |scroller|'s middle. onsnapchanging should be triggered by conducting a +// programmatic scroll to the top of snap_target. +async function test_programmatic_scroll_onsnapchanging(test, + scroller, + event_target, + snap_target) { + await snap_test_setup(test, scroller, "snapchanging"); + const expected_snap_targets = { block: snap_target, inline: null }; + + // Scroll and wait for a snapchanging event. + const snapchanging_promise = waitForOnSnapchanging(event_target); + scroller.scrollTo(0, snap_target.offsetTop); + const snapchanging_event = await snapchanging_promise; + + // Assert that snapchanging fired and indicated that snap_target would + // be snapped to. + assertSnapEvent(snapchanging_event, expected_snap_targets); + assert_equals(scroller.scrollLeft, 0, "scrollLeft is zero"); + assert_equals(scroller.scrollTop, snap_target.offsetTop, + "snapped to snap_target"); +} diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js index 6587aebd92..820f143816 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js +++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js @@ -68,4 +68,33 @@ async function test_no_snapchanged(t, scroller, delta) { async function test_no_snapchanging(t, scroller, delta) { await test_no_snap_event(t, scroller, delta, "snapchanging"); -}
\ No newline at end of file +} + +// Utility function to test that onsnapchanging is triggered for +// snapchanging-on-user-* tests which set up a similar layout in which +// the |scroller| has 3 snap targets that form a vertical column along +// |scroller|'s middle. onsnapchanging should be triggered by touch-dragging +// |scroller|'s content so that |snap_target|'s top aligns to |snap_target|. +async function test_user_scroll_onsnapchanging(test, scroller, event_target, + snap_target) { + await snap_test_setup(test, scroller, "snapchanging"); + + // Compute touch positions to drag the top of snap_target to the top of + // the scroller. + const scroller_middle = Math.round(scroller.clientWidth / 2); + const start_pos = { x: scroller_middle, y: snap_target.offsetTop }; + const end_pos = { x: scroller_middle, y: 0 }; + const expected_snap_targets = { block: snap_target, inline: null }; + + // Scroll and wait for a snapchanging event. + const snapchanging_promise = waitForOnSnapchanging(event_target); + await snap_event_touch_scroll_helper(start_pos, end_pos); + const snapchanging_event = await snapchanging_promise; + + // Assert that snapchanging fired and indicated that snap_target would + // be snapped to. + assertSnapEvent(snapchanging_event, expected_snap_targets); + assert_equals(scroller.scrollLeft, 0, "scrollLeft is zero"); + assert_equals(scroller.scrollTop, snap_target.offsetTop, + "snapped to snap_target"); +} diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html index 4272412073..a3ba05fdf5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html @@ -81,7 +81,7 @@ inner_snap_area.style.height = `${scroller.clientHeight + inner_snap_area.clientHeight - 10}px`; const evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id, inner_snap_area.id]); + assertSnapEvent(evt, { block: inner_snap_area, inline: null }); target_snap_position = inner_snap_area.offsetTop + inner_snap_area.offsetHeight - scroller.clientHeight; assert_equals(scroller.scrollTop, target_snap_position, @@ -107,7 +107,7 @@ inner_snap_area.style.height = `${scroller.clientHeight + inner_snap_area.clientHeight + 10}px`; const evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id, inner_snap_area.id]); + assertSnapEvent(evt, { block: inner_snap_area, inline: null }); assert_equals(scroller.scrollTop, target_snap_position, "scroller maintains offset which is now covering within inner area"); }, "snapchanged fires after snap area is snapped to upon layout change " + @@ -119,11 +119,11 @@ let snapchanged_promise = waitForSnapChangedEvent(scroller, false); scroller.style.scrollSnapType = "none"; let evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, []); + assertSnapEvent(evt, { block: null, inline: null }); snapchanged_promise = waitForSnapChangedEvent(scroller, false); scroller.style.scrollSnapType = "y mandatory"; evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id]); + assertSnapEvent(evt, { block: outer_snap_area, inline: null }); }, "snapchanged fires when container stops snapping"); promise_test(async(t) => { @@ -133,12 +133,12 @@ inner_snap_area.style.scrollSnapAlign = "none"; outer_snap_area.style.scrollSnapAlign = "none"; let evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, []); + assertSnapEvent(evt, { block: null, inline: null }); snapchanged_promise = waitForSnapChangedEvent(scroller, false); inner_snap_area.style.scrollSnapAlign = "start"; outer_snap_area.style.scrollSnapAlign = "start"; evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id]); + assertSnapEvent(evt, { block: outer_snap_area, inline: null }); }, "snapchanged fires when snap container no longer has snap areas"); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-ensures-dom-order.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-ensures-dom-order.html deleted file mode 100644 index f87b6137f1..0000000000 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-ensures-dom-order.html +++ /dev/null @@ -1,95 +0,0 @@ -<!DOCTYPE html> -<html> - -<head> - <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events" /> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/dom/events/scrolling/scroll_support.js"></script> - <script src="/css/css-scroll-snap-2/resources/common.js"></script> - <script src="/web-animations/testcommon.js"></script> - <style> - #scroller { - overflow-y: scroll; - scroll-snap-type: y mandatory; - width: 500px; - height: 500px; - background-color: white; - position: relative; - } - .space_filler { - display: inline-block; - width: 40%; - height: 30%; - background-color: green; - } - .snap_area { - scroll-snap-align: start; - background-color: yellow; - position: absolute; - width: 40%; - height: 30%; - } - - #snap_point_1 { - left: 1px; - } - #snap_point_2 { - left: 80%; - } - #snap_point_3 { - left: 40%; - scroll-snap-align: start; - background-color: yellow; - position: absolute; - width: 40%; - height: 30%; - } - </style> -</head> -<body> - <div id="scroller"> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div id="snap_point_1" class="snap_area"><h1>1</h1></div> - <div id="snap_point_2" class="snap_area"><h1>2</h1></div> - </div> - <script> - promise_test(async (t) => { - checkSnapEventSupport("snapchanged"); - await waitForCompositorCommit(); - const snapchanged_promise = waitForSnapChangedEvent(scroller, false); - const snap_point_3 = document.createElement("div"); - snap_point_3.id = "snap_point_3"; - t.add_cleanup(() => { - snap_point_3.remove(); - }); - scroller.insertBefore(snap_point_3, snap_point_2); - const evt_seen = await snapchanged_promise; - assertSnapEventDeprecated(evt_seen, - [snap_point_1.id, snap_point_3.id, snap_point_2.id]); - }, "snapchanged lists snapTargets in DOM order."); - - promise_test(async (t) => { - checkSnapEventSupport("snapchanged"); - await waitForCompositorCommit(); - const unreached_func = t.unreached_func("snapchanged shouldn't fire " + - "since the scroller is snapped to the same elements despite the " + - "dom order change."); - t.add_cleanup(() => { - scroller.removeEventListener("snapchanged", unreached_func); - }) - scroller.addEventListener("snapchanged", unreached_func); - scroller.insertBefore(snap_point_2, snap_point_1); - await waitForCompositorCommit(); - }, "DOM order change doesn't trigger snapchanged if snapped targets " + - "don't change."); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html index 7c7b48152e..98ec2e5d75 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html @@ -69,7 +69,7 @@ scrolling_function: () => { scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop, @@ -110,7 +110,7 @@ scroller.scrollTo(scroll_left_target, scroll_top_target); evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [snap_point_2.id]); + assertSnapEvent(evt, { block: snap_point_2, inline: snap_point_2 }); assert_approx_equals(scroller.scrollTop, snap_point_2.offsetTop, 1, "scroller snaps to the top of snap_point_2"); assert_approx_equals(scroller.scrollLeft, snap_point_2.offsetLeft, 1, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html index 1fb56212a3..9dff856f34 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html @@ -76,7 +76,7 @@ scrolling_function: () => { scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop, @@ -115,7 +115,7 @@ scroller.scrollTo(scroll_left_target, scroll_top_target); evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [snap_point_2.id]); + assertSnapEvent(evt, { block: snap_point_2, inline: snap_point_2 }) assert_approx_equals(scroller.scrollTop, snap_point_2.offsetTop, 1, "scroller snaps to the top of snap_point_2"); assert_approx_equals(scroller.scrollLeft, snap_point_2.offsetLeft, 1, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html index 5405d778bf..127376caa2 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html @@ -64,6 +64,8 @@ <div id="snap_point_3" class="snap_point"></div> <script> const scroller = document.scrollingElement; + const snap_point_2 = document.getElementById("snap_point_2"); + const snap_point_1 = document.getElementById("snap_point_1"); const offset_to_snap_point_2 = { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop @@ -82,7 +84,7 @@ scrolling_function: async () => { await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -102,7 +104,7 @@ offset_to_snap_point_2.y, { origin: scroller }).send(); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -132,7 +134,7 @@ await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, @@ -150,7 +152,7 @@ window.test_driver.send_keys(document.documentElement, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html index 4f36200722..91194642b5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html @@ -71,6 +71,8 @@ </div> <script> const scroller = document.getElementById("scroller"); + const snap_point_1 = document.getElementById("snap_point_1"); + const snap_point_2 = document.getElementById("snap_point_2"); const offset_to_snap_point_2 = { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop @@ -89,7 +91,7 @@ scrolling_function: async () => { await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -109,7 +111,7 @@ offset_to_snap_point_2.y, { origin: scroller }).send(); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -136,7 +138,7 @@ scrollbar_to_scroller_ratio; await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, @@ -154,7 +156,7 @@ scroller.focus(); window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html index 6a874e82f2..96cab33739 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html @@ -61,7 +61,7 @@ // to outside the proximity range and are no longer snapped. let evt = await snapchanged_promise; assert_equals(scroller.scrollTop, 250); - assertSnapEventDeprecated(evt, []); + assertSnapEvent(evt, { block: null, inline: null }); evt = null; snapchanged_promise = waitForSnapChangedEvent(scroller); @@ -73,7 +73,7 @@ assert_equals(scroller.scrollTop, 0); // snapchanged should fire as we've moved from outside the proximity range // to inside the proximity range and are once again snapped. - assertSnapEventDeprecated(evt, [target.id]); + assertSnapEvent(evt, { block: target, inline: null }); }, "Snapchanged fires when scrolling outside proximity range."); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html index ff307981e8..0c0bfb623e 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html @@ -102,7 +102,7 @@ // assert snapchanging that should have already happened. await scroll_promise; - assertSnapEventDeprecated(snap_evt, [box2.id]); + assertSnapEvent(snap_evt, { block: null, inline: box2 }); evt_promise = waitForSnapEvent(scroller, "snapchanging", false); // Change layout while pointer is still down. @@ -111,7 +111,7 @@ box2.style.left = box3_prev_left; box3.style.left = box2_prev_left; snap_evt = await evt_promise; - assertSnapEventDeprecated(snap_evt, [box3.id]); + assertSnapEvent(snap_evt, { block: null, inline: box3 }); }, "snapchanging fires after layout change"); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html index 7044cfac96..b714a6cfb5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html @@ -9,6 +9,7 @@ <script src="/resources/testdriver-vendor.js"></script> <script src="/dom/events/scrolling/scroll_support.js"></script> <script src="/css/css-scroll-snap-2/resources/common.js"></script> + <script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script> ß <script src="/web-animations/testcommon.js"></script> </head> @@ -66,6 +67,7 @@ <div id="snap_area_3" class="yellow snap box"></div> <script> const scroller = document.scrollingElement; + const snap_area_2 = document.getElementById("snap_area_2"); promise_test(async (t) => { await waitForCompositorCommit(); @@ -74,17 +76,23 @@ scrolling_function: async () => { scroller.scrollTo(0, snap_area_2.offsetTop); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "snapchanging fires on programmatic scrolls that changes a scroller's" + " snap targets."); promise_test(async (t) => { + await test_programmatic_scroll_onsnapchanging(t, scroller, document, + snap_area_2); + }, "programmatic scroll triggers Document.snapchanging when scrolling a " + + "snap container"); + + promise_test(async (t) => { checkSnapEventSupport("snapchanging"); await waitForScrollReset(t, scroller); await waitForCompositorCommit(); diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html index 86946b84e9..6e7b0126f7 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html @@ -9,6 +9,7 @@ <script src="/resources/testdriver-vendor.js"></script> <script src="/dom/events/scrolling/scroll_support.js"></script> <script src="/css/css-scroll-snap-2/resources/common.js"></script> + <script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script> <script src="/web-animations/testcommon.js"></script> </head> @@ -73,6 +74,7 @@ </div> <script> const scroller = document.getElementById("scroller"); + const snap_area_2 = document.getElementById("snap_area_2"); promise_test(async (t) => { await waitForCompositorCommit(); @@ -81,17 +83,23 @@ scrolling_function: async () => { scroller.scrollTo(0, snap_area_2.offsetTop); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "snapchanging fires on programmatic scrolls that changes a scroller's" + " snap targets."); promise_test(async (t) => { + await test_programmatic_scroll_onsnapchanging(t, scroller, scroller, + snap_area_2); + }, "programmatic scroll triggers Element.onsnapchanging when scrolling a " + + "snap container"); + + promise_test(async (t) => { checkSnapEventSupport("snapchanging"); await waitForScrollReset(t, scroller); await waitForCompositorCommit(); @@ -106,7 +114,7 @@ assert_equals(evt, null, "no snap event since scroller is back to top"); assert_equals(scroller.scrollTop, 0, "scroller snaps back to the top"); assert_equals(scroller.scrollLeft, 0, "scroller snaps back to the left"); - }); + }, "snapchanging should not fire since the snap target doesn't change."); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html index a9b003e6c5..815c3c0922 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html @@ -74,6 +74,8 @@ <div id="snap_area_3" class="yellow snap box"></div> <script> const scroller = document.scrollingElement; + const snap_area_2 = document.getElementById("snap_area_2"); + const snap_area_1 = document.getElementById("snap_area_1"); // Touch scroll test. promise_test(async (t) => { @@ -86,13 +88,13 @@ const end_pos = { x: scroller_middle, y: 0 }; await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "touch scrolling fires snapchanging."); // Wheel scroll test. @@ -104,13 +106,13 @@ await new test_driver.Actions().scroll(0, 0, 0, Math.round(snap_area_2.offsetTop / 2) + 1).send(); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "mouse wheel scroll triggers snapchanging."); // Scrollbar drag test. @@ -130,13 +132,13 @@ scrollbar_to_scroller_ratio; await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "scrollbar dragging fires snapchanging."); // Keyboard test. @@ -148,15 +150,20 @@ scroller.focus(); window.test_driver.send_keys(document.documentElement, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "keyboard scroll triggers snapchanging."); + promise_test(async (t) => { + await test_user_scroll_onsnapchanging(t, scroller, document, + snap_area_2); + }, "Document.onsnapchanging fires when scrolling a snap container."); + // Touch scroll test: peek at snap_area_2 and then drag back to // snap_area_1. promise_test(async (t) => { @@ -183,8 +190,8 @@ .send(); let evts = await evts_promise; assert_equals(evts.length, 2, "2 snapchanging events are seens"); - assertSnapEventDeprecated(evts[0], [snap_area_2.id]); - assertSnapEventDeprecated(evts[1], [snap_area_1.id]); + assertSnapEvent(evts[0], { block: snap_area_2, inline: null }); + assertSnapEvent(evts[1], { block: snap_area_1, inline: null }); }, "snapchanging fires as scroll moves through different snap targets."); // snapchanging doesn't fire test. diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html index 28ca96ec93..27f52efc71 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html @@ -9,6 +9,7 @@ <script src="/dom/events/scrolling/scroll_support.js"></script> <script src="/css/css-scroll-snap-2/resources/common.js"></script> <script src="/css/css-scroll-snap-2/resources/user-scroll-common.js"></script> + <script src="/web-animations/testcommon.js"></script> </head> <body> @@ -63,6 +64,8 @@ </div> <script> const scroller = document.getElementById("scroller"); + const snap_area_2 = document.getElementById("snap_area_2"); + const snap_area_1 = document.getElementById("snap_area_1"); // Touch scroll test. promise_test(async (t) => { @@ -75,13 +78,13 @@ const end_pos = { x: scroller_middle, y: 0 }; await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "touch scrolling fires snapchanging."); // Wheel scroll test. @@ -94,13 +97,13 @@ Math.round(snap_area_2.offsetTop / 2) + 1, { origin: scroller }).send(); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "mouse wheel scroll triggers snapchanging."); // Scrollbar drag test. @@ -121,13 +124,13 @@ scrollbar_to_scroller_ratio; await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "scrollbar dragging fires snapchanging."); // Keyboard test. @@ -139,13 +142,13 @@ scroller.focus(); window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "keyboard scroll triggers snapchanging."); // Touch scroll test: peek at snap_area_2 and then drag back to @@ -174,10 +177,15 @@ .send(); let evts = await evts_promise; assert_equals(evts.length, 2, "2 snapchanging events are seens"); - assertSnapEventDeprecated(evts[0], [snap_area_2.id]); - assertSnapEventDeprecated(evts[1], [snap_area_1.id]); + assertSnapEvent(evts[0], { block: snap_area_2, inline: null }); + assertSnapEvent(evts[1], { block: snap_area_1, inline: null }); }, "snapchanging fires as scroll moves through different snap targets."); + promise_test(async (t) => { + await test_user_scroll_onsnapchanging(t, scroller, scroller, + snap_area_2); + }, "Element.onsnapchanging fires when scrolling a snap container."); + // snapchanging doesn't fire test. promise_test(async (t) => { test_no_snapchanging(t, scroller, 10); diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-margin-editable.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-margin-editable.html new file mode 100644 index 0000000000..713502820d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-margin-editable.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin" /> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> +<body> + <style> + html { + padding: 10rem; + border-bottom: solid silver 150vh; + } + .target { + scroll-margin-top: 8rem; + font-size: 2rem; + border: solid grey 1px; + } + </style> + <div contenteditable class="target" id="target"></div> + <script> + promise_test(async (t) => { + document.addEventListener("scroll", t.unreached_func( + "document scrolled for already-in-view target.")); + document.getElementById("target").focus(); + await test_driver.send_keys(target, "a"); + await waitForCompositorCommit(); + }, "already-in-view div should not cause a scroll upon focus."); + </script> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html index 09b81e7c0d..a44c8d7c48 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html @@ -33,31 +33,48 @@ width: 100px; height: 100px; background-color: green; - display: inline-block; - position: relative; - } - .grid { position: absolute; - width: 350px; - height: 350px; } - .snap:focus { - background-color: blue; + .leftcol { + left: 110px; + } + .midcol { + left: 220px; + } + .rightcol { + left: 330px; + } + .toprow { + top: 110px; + } + .midrow { + top: 220px; + } + .bottomrow { + top: 330px; + } + .placeholder { + position: absolute; + top: 0px; + left: 0px; + width: 10px; + height: 10px; + background-color: black; + scroll-snap-align: start; } </style> <div class="scroller" id="scroller"> <div class="large-space"><div> - <div class="grid" id="grid"> - <div id="box1" tabindex="1" class="snap box">Box 1</div> - <div id="box2" tabindex="1" class="snap box">Box 2</div> - <div id="box3" tabindex="1" class="snap box">Box 3</div> - <div id="box4" tabindex="1" class="snap box">Box 4</div> - <div id="box5" tabindex="1" class="snap box">Box 5</div> - <div id="box6" tabindex="1" class="snap box">Box 6</div> - <div id="box7" tabindex="1" class="snap box">Box 7</div> - <div id="box8" tabindex="1" class="snap box">Box 8</div> - <div id="box9" tabindex="1" class="snap box">Box 9</div> - </div> + <div class="placeholder"></div> + <div id="box1" class="leftcol toprow snap box">Box 1</div> + <div id="box2" class="midcol toprow snap box">Box 2</div> + <div id="box3" class="rightcol toprow snap box">Box 3</div> + <div id="box4" class="leftcol midrow snap box">Box 4</div> + <div id="box5" class="midcol midrow snap box">Box 5</div> + <div id="box6" class="rightcol midrow snap box">Box 6</div> + <div id="box7" class="leftcol bottomrow snap box">Box 7</div> + <div id="box8" class="midcol bottomrow snap box">Box 8</div> + <div id="box9" class="rightcol bottomrow snap box">Box 9</div> </div> <script> window.onload = () => { @@ -79,50 +96,60 @@ await waitForCompositorCommit(); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[], + /*aligned_elements_x=*/[box(1), box(4), box(7)], /*aligned_elements_y=*/[box(1), box(2), box(3)], - /*axis=*/ "y", - /*expected_target_x=*/null, + /*axis=*/ "both", + /*expected_target_x=*/box(1), /*expected_target_y=*/box(1)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[], + /*aligned_elements_x=*/[box(1), box(4), box(7)], /*aligned_elements_y=*/[box(4), box(5), box(6)], - /*axis=*/ "y", - /*expected_target_x=*/null, + /*axis=*/"both", + /*expected_target_x=*/box(4), /*expected_target_y=*/box(4)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[], + /*aligned_elements_x=*/[box(1), box(4), box(7)], /*aligned_elements_y=*/[box(7), box(8), box(9)], - /*axis=*/"y", - /*expected_target_x=*/null, + /*axis=*/"both", + /*expected_target_x=*/box(7), /*expected_target_y=*/box(7)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[box(1), box(4), box(7)], - /*aligned_elements_y=*/[], - /*axis=*/"x", - /*expected_target_x=*/box(1)); + /*aligned_elements_x=*/[box(2), box(5), box(8)], + /*aligned_elements_y=*/[box(1), box(2), box(3)], + /*axis=*/ "both", + /*expected_target_x=*/box(2), + /*expected_target_y=*/box(2)); await runScrollSnapSelectionVerificationTest(t, scroller, /*aligned_elements_x=*/[box(2), box(5), box(8)], - /*aligned_elements_y=*/[], - /*axis=*/"x", - /*expected_target_x=*/box(2)); + /*aligned_elements_y=*/[box(4), box(5), box(6)], + /*axis=*/"both", + /*expected_target_x=*/box(5), + /*expected_target_y=*/box(5)); + + await runScrollSnapSelectionVerificationTest(t, scroller, + /*aligned_elements_x=*/[box(2), box(5), box(8)], + /*aligned_elements_y=*/[box(7), box(8), box(9)], + /*axis=*/"both", + /*expected_target_x=*/box(8), + /*expected_target_y=*/box(8)); await runScrollSnapSelectionVerificationTest(t, scroller, /*aligned_elements_x=*/[box(3), box(6), box(9)], - /*aligned_elements_y=*/[], - /*axis=*/"x", - /*expected_target_x=*/box(3)); + /*aligned_elements_y=*/[box(1), box(2), box(3)], + /*axis=*/ "both", + /*expected_target_x=*/box(3), + /*expected_target_y=*/box(3)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[box(2), box(5), box(8)], + /*aligned_elements_x=*/[box(3), box(6), box(9)], /*aligned_elements_y=*/[box(4), box(5), box(6)], /*axis=*/"both", - /*expected_target_x=*/box(5), - /*expected_target_y=*/box(5)); + /*expected_target_x=*/box(6), + /*expected_target_y=*/box(6)); }, "scroller prefers target aligned in both axes."); promise_test(async (t) => { @@ -132,13 +159,16 @@ box8.style.top = `${initial_box8_top}px`; }); + // Snap to box7's row and column. + scroller.scrollTo(box7.offsetLeft, box7.offsetTop); + // Move box 8 below box7 and box9. - box8.style.top = `${2 * box8.offsetTop}px`; + box8.style.top = `${box8.offsetTop + 50}px`; // Snap to box8. scroller.scrollTop = box8.offsetTop; - // Test that if box7 and box9 are also shifted to align with box7, + // Test that if box7 and box9 are also shifted to align with box8, // box8 is still treated as the selected snap target despite box7 being // aligned on both axes. runLayoutSnapSeletionVerificationTest(t, scroller, [box7, box9], diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html index 6bc47d15ef..ae445d2861 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html @@ -53,83 +53,122 @@ // ------------------------- // | Box 7 | Box 8 | Box 9 | // ------------------------- - // This function just gets the numbers beside |box_number| on each row. - // E.g. 4: 4%3 = 1; so the numbers we want are 5 (4+1) and 6 (4+2). - function getAlignedNumbers(n) { + // This function just gets the boxes beside boxn on each row. + // E.g. box4: 4%3 = 1; so the boxes we want are box5 (4+1) and box6 (4+2). + function getAlignedBoxes(n) { n = parseInt(n); const mod_3 = n % 3; + let n1 = n - 1, n2 = n - 2; if (mod_3 == 1) { - return [n + 1, n + 2]; + n1 = n + 1; + n2 = n + 2; } else if (mod_3 == 2) { - return [n - 1, n + 1]; + n1 = n - 1; + n2 = n + 1; } - return [n - 1, n - 2]; + return [document.getElementById(`box${n1}`), + document.getElementById(`box${n2}`)]; } + function stashResult(key, result) { fetch(`/css/css-scroll-snap/snap-after-relayout` + `/multiple-aligned-targets/stash.py?key=${key}`, { method: "POST", - body: result + body: JSON.stringify(result) }).then(() => { window.close(); }); } - function assert_equals(v1, v2) { + + function assert_equals(test_number, v1, v2, description) { if (v1 != v2) { - throw new Error(`Expected equality of v1(${v1}) and v2(${v2}).`); + throw new Error( + `Test ${n} expected equality of ${v1} and ${v2}, ` + + `Description: ${description}`); } } - async function record() { - let key = (new URL(document.location)).searchParams.get("key"); - try { - // Get the id of that targeted element. - const target_id = location.hash.substring(1); - const box_number = target_id.substring(3); - // Get the elements aligned with the targeted element. - const target = document.getElementById(target_id); - if (target == null) { - throw new Error("Null hash fragment target."); + async function waitForScrollReset(scroller, x = 0, y = 0) { + return new Promise((resolve) => { + if (scroller.scrollLeft == x && scroller.scrollTop == y) { + resolve(); + } else { + scroller.addEventListener("scrollend", resolve); + scroller.scrollTo(x, y); } - let [aligned_number_1, aligned_number_2] = - getAlignedNumbers(box_number); - const aligned_box_1 = document.getElementById(`box${aligned_number_1}`); - const aligned_box_2 = document.getElementById(`box${aligned_number_2}`); + }); + } - // Make sure all the boxes are equally aligned. - assert_equals(aligned_box_1.offsetTop, target.offsetTop); - assert_equals(aligned_box_1.offsetTop, aligned_box_2.offsetTop); - - // Scroll to the aligned boxes if necessary. - if (scroller.scrollTop != target.offsetTop) { - const scrollend_promise = new Promise((res) => { - scroller.addEventListener(res); - }); - scroller.scrollTop = target.offsetTop; - await scrollend_promise; + async function setLocationHash(id) { + return new Promise((resolve) => { + if (location.hash === `#${id}`) { + resolve(); + } else { + window.addEventListener("hashchange", resolve); + location.hash = `#${id}`; } + }); + } + + let result = { + passed: 0, + errors: "", + }; + + async function test(n) { + try { + const target_id = `box${n}`; + const target = document.getElementById(target_id); + + // Make boxn the targeted element. + await setLocationHash(target_id); + + // Reset the scroll position. + await waitForScrollReset(scroller); + + const aligned_boxes = getAlignedBoxes(n); + // Make sure all the boxes are equally aligned. + assert_equals(n, aligned_boxes[0].offsetTop, target.offsetTop, + `${aligned_boxes[0].id} is at offset ${target.offsetTop}`); + assert_equals(n, aligned_boxes[1].offsetTop, target.offsetTop, + `${aligned_boxes[1].id} is at offset ${target.offsetTop}`); - // Save target's original top and move it down by 100px; + // Scroll to the aligned boxes. + await waitForScrollReset(scroller, 0, target.offsetTop); + assert_equals(n, scroller.scrollTop, target.offsetTop, + `scrolled to ${target.id} at offset ${target.offsetTop}`); + + // Save target's original top. const original_top = getComputedStyle(target).top; + const original_offset_top = target.offsetTop; + + // Move target along the y axis. target.style.top = `${target.offsetTop + 100}px`; // Assert that scroller followed target as it moved down. - assert_equals(scroller.scrollTop, target.offsetTop); + assert_equals(n, scroller.scrollTop, target.offsetTop, + `scrolled followed ${target.id} to offset ${target.offsetTop}`); // Cleanup: undo style change. - target.style.top = `${original_top}px`; + target.style.top = original_top; + assert_equals(n, target.offsetTop, original_offset_top, + `${target.id} is put back to offset ${original_offset_top}`); - // Stash result. - stashResult(key, "PASS"); + // Record the result. + result.passed += 1; } catch (error) { - stashResult(key, error.message); + result.errors = [result.errors, error.message].join(); } } - window.onload = () => { - window.requestAnimationFrame(function () { - window.requestAnimationFrame(record); - }) + window.onload = async () => { + let key = (new URL(document.location)).searchParams.get("key"); + + for (const n of [1, 2, 3, 4, 5, 6, 7, 8, 9]) { + await test(n); + } + + stashResult(key, result); } </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html index 6221b0e4b5..ff81dc78c5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html @@ -25,7 +25,7 @@ const response = await fetch(url); const text = await response.text(); if (text) { - resolve(text); + resolve(JSON.parse(text)); } else { requestAnimationFrame(fetchResultInternal.bind(this, url)); } @@ -35,28 +35,17 @@ } function runTest() { - function test(n) { - return promise_test(async (t) => { - let key = token(); + promise_test(async (t) => { + let key = token(); - test_driver.bless("Open a URL with a text fragment directive", () => { - window.open(`prefer-targeted-element-main-frame-target.html` + - `?key=${key}#box${n}`, "_blank", "noopener"); - }); + test_driver.bless("Open a URL", () => { + window.open(`prefer-targeted-element-main-frame-target.html` + + `?key=${key}`, "_blank", "noopener"); + }); - assert_equals(await fetchResult(key), "PASS"); - }, `targeted box${n} is selected snap target.`); - } - - test(1); - test(2); - test(3); - test(4); - test(5); - test(6); - test(7); - test(8); - test(9); + const result = await fetchResult(key); + assert_equals([result.passed, result.errors].join(), "9,"); + }, "targeted box is selected snap target."); } </script> </body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.html index c056990934..eff8667531 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-color auto on the root defers to ::-webkit-scrollbar</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.html index 70bfa5586d..1dfc63d68e 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-color non-auto on the root overrides ::-webkit-scrollbar</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.html index 3fb42bedea..1dc3c64f79 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-color on scrollable areas correctly interacts with ::-webkit-scrollbar on container</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.html index 5932cc5d4e..cff00c634f 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.html index 52d0027fba..d8ddc43c1c 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar on scrollable area</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.html index 11f0de750b..55947c984c 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.html @@ -4,7 +4,7 @@ <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> <link rel="match" href="scrollbar-color-006-ref.html" /> <link rel="mismatch" href="scrollbar-color-006-mis-ref.html" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <style> .container { scrollbar-gutter: stable; diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.html index 75358fdf68..0ef07089de 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.html @@ -4,7 +4,7 @@ <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> <link rel="match" href="scrollbar-color-007-ref.html" /> <link rel="mismatch" href="scrollbar-color-007-mis-ref.html" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <style> .container { scrollbar-gutter: stable; diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.html index 576193814c..01e3848603 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.html @@ -4,7 +4,7 @@ <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> <link rel="match" href="scrollbar-color-008-ref.html" /> <link rel="mismatch" href="scrollbar-color-008-mis-ref.html" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <style> body { scrollbar-color: yellow blue; diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.html index 312bbc731b..6b17c19c15 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.html @@ -4,7 +4,7 @@ <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> <link rel="match" href="scrollbar-color-009-ref.html" /> <link rel="mismatch" href="scrollbar-color-009-mis-ref.html" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <style> :root { scrollbar-color: yellow blue; diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.html index 9f560613e0..cc78504ba7 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.html @@ -4,7 +4,7 @@ <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> <link rel="match" href="scrollbar-color-010-ref.html" /> <link rel="mismatch" href="scrollbar-color-010-mis-ref.html" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <style> :root { scrollbar-color: yellow blue; diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-8.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-8.html index 4926fadaca..8f1cd13a2f 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-8.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-8.html @@ -2,7 +2,7 @@ <html class="reftest-wait"> <title>Dynamically set scrollbar-colors when starts ::-webkit-scrollbar and ensure scrollbars update</title> <link rel="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#color-compat" /> <link rel="match" href="scrollbar-color-dynamic-8-ref.html" /> <script src="/common/reftest-wait.js"></script> <style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.html index ea11703067..3c28dff498 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-width auto on the root defers to ::-webkit-scrollbar on the root</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.html index a5f60dc28b..e9c22c83a9 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-width thin on the root overrides ::-webkit-scrollbar on the root</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.html index a685d6c05b..eefd5538b8 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-width none on the root overrides ::-webkit-scrollbar on the root</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.html index f6460a4797..4a8a9182e5 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-width thin on the root overridess ::-webkit-scrollbar</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.html index b3702015d5..b8ca3cbb94 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-width thin on the body doesn't override ::-webkit-scrollbar on root</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.html index 88a6af27ba..7fc1ae120a 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-width on scrollable areas correctly interacts with ::-webkit-scrollbar</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.html index 7d64131743..29b4e47628 100644 --- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.html @@ -2,7 +2,7 @@ <meta charset="utf-8"> <title>CSS Scrollbars: scrollbar-width on scrollable areas correctly interacts with ::-webkit-scrollbar on container</title> <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> -<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#width-compat" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/height-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/height-interpolation.html index 10ceed5b2c..75e0977fa1 100644 --- a/testing/web-platform/tests/css/css-sizing/animation/height-interpolation.html +++ b/testing/web-platform/tests/css/css-sizing/animation/height-interpolation.html @@ -66,6 +66,12 @@ test_no_interpolation({ to: '20px', }); +test_no_interpolation({ + property: 'height', + from: 'auto', + to: '20px', +}); + test_interpolation({ property: 'height', from: '0px', @@ -78,4 +84,41 @@ test_interpolation({ {at: 1, expect: '100px'}, {at: 1.5, expect: '150px'} ]); + +test_no_interpolation({ + property: 'height', + from: 'auto', + to: 'min-content', +}); + +test_no_interpolation({ + property: 'height', + from: 'fit-content', + to: '20px', +}); + +test_no_interpolation({ + property: 'height', + from: 'max-content', + to: 'fit-content', +}); + +test_no_interpolation({ + property: 'height', + from: 'max-content', + to: 'stretch', +}); + +test_no_interpolation({ + property: 'height', + from: 'max-content', + to: neutralKeyframe, +}); + +test_no_interpolation({ + property: 'height', + from: neutralKeyframe, + to: 'fit-content', +}); + </script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/max-height-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/max-height-interpolation.html index c4cab0e1cf..f2af3629bc 100644 --- a/testing/web-platform/tests/css/css-sizing/animation/max-height-interpolation.html +++ b/testing/web-platform/tests/css/css-sizing/animation/max-height-interpolation.html @@ -72,6 +72,12 @@ test_no_interpolation({ to: '20px', }); +test_no_interpolation({ + property: 'max-height', + from: 'none', + to: '20px', +}); + test_interpolation({ property: 'max-height', from: '0px', @@ -84,4 +90,35 @@ test_interpolation({ {at: 1, expect: '100px'}, {at: 1.5, expect: '150px'} ]); + +test_no_interpolation({ + property: 'max-height', + from: 'none', + to: 'max-content', +}); + +test_no_interpolation({ + property: 'max-height', + from: 'stretch', + to: 'fit-content', +}); + +test_no_interpolation({ + property: 'max-height', + from: '20px', + to: 'min-content', +}); + +test_no_interpolation({ + property: 'max-height', + from: 'min-content', + to: neutralKeyframe, +}); + +test_no_interpolation({ + property: 'max-height', + from: neutralKeyframe, + to: 'max-content', +}); + </script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/max-width-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/max-width-interpolation.html index 111199baa7..4d1614db6d 100644 --- a/testing/web-platform/tests/css/css-sizing/animation/max-width-interpolation.html +++ b/testing/web-platform/tests/css/css-sizing/animation/max-width-interpolation.html @@ -65,6 +65,12 @@ test_no_interpolation({ to: '20px', }); +test_no_interpolation({ + property: 'max-width', + from: 'none', + to: '20px', +}); + test_interpolation({ property: 'max-width', from: '0px', @@ -77,4 +83,35 @@ test_interpolation({ {at: 1, expect: '100px'}, {at: 1.5, expect: '150px'} ]); + +test_no_interpolation({ + property: 'max-width', + from: 'stretch', + to: 'none', +}); + +test_no_interpolation({ + property: 'max-width', + from: 'fit-content', + to: '20px', +}); + +test_no_interpolation({ + property: 'max-width', + from: 'max-content', + to: 'min-content', +}); + +test_no_interpolation({ + property: 'max-width', + from: 'min-content', + to: neutralKeyframe, +}); + +test_no_interpolation({ + property: 'max-width', + from: neutralKeyframe, + to: 'fit-content', +}); + </script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/min-height-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/min-height-interpolation.html index 6fd5b4e2f5..33f3fd1d7f 100644 --- a/testing/web-platform/tests/css/css-sizing/animation/min-height-interpolation.html +++ b/testing/web-platform/tests/css/css-sizing/animation/min-height-interpolation.html @@ -65,6 +65,12 @@ test_no_interpolation({ to: '20px', }); +test_no_interpolation({ + property: 'min-height', + from: 'auto', + to: '20px', +}); + test_interpolation({ property: 'min-height', from: '0px', @@ -77,4 +83,35 @@ test_interpolation({ {at: 1, expect: '100px'}, {at: 1.5, expect: '150px'} ]); + +test_no_interpolation({ + property: 'min-height', + from: 'auto', + to: '0px', +}); + +test_no_interpolation({ + property: 'min-height', + from: 'fit-content', + to: 'min-content', +}); + +test_no_interpolation({ + property: 'min-height', + from: 'max-content', + to: 'stretch', +}); + +test_no_interpolation({ + property: 'min-height', + from: 'fit-content', + to: neutralKeyframe, +}); + +test_no_interpolation({ + property: 'min-height', + from: neutralKeyframe, + to: 'min-content', +}); + </script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/min-width-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/min-width-interpolation.html index d11fb3d5cb..e9edf0c6ec 100644 --- a/testing/web-platform/tests/css/css-sizing/animation/min-width-interpolation.html +++ b/testing/web-platform/tests/css/css-sizing/animation/min-width-interpolation.html @@ -64,6 +64,12 @@ test_no_interpolation({ to: '20px', }); +test_no_interpolation({ + property: 'min-width', + from: 'auto', + to: '20px', +}); + test_interpolation({ property: 'min-width', from: '0px', @@ -76,4 +82,35 @@ test_interpolation({ {at: 1, expect: '100px'}, {at: 1.5, expect: '150px'} ]); + +test_no_interpolation({ + property: 'min-width', + from: '0px', + to: 'stretch', +}); + +test_no_interpolation({ + property: 'min-width', + from: 'min-content', + to: 'fit-content', +}); + +test_no_interpolation({ + property: 'min-width', + from: 'auto', + to: 'max-content', +}); + +test_no_interpolation({ + property: 'min-width', + from: 'fit-content', + to: neutralKeyframe, +}); + +test_no_interpolation({ + property: 'min-width', + from: neutralKeyframe, + to: 'max-content', +}); + </script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/width-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/width-interpolation.html index d165c994b5..b229b5bc5e 100644 --- a/testing/web-platform/tests/css/css-sizing/animation/width-interpolation.html +++ b/testing/web-platform/tests/css/css-sizing/animation/width-interpolation.html @@ -97,6 +97,12 @@ test_interpolation({ {at: 1.5, expect: '145px'} ]); +test_no_interpolation({ + property: 'width', + from: 'auto', + to: '40px', +}); + // The "vw" unit equals to 1% of the width of the viewport's initial containing // block: // https://developer.mozilla.org/en-US/docs/Web/CSS/length @@ -123,5 +129,42 @@ test_interpolation({ {at: 1, expect: calc(1)}, {at: 1.5, expect: calc(1.5)} ]); + +test_no_interpolation({ + property: 'width', + from: 'auto', + to: 'fit-content', +}); + +test_no_interpolation({ + property: 'width', + from: 'stretch', + to: 'auto', +}); + +test_no_interpolation({ + property: 'width', + from: '30px', + to: 'fit-content', +}); + +test_no_interpolation({ + property: 'width', + from: 'max-content', + to: 'min-content', +}); + +test_no_interpolation({ + property: 'width', + from: 'max-content', + to: neutralKeyframe, +}); + +test_no_interpolation({ + property: 'width', + from: neutralKeyframe, + to: 'min-content', +}); + </script> </body> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-sizing/aspect-ratio/WEB_FEATURES.yml new file mode 100644 index 0000000000..65e2142a16 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: aspect-ratio + files: "**" diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv Binary files differdeleted file mode 100644 index 29903c0a81..0000000000 --- a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv +++ /dev/null diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.webm b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.webm Binary files differnew file mode 100644 index 0000000000..74af43afeb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.webm diff --git a/testing/web-platform/tests/css/css-tables/crashtests/caption-repaint-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/caption-repaint-crash.html new file mode 100644 index 0000000000..6a024d0c1d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/caption-repaint-crash.html @@ -0,0 +1,19 @@ +<style> +*:defined { + outline: currentColor dashed; +} +*:read-write { + animation: kf 200ms ease-out 16384 alternate-reverse backwards +} +@keyframes kf { + 20% { + clip-path: polygon(1px 0.75em, 128px 100%) + } +} +</style> +<script> +document.addEventListener("DOMContentLoaded", () => { + a.createCaption() +}) +</script> +<table id="a" contenteditable="true" align="left"> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-inline-size-box-sizing-quirks-ref.html b/testing/web-platform/tests/css/css-tables/table-cell-inline-size-box-sizing-quirks-ref.html new file mode 100644 index 0000000000..4b97b4499b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-inline-size-box-sizing-quirks-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + td { + width: 50px; + padding: 10px; + border: 1px solid black; + box-sizing: border-box; + } +</style> +<table> + <tr> + <td>A</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-inline-size-box-sizing-quirks.html b/testing/web-platform/tests/css/css-tables/table-cell-inline-size-box-sizing-quirks.html new file mode 100644 index 0000000000..a59a0672e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-inline-size-box-sizing-quirks.html @@ -0,0 +1,19 @@ +<!~quirks> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://quirks.spec.whatwg.org/#the-table-cell-height-box-sizing-quirk"> +<link rel="match" href="table-cell-inline-size-box-sizing-quirks-ref.html"> +<title>Table cell box-sizing quirk doesn't force inline-axis to be content-box</title> +<style> + td { + width: 50px; + padding: 10px; + border: 1px solid black; + box-sizing: border-box; + } +</style> +<table> + <tr> + <td>A</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-rows-with-zero-columns.html b/testing/web-platform/tests/css/css-tables/tentative/table-rows-with-zero-columns.html new file mode 100644 index 0000000000..da9e0098a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-rows-with-zero-columns.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: size of table rows when the table has no columns</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10132"> +<meta name="assert" content="If a table has rows but no columns, the rows are as wide as the inner width of the table."> + +<style> +#tests table { + box-sizing: border-box; + width: 60px; + height: 60px; +} +</style> + +<div id="log"></div> + +<main id="tests"> + <table cellspacing="0"> + <tr data-expected-width="60" data-expected-height="60"></tr> + </table> + + <table cellspacing="0"> + <tr data-expected-width="60" data-expected-height="30"></tr> + <tr data-expected-width="60" data-expected-height="30"></tr> + </table> + + <table cellspacing="10"> + <tr data-expected-width="60" data-expected-height="40"></tr> + </table> + + <table cellspacing="10"> + <tr data-expected-width="60" data-expected-height="15"></tr> + <tr data-expected-width="60" data-expected-height="15"></tr> + </table> + + <table cellspacing="0" border="5"> + <tr data-expected-width="50" data-expected-height="50"></tr> + </table> + + <table cellspacing="0" border="5"> + <tr data-expected-width="50" data-expected-height="25"></tr> + <tr data-expected-width="50" data-expected-height="25"></tr> + </table> + + <table cellspacing="10" border="5"> + <tr data-expected-width="50" data-expected-height="30"></tr> + </table> + + <table cellspacing="10" border="5"> + <tr data-expected-width="50" data-expected-height="10"></tr> + <tr data-expected-width="50" data-expected-height="10"></tr> + </table> +</main> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +checkLayout("tr"); +</script> diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-029.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-029.html new file mode 100644 index 0000000000..c390d2272d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-029.html @@ -0,0 +1,46 @@ +<!doctype html> +<html> +<meta charset="utf-8"> +<title>CSS Text — line breaking around Break After and Exclamation</title> +<meta name=assert content="When ‘white-space’ allows wrapping, line breaking behavior defined for IS and QU line-breaking classes in [UAX14] must be honored."> +<link rel=help href="https://www.w3.org/TR/css-text-3/#line-breaking"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1880362"> +<link rel=author title="Makoto Kato" href="mailto:m_kato@ga2.so-net.ne.jp"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.test > div { + font-family: monospace; + font-size: 25px; + width: 1ch; + line-height: 30px; +} +</style> +<body> + +<div class="test"> + <div id="nonbreakable1">1.”</div> + <div id="nonbreakable2">a.”</div> + <div id="nonbreakable3">1."</div> + <div id="nonbreakable4">a."</div> +</div> + +<script> +test(function() { + assert_true(document.getElementById('nonbreakable1').offsetHeight <= 35); +}, "U+0x0031 (NU), U+0x002E (IS) and U+0x201D (QU)"); +test(function() { + assert_true(document.getElementById('nonbreakable2').offsetHeight <= 35); +}, "U+0x0041 (AL), U+0x002E (IS) and U+0x201D (QU)"); +test(function() { + assert_true(document.getElementById('nonbreakable3').offsetHeight <= 35); +}, "U+0x0031 (NU), U+0x002E (IS) and U+0x0022 (QU)"); +test(function() { + assert_true(document.getElementById('nonbreakable4').offsetHeight <= 35); +}, "U+0x0041 (AL), U+0x002E (IS) and U+0x0022 (QU)"); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-text/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..e06782e8f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/parsing/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: text-spacing-trim + files: + - text-spacing-trim-* diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control-ref.html new file mode 100644 index 0000000000..c30c5a0178 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="ja"> + <head> + <meta charset="utf-8"> + <title>text-align: justify for a bidi control + a CJK ideograph</title> + <style> + p { text-align: justify; width: 3.9em; } + </style> + </head> + <body> + <p>東京都東京都東京都</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control.html new file mode 100644 index 0000000000..934e947b75 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="ja"> + <head> + <meta charset="utf-8"> + <title>text-align: justify for a bidi control + a CJK ideograph</title> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property"> + <link rel="help" href="https://crbug.com/331680200"> + <link rel="match" href="text-align-justify-bidi-control-ref.html"> + <style> + p { text-align: justify; width: 3.9em; } + </style> + </head> + <body> + <p>東⁦京都東京⁩都東京都</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br-ref.html new file mode 100644 index 0000000000..efe5481e82 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="ja"> + <head> + <title>text-align-last: justify for <br></title> + <meta charset="utf-8"> + <style> + .left { float: left; display: inline-block; } + .right { float: right; display: inline-block; } + </style> + </head> + <body> + <p><span class="left">東<br>京</span><span class="right">京<br>城</span></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br.html new file mode 100644 index 0000000000..5685da088b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="ja"> + <head> + <meta charset="utf-8"> + <title>text-align-last: justify for <br></title> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property"> + <link rel="help" href="https://crbug.com/331729346"> + <link rel="match" href="text-align-last-justify-br-ref.html"> + <style> + p { + text-align-last: justify; + } + </style> + </head> + <body> + <p>東京<br>京城</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-text/text-spacing-trim/WEB_FEATURES.yml new file mode 100644 index 0000000000..329fa18e2a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: text-spacing-trim + files: "**" diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html new file mode 100644 index 0000000000..17e778165d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Level 3: glyphs can only hang at the edge of a line</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Glyphs can't hang at the end of the line if there are non-hanging glyphs after them in the line"> + +<style> + div { + font: 25px/1 Ahem; + width: 5ch; + height: 4ch; + margin-left: -1ch; + background: + linear-gradient(red, red) 1ch 0 / 4ch 1ch no-repeat, + linear-gradient(green, green) 1ch 0 / 4ch 4ch no-repeat; + + text-align: right; + white-space: normal; + } + span { + color: transparent; + background: green; + } + .break-spaces { + white-space: break-spaces; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div><span>X　　</span><span class="break-spaces"> </span></div> + +<!-- + With white-space: normal, ideographic spaces (U+3000) are preserved but do + hang. But here they are followed by spaces with white-space: break-spaces, + which are preserved and never hang. Since only glyphs at the edge of a line + can hang, this prevents the ideographic spaces from hanging. +--> diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html new file mode 100644 index 0000000000..6c486ac69c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Level 3: pre-wrap conditionality when not at line end</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Spaces with white-space: pre-wrap always hang unconditionally when followed by other unconditionally hanging glyphs"> + +<style> + div { + font: 25px/1 Ahem; + width: 5ch; + height: 4ch; + margin-left: -1ch; + background: + linear-gradient(red, red) 4ch 0 / 1ch 4ch no-repeat, + linear-gradient(green, green) 1ch 0 / 3ch 4ch no-repeat; + + white-space: normal; + text-align: right; + color: green; + } + .pre-wrap { + white-space: pre-wrap; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div><span class="pre-wrap">X </span>　<br>X<br>X<br>X</div> + +<!-- + With white-space: pre-wrap, spaces hang conditionally when they are followed + by a forced line break. If instead they are followed by a glyph that hangs + unconditionally, such as the ideographic space (U+3000) with + white-space: normal, then they are not followed by a forced line break, even + if that hanging glyph might be, and thus hang unconditionally as well. +--> diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html new file mode 100644 index 0000000000..b8f4df5967 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Level 3: unconditional hanging spaces don't hang before non-overflowing conditionals</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Hanging can only happen at the end of a line, so unconditionally hanging spaces can only hang before conditionally hanging spaces if the latter would fully overflow"> + +<style> + div { + font: 25px/1 Ahem; + width: 4ch; + height: 4ch; + background: + linear-gradient(green, green) 0 1ch / 1ch 1ch no-repeat, + linear-gradient(green, green) 0 2ch / 2ch 1ch no-repeat, + linear-gradient(green, green) 1ch 3ch / 3ch 1ch no-repeat, + red; + + text-align: right; + white-space: normal; + color: green; + } + .pre-wrap { + white-space: pre-wrap; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div>XXXX　　<span class="pre-wrap"> </span><br> + XXX　　<span class="pre-wrap"> </span><br> + XX　　<span class="pre-wrap"> </span><br> + X　　<span class="pre-wrap"> </span></div> + +<!-- + With white-space: normal, an ideographic space (U+3000) hangs unconditionally, + as long as every glyph after it until the end of the line also hangs. + With white-space: pre-wrap, a sequence of spaces that is followed by a forced + line break (where the end of the block counts as a forced line break) hangs + conditionally, meaning that the part of it that doesn't fit in the line's + available width is the only one that hangs. (This is independent to whether it + would overflow the block's content area.) + + Therefore, unconditional hanging glyphs before such a sequence of conditional + hanging glyphs can only hang if the conditional sequence overflows the line's + available width. +--> diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html new file mode 100644 index 0000000000..d3574427b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> + +<style> +section { + width: 50ch; + font-family: monospace; +} +.test { color: blue; } +.ref { color: orange; } +.mis { color: magenta; } + +</style> + +<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. + +<section class=test> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> + +<section class=ref> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=mis> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html new file mode 100644 index 0000000000..74d6b392f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> + +<style> +section { + width: 50ch; + font-family: monospace; +} +.test, .ref { + text-wrap: balance; +} +.test { color: blue; } +.ref { color: orange; } +.mis { color: magenta; } + +</style> + +<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. + +<section class=test> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=ref> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=mis> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html new file mode 100644 index 0000000000..6e01737173 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<style> +body { + font: 20px/1 monospace; +} +.float { + float: left; + width: 15ch; + height: 150px; + background: silver; +} +.mask { + width: 15ch; + height: 150px; + background: green; + position: absolute; + left: 15ch; +} +.test { + width: 28ch; + background: red; +} +</style> +</head> + +<body> +<p>There should be no red:</p> +<div class="float"> + <div class="mask"></div> +</div> +<p class="test"> +Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit. +</p> +</body> + diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html new file mode 100644 index 0000000000..f5494708ea --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>CSS test: balancing and forced breaks</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> +<link rel='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'> +<meta name="assert" content="Groups of lines separated by a forced line break are processed separately."> +<link rel="match" href="reference/text-wrap-balance-004-ref.html"> +<link rel="mismatch" href="reference/text-wrap-balance-004-misref.html"> + +<style> +section { + width: 50ch; + font-family: monospace; +} +.test, .ref { + text-wrap: balance; +} +.test { color: blue; } +.ref { color: orange; } +.mis { color: magenta; } + +</style> + +<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. + +<section class=test> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> + +<section class=ref> +<div> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +</div> +<div> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</div> +</section> + +<section class=mis> +Lorem ipsum dolor sit amet, +consectetur adipiscing elit, +sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. +Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi +ut aliquip ex ea commodo consequat. +<br> +Duis aute irure dolor in reprehenderit +in voluptate velit +esse cillum dolore eu fugiat nulla pariatur. +</section> diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html new file mode 100644 index 0000000000..5343e84598 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<link rel="match" href="reference/text-wrap-balance-float-006-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1888449"> +<style> +body { + font: 20px/1 monospace; +} +.float { + float: left; + width: 15ch; + height: 150px; + background: silver; +} +.mask { + width: 15ch; + height: 150px; + background: green; + position: absolute; + left: 15ch; +} +.test { + width: 28ch; + text-wrap: balance; + background: red; +} +</style> +</head> + +<body> +<p>There should be no red:</p> +<div class="float"> + <div class="mask"></div> +</div> +<p class="test"> +Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit. +</p> +</body> + diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html new file mode 100644 index 0000000000..b9d50684d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap"> +<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container { + width: 20ch; +} +.balance { + text-wrap: balance; +} +</style> +<div id="container" dir="rtl" lang="AR"></div> +<script> +const container = document.getElementById('container'); +for (const text of [ + 'ينبغي تحقيق التوازن', + 'يجب ألا تؤدي موازنة التفاف النص إلى تغيير عدد الأسطر', + 'يجب ألا تؤدي موازنة التفاف النص إلى تغيير عدد الأسطر لهذه الفقرة النصية', + ]) { + const normal = document.createElement('div'); + const balance = document.createElement('div'); + normal.textContent = text; + balance.textContent = text; + balance.classList.add('balance'); + container.appendChild(normal); + container.appendChild(balance); + test(() => { + assert_equals(normal.offsetHeight, balance.offsetHeight); + }); +} +</script> diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html new file mode 100644 index 0000000000..0c0f6b55ca --- /dev/null +++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap"> +<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container { + height: 15ch; + writing-mode: vertical-rl; +} +.balance { + text-wrap: balance; +} +</style> +<div id="container"></div> +<script> +const container = document.getElementById('container'); +for (const text of [ + '平衡应该', + '平衡文本换行不应改变行数', + '平衡文本换行不应改变该文本段落的行数', + ]) { + const normal = document.createElement('div'); + const balance = document.createElement('div'); + normal.textContent = text; + balance.textContent = text; + balance.classList.add('balance'); + container.appendChild(normal); + container.appendChild(balance); + test(() => { + assert_equals(normal.offsetWidth, balance.offsetWidth); + }); +} +</script> diff --git a/testing/web-platform/tests/css/css-transforms/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-transforms/WEB_FEATURES.yml new file mode 100644 index 0000000000..ca13ab5ae1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/WEB_FEATURES.yml @@ -0,0 +1,6 @@ +features: +- name: transforms3d + files: + - "*3d*" + - backface-visibility-* + - perspective-* diff --git a/testing/web-platform/tests/css/css-transforms/animation/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-transforms/animation/WEB_FEATURES.yml new file mode 100644 index 0000000000..831086f99e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/WEB_FEATURES.yml @@ -0,0 +1,5 @@ +features: +- name: transforms3d + files: + - backface-visibility-* + - perspective-* diff --git a/testing/web-platform/tests/css/css-transforms/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-transforms/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..831086f99e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/WEB_FEATURES.yml @@ -0,0 +1,5 @@ +features: +- name: transforms3d + files: + - backface-visibility-* + - perspective-* diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-iframe-002-contents.html b/testing/web-platform/tests/css/css-transforms/support/transform-iframe-002-contents.html new file mode 100644 index 0000000000..84f079c90b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-iframe-002-contents.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Iframe (contents)</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <style> + body { + background: green; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-iframe-scroll-position-contents.html b/testing/web-platform/tests/css/css-transforms/support/transform-iframe-scroll-position-contents.html new file mode 100644 index 0000000000..8efcdafc83 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-iframe-scroll-position-contents.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + +<html> + <head> + <title>CSS Test (Transforms): iframe scroll position</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <style> + html { background: red; } + </style> + </head> + + <body> + <!-- Make a large red page with a small green and blue square that is scrolled to immediately. --> + <div style="position: absolute; width: 50px; height: 25px; top: 3000px; left: 3000px; background: green;"></div> + <div style="position: absolute; width: 50px; height: 25px; top: 3025px; left: 3000px; background: blue;"></div> + <div style="width: 10000px; height: 10000px;"></div> + <script> + window.scrollTo(3000, 3000); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-iframe-002.html b/testing/web-platform/tests/css/css-transforms/transform-iframe-002.html new file mode 100644 index 0000000000..b9b10ea368 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-iframe-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Iframe</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="This test ensures that an iframe element can be transformed."> + <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> + <style> + iframe { + height: 50px; + width: 50px; + transform: translate(25px, 25px) scale(2, 2); + border: none; + } + </style> + <p>Test passes if there is a filled green square.</p> + <iframe src="support/transform-iframe-002-contents.html"></iframe> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-iframe-scroll-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-iframe-scroll-position-ref.html new file mode 100644 index 0000000000..e4d5da75d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-iframe-scroll-position-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): iframe scroll position</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <style> + #iframe { + border: 0; + width: 50px; + height: 50px; + border: solid; + } + + #iframe div { + width: 25px; + height: 50px; + float: left; + } + + .rotate { + transform: rotate(90deg); + } + </style> + <body onload="onLoad();"> + <div id="iframe"> + <div style="background: blue;"></div> + <div style="background: green;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-iframe-scroll-position.html b/testing/web-platform/tests/css/css-transforms/transform-iframe-scroll-position.html new file mode 100644 index 0000000000..efb7bab532 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-iframe-scroll-position.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): iframe scroll position</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="This test ensures that when an iframe element is transformed, the scroll position of the iframe content is preserved."> + <link rel="match" href="transform-iframe-scroll-position-ref.html"> + <style> + iframe { + border: 0; + width: 50px; + height: 50px; + border: solid; + } + + .rotate { + transform: rotate(90deg); + } + </style> + <body onload="onLoad();"> + <iframe id="iframe" src="support/transform-iframe-scroll-position-contents.html"></iframe> + <script> + function onLoad() { + iframe.classList.toggle("rotate"); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transitions/CSSTransition-effect.tentative.html b/testing/web-platform/tests/css/css-transitions/CSSTransition-effect.tentative.html index b58c93d2e6..0952a7cd8f 100644 --- a/testing/web-platform/tests/css/css-transitions/CSSTransition-effect.tentative.html +++ b/testing/web-platform/tests/css/css-transitions/CSSTransition-effect.tentative.html @@ -85,12 +85,13 @@ promise_test(async t => { div.style.left = '150px'; // This will run style update. - assert_equals(div.getAnimations().length, 1); + const animations = div.getAnimations(); + assert_equals(animations.length, 1); - const new_transition = div.getAnimations()[0]; + const new_transition = animations[0]; await new_transition.ready; - assert_equals(getComputedStyle(div).left, '100px'); + assert_not_equals(getComputedStyle(div).left, '150px'); }, 'After setting a transition\'s effect to null, a new transition can be started'); // This is a regression test for https://crbug.com/992668, where Chromium would diff --git a/testing/web-platform/tests/css/css-transitions/crashtests/delete-image-set.html b/testing/web-platform/tests/css/css-transitions/crashtests/delete-image-set.html new file mode 100644 index 0000000000..b6ba763858 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/crashtests/delete-image-set.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/363567"> +<link rel="help" href="https://issues.chromium.org/issues/40360947"> +<style> + div { background: url(#); } + div { background: -webkit-image-set(url(#) 1x); } + div { background: image-set(url(#) 1x); } +</style> +<body> + <div style="transition: 1s">This test passes if it does not crash.</div> +</body> +<script> +window.onload = () => { + document.styleSheets[0].deleteRule(2); + document.styleSheets[0].deleteRule(1); +}; +</script> diff --git a/testing/web-platform/tests/css/css-transitions/parsing/starting-style-parsing.html b/testing/web-platform/tests/css/css-transitions/parsing/starting-style-parsing.html new file mode 100644 index 0000000000..bd147a630a --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/parsing/starting-style-parsing.html @@ -0,0 +1,38 @@ +<!doctype html> +<title>@starting-style: parsing</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#at-ruledef-starting-style"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<main id=main></main> +<script> + function test_valid(actual, expected) { + if (expected === undefined) + expected = actual; + test(t => { + t.add_cleanup(() => main.replaceChildren()); + let style = document.createElement('style'); + style.textContent = `${actual}{}`; + main.append(style); + assert_equals(style.sheet.rules.length, 1); + let rule = style.sheet.rules[0]; + assert_equals(rule.cssText, `${expected} {\n}`); + }, `${actual} is valid`); + } + + function test_invalid(actual) { + test(t => { + t.add_cleanup(() => main.replaceChildren()); + let style = document.createElement('style'); + style.textContent = `${actual}{}`; + main.append(style); + assert_equals(style.sheet.rules.length, 0); + }, `${actual} is not valid`); + } + + test_valid('@starting-style'); + + test_invalid('@starting-style div'); + test_invalid('@starting-style ()'); + test_invalid('@starting-style ( {}'); + test_invalid('@starting-style }'); +</script> diff --git a/testing/web-platform/tests/css/css-transitions/starting-style-adjustment.html b/testing/web-platform/tests/css/css-transitions/starting-style-adjustment.html new file mode 100644 index 0000000000..addc795e72 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/starting-style-adjustment.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Transitions Test: Style adjustments for @starting-style</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-transitions/support/helper.js"></script> +<style> +legend { + transition: display 1s step-end allow-discrete; +} +@starting-style { + legend { display:inline; } +} +</style> +<body> +<legend></legend> +<script> +promise_test(async t => { + await waitForAnimationFrames(1); + assert_equals(document.getAnimations().length, 0, "No transitions"); +}, "The display property in <legend> @starting-style should be blockified so no transition should start"); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-ui/WEB_FEATURES.yml new file mode 100644 index 0000000000..0033402111 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/WEB_FEATURES.yml @@ -0,0 +1,7 @@ +features: +- name: accent-color + files: + - accent-color-* +- name: appearance + files: + - appearance-* diff --git a/testing/web-platform/tests/css/css-ui/animation/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-ui/animation/WEB_FEATURES.yml new file mode 100644 index 0000000000..07cdf85b20 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: accent-color + files: + - accent-color-* diff --git a/testing/web-platform/tests/css/css-ui/resize-014.html b/testing/web-platform/tests/css/css-ui/resize-014.html index fdbd77e38a..c3e292438b 100644 --- a/testing/web-platform/tests/css/css-ui/resize-014.html +++ b/testing/web-platform/tests/css/css-ui/resize-014.html @@ -18,8 +18,5 @@ video { resize: both; } <source src="support/test.mp4" type="video/mp4"> - <source - src="support/test.ogv" - type="video/ogg"> <video> is not supported. This test is non conclusive. </video> diff --git a/testing/web-platform/tests/css/css-ui/support/test.ogv b/testing/web-platform/tests/css/css-ui/support/test.ogv Binary files differdeleted file mode 100644 index 50d59dfb38..0000000000 --- a/testing/web-platform/tests/css/css-ui/support/test.ogv +++ /dev/null diff --git a/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml new file mode 100644 index 0000000000..ca3c0ff91b --- /dev/null +++ b/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml @@ -0,0 +1,17 @@ +features: +- name: abs-sign + files: + - signs-abs-* +- name: cap + files: + - cap-* +- name: ic + files: + - ic-* +- name: lh + files: + - lh-* +- name: round-mod-rem + files: + - round-function.html + - round-mod-rem-* diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html b/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html new file mode 100644 index 0000000000..e80dd7b95c --- /dev/null +++ b/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + .outer { + width: 100px; + height: 40px; + border: 1px solid; + } +</style> +<div class="outer"></div> diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-003.html b/testing/web-platform/tests/css/css-values/calc-rounding-003.html new file mode 100644 index 0000000000..bf609e1c1d --- /dev/null +++ b/testing/web-platform/tests/css/css-values/calc-rounding-003.html @@ -0,0 +1,25 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1893127"> +<link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="calc-rounding-003-ref.html"> +<style> + .outer { + width: 100px; + border: 1px solid; + } + .inner { + height: 40px; + vertical-align: top; + display: inline-block; + --margin: 4.009px; + width: calc(50% - 2 * var(--margin)); + margin-inline: var(--margin); + } +</style> +<div class="outer" + ><div class="inner"></div + ><div class="inner"></div +></div> diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html index 04c44d0904..06277376e9 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html @@ -2,12 +2,17 @@ <meta charset="UTF-8"> <title>height: calc-size() animations</title> <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> - +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="../../../support/interpolation-testcommon.js"></script> <style> +.parent { + display: block; + width: 600px; + height: 300px; +} .target { display: block; } @@ -92,4 +97,96 @@ { at: 1.25, expect: '125px' }, ]); + const KEYWORDS = { + "auto": 100, + "min-content": 100, + "fit-content": 100, + "max-content": 100, + "stretch": 300, + }; + + for (const keyword in KEYWORDS) { + let expected = KEYWORDS[keyword]; + test_interpolation({ + property: 'height', + from: keyword, + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.25, expect: `${expected * 0.75}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 1.75}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.25}px` }, + ]); + + test_interpolation({ + property: 'height', + from: keyword, + to: 'calc-size(any, 50px)', + }, [ + { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` }, + { at: 1, expect: `50px` }, + { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` }, + ]); + + test_interpolation({ + property: 'height', + from: 'calc-size(any, 50px)', + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` }, + { at: 0, expect: "50px" }, + { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` }, + ]); + + test_no_interpolation({ + property: 'height', + from: keyword, + to: 'calc-size(50px, size)', + }); + } + + const KEYWORD_PAIRS = [ + [ "auto", "fit-content" ], + [ "fit-content", "min-content" ], + [ "stretch", "auto" ], + [ "max-content", "stretch" ], + ]; + + for (const pair of KEYWORD_PAIRS) { + test_no_interpolation({ + property: 'height', + from: pair[0], + to: `calc-size(${pair[1]}, size)`, + }); + } + + test_no_interpolation({ + property: 'height', + from: 'calc-size(20px, size)', + to: 'calc-size(50px, size)', + }); + + test_no_interpolation({ + property: 'height', + from: 'calc-size(50%, size)', + to: 'calc-size(50px, size)', + }); + + test_interpolation({ + property: 'height', + from: 'calc-size(37px, 200px)', + to: `calc-size(37px, size * 2 + 3% + 17px)`, /* adds to 100px */ + }, [ + { at: -0.25, expect: '225px' }, + { at: 0, expect: '200px' }, + { at: 0.75, expect: '125px' }, + { at: 1, expect: '100px' }, + { at: 1.25, expect: '75px' }, + ]); + </script> diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html index b8b24935c3..88373306c4 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html @@ -2,7 +2,7 @@ <meta charset="UTF-8"> <title>width: calc-size() animations</title> <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> - +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="../../../support/interpolation-testcommon.js"></script> @@ -67,4 +67,118 @@ { at: 1.25, expect: '125px' }, ]); + const KEYWORDS = { + "auto": 200, + "min-content": 100, + "fit-content": 100, + "max-content": 100, + "stretch": 200, + }; + + for (const keyword in KEYWORDS) { + let expected = KEYWORDS[keyword]; + test_interpolation({ + property: 'width', + from: keyword, + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.25, expect: `${expected * 0.75}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 1.75}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.25}px` }, + ]); + + test_interpolation({ + property: 'width', + from: keyword, + to: 'calc-size(any, 50px)', + }, [ + { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` }, + { at: 1, expect: `50px` }, + { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` }, + ]); + + test_interpolation({ + property: 'width', + from: 'calc-size(any, 50px)', + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` }, + { at: 0, expect: "50px" }, + { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` }, + ]); + + test_no_interpolation({ + property: 'width', + from: keyword, + to: 'calc-size(50px, size)', + }); + } + + const KEYWORD_PAIRS = [ + [ "auto", "fit-content" ], + [ "fit-content", "min-content" ], + [ "stretch", "auto" ], + [ "max-content", "stretch" ], + ]; + + for (const pair of KEYWORD_PAIRS) { + test_no_interpolation({ + property: 'width', + from: pair[0], + to: `calc-size(${pair[1]}, size)`, + }); + } + + test_no_interpolation({ + property: 'width', + from: 'calc-size(20px, size)', + to: 'calc-size(50px, size)', + }); + + test_no_interpolation({ + property: 'width', + from: 'calc-size(50%, size)', + to: 'calc-size(50px, size)', + }); + + test_interpolation({ + property: 'width', + from: 'calc-size(37px, 200px)', + to: `calc-size(37px, size * 2 + 7% + 12px)`, /* adds to 100px */ + }, [ + { at: -0.25, expect: '225px' }, + { at: 0, expect: '200px' }, + { at: 0.75, expect: '125px' }, + { at: 1, expect: '100px' }, + { at: 1.25, expect: '75px' }, + ]); + + let parent_auto_style = document.createElement("style"); + parent_auto_style.innerText = ` + body { width: 300px; } + .parent { width: auto; } + `; + document.head.append(parent_auto_style); + + test_interpolation({ + property: 'width', + from: 'inherit', + to: `calc-size(auto, size * 0.5)`, + }, [ + { at: -0.25, expect: '337.5px' }, + { at: 0, expect: '300px' }, + { at: 0.75, expect: '187.5px' }, + { at: 1, expect: '150px' }, + { at: 1.25, expect: '112.5px' }, + ]); + + parent_auto_style.remove(); + + </script> diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html index 61e59f83db..c3d58931b8 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html @@ -37,7 +37,6 @@ let basic_tests = [ { value: "calc-size(calc-size(2in, 30px), 15em)", expected: "300px" }, { value: "calc-size(calc-size(min-content, 30px), 15em)", expected: "300px" }, { value: "calc-size(calc-size(min-content, size), size)", expected: "10px" }, - { value: "calc(12% + calc-size(any, 31%))", expected_auto: "10px", expected_definite: "43px" }, { value: "calc-size(any, 31% + 12px)", expected_auto: "12px", expected_definite: "43px" }, { value: "calc-size(auto, size * 1.5)", expected: "15px" }, ]; diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html index e51247c872..afcb200424 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html @@ -34,8 +34,33 @@ test_invalid_value("width", "calc-size(any, size)"); test_invalid_value("width", "calc-size(any, fit-content)"); test_invalid_value("width", "calc-size(any, max-content)"); test_invalid_value("width", "calc-size(any, min-content)"); -test_valid_value("width", "calc-size(any, calc-size(10px, sign(size) * size))"); -test_invalid_value("width", "calc-size(any, calc-size(10px, sign(size) * size) * sign(size))"); +test_valid_value("width", "calc-size(10px, sign(size) * size)"); +test_invalid_value("width", "size"); +test_invalid_value("width", "sign(size)"); +test_invalid_value("width", "calc(50px * sign(size))"); +test_invalid_value("width", "calc-size(any, calc-size(10px, sign(size) * size))"); +test_invalid_value("width", "calc-size(any, calc-size(any, 10px))"); +test_invalid_value("width", "calc(calc-size(auto, size))"); +test_invalid_value("width", "calc(50px * sign(calc-size(auto, size)))"); +test_invalid_value("width", "calc(calc-size(auto, size) + calc-size(auto, size))"); +test_invalid_value("width", "calc(abs(calc-size(auto, size)))"); +test_invalid_value("width", "calc(100px * progress(calc-size(auto, size) from calc-size(auto, 0px) to calc-size(auto, size)))"); +test_invalid_value("width", "calc(100px * progress(calc-size(auto, size) from 0px to 100px))"); +test_invalid_value("width", "calc(100px * progress(50px from calc-size(auto, 0px) to calc-size(auto, size)))"); +test_invalid_value("width", "min(calc-size(auto, 0px), calc-size(auto, size))"); +test_invalid_value("width", "calc(min(calc-size(auto, 0px), calc-size(auto, size)))"); +test_invalid_value("width", "max(calc-size(auto, 0px), calc-size(auto, size))"); +test_invalid_value("width", "calc(max(calc-size(auto, 0px), calc-size(auto, size)))"); +test_invalid_value("width", "clamp(calc-size(auto, 0px), calc-size(auto, 30px), calc-size(auto, size))"); +test_invalid_value("width", "calc(clamp(calc-size(auto, 0px), calc-size(auto, 30px), calc-size(auto, size)))"); +test_invalid_value("width", "calc(cos(calc-size(auto, 0px)))"); +test_invalid_value("width", "calc(atan2(calc-size(auto, size), calc-size(auto, 50px)))"); +test_invalid_value("width", "calc(sqrt(calc-size(auto, 0px)))"); +test_invalid_value("width", "calc(hypot(calc-size(auto, size * 0.5), calc-size(auto, size)))"); +test_invalid_value("width", "calc(round(calc-size(auto, size * 0.5), calc-size(auto, size)))"); +test_invalid_value("width", "calc(round(calc-size(auto, size * 0.5)))"); +test_invalid_value("width", "calc(mod(calc-size(auto, size * 0.5), calc-size(auto, size)))"); +test_invalid_value("width", "calc(rem(calc-size(auto, size * 0.5), calc-size(auto, size)))"); test_valid_value("width", "calc-size(30px, 25em)"); test_valid_value("width", "calc-size(calc-size(any, 30px), 25em)"); @@ -43,4 +68,6 @@ test_valid_value("width", "calc-size(calc-size(2in, 30px), 25em)", "calc-size(ca test_valid_value("width", "calc-size(calc-size(min-content, 30px), 25em)"); test_valid_value("width", "calc-size(calc-size(min-content, size), size)"); +test_invalid_value("height", "calc(12% + calc-size(any, 31%))"); + </script> diff --git a/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html b/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html new file mode 100644 index 0000000000..9ab537cad6 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func"> +<link rel="author" title="sakhapov@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/numeric-testcommon.js"></script> +<div id="out-of-scope-container"></div> +<div id="extra-container"> + <div id="outer-container"> + <div id="inner-container"> + <div id=target></div> + </div> + </div> +</div> +<style> +:root { + font-size: 10px; +} +#out-of-scope-container { + container: my-container-3 / size; + width: 1px; + height: 1px; +} +#extra-container { + container: my-container-2 / size; + width: 5051px; + height: 1337px; +} +#outer-container { + container: my-container / size; + width: 322px; + height: 228px; +} +#inner-container { + container-type: size; + width: 228px; + height: 322px; +} +#target { + font-size: 10px; +} +</style> +<script> + +let width = window.innerWidth; +let height = window.innerHeight; + +let extraWidth = 5051; +let extraHeight = 1337; +let innerWidth = 228; +let innerHeight = 322; +let outerWidth = 322; +let outerHeight = 228; + +// Identity tests +test_math_used('container-progress(height from 0px to 1px)', innerHeight, {type:'number'}); +test_math_used('container-progress(width of my-container from 0px to 1px)', outerWidth, {type:'number'}); + +// Nestings +test_math_used('container-progress(height from container-progress(height from 0px to 1px) * 1px to container-progress(height from 0px to 1px) * 1px)', '0', {type:'number'}); +test_math_used('container-progress(height from container-progress(height from 0px to 1px) * 0.5px to container-progress(height from 0px to 1px) * 1px)', '1', {type:'number'}); +test_math_used('container-progress(height from container-progress(width of my-container from 0px to 1px) * 1px to container-progress(height of my-container-2 from 0px to 1px) * 1px)', (innerHeight - outerWidth) / (extraHeight - outerWidth), {type:'number'}); + +// General calculations +test_math_used('calc(container-progress(width from 0px to 50px) * 10px + 100px)', (innerWidth / 50 * 10 + 100) + 'px'); +test_math_used('calc(container-progress(height from 10px to sign(50px - 500em) * 10px))', (innerHeight - 10) / (-10 - 10), {type:'number'}); +test_math_used('calc(container-progress(width of my-container from 0px to 50px) * 10px + 100px)', (outerWidth / 50 * 10 + 100) + 'px'); +test_math_used('calc(container-progress(height of my-container from 10px to sign(50px - 500em) * 10px))', (outerHeight - 10) / (-10 - 10), {type:'number'}); + +// Fallback +test_math_used('container-progress(width of non-existing-container from 0px to 1px)', width, {type:'number'}); +test_math_used('container-progress(height of non-existing-container from 0px to 1px)', height, {type:'number'}); +test_math_used('container-progress(width of out-of-scope-container from 0px to 1px)', width, {type:'number'}); +test_math_used('container-progress(height of out-of-scope-container from 0px to 1px)', height, {type:'number'}); + +// Type checking +test_math_used('calc(container-progress(width from 0px to 1px) * 1px)', innerWidth + 'px'); +test_math_used('calc(container-progress(height of my-container from 0px to 1px) * 1s)', outerHeight + 's', {type:'time'}); +test_math_used('calc(container-progress(width of my-container-2 from 0px to 1px) * 1deg)', extraWidth + 'deg', {type:'angle', approx:0.001}); +</script> diff --git a/testing/web-platform/tests/css/css-values/container-progress-invalid.tentative.html b/testing/web-platform/tests/css/css-values/container-progress-invalid.tentative.html new file mode 100644 index 0000000000..a78fd34426 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/container-progress-invalid.tentative.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/parsing-testcommon.js"></script> +<script> +function test_invalid_number(value) { + test_invalid_value('opacity', value); +} +function test_invalid_length(value) { + // 'letter-spacing' accepts <length> only, not <percentage> or any mixes. + test_invalid_value('letter-spacing', value); +} + +// Syntax checking +test_invalid_number('container-progress()'); +test_invalid_number('container-progress( )'); +test_invalid_number('container-progress(,)'); +test_invalid_number('container-progress(1 from )'); +test_invalid_number('container-progress(1)'); +test_invalid_number('container-progress(50% to 0)'); +test_invalid_number('container-progress(0 from 1 to)'); +test_invalid_number('container-progress(from to)'); +test_invalid_number('container-progress(from 1 to 0)'); +test_invalid_number('container-progress(3 of 2 from 1 to 0)'); +test_invalid_number('container-progress(width of 2 from 1 to 0)'); +test_invalid_number('container-progress(from 1 to 0 1)'); +test_invalid_number('container-progress(from 1 0)'); +test_invalid_number('container-progress(0 from to 0)'); +test_invalid_number('container-progress(to to to to to)'); +test_invalid_number('container-progress(0, from, 10, to 200)'); +test_invalid_number('container-progress(0, from, 10, to, 200)'); +test_invalid_number('container-progress(0, from 10, to 200)'); +test_invalid_number('container-progress(0, 10, 200)'); + +// General tests +test_invalid_number('container-progress(height from 0 to 8'); +test_invalid_number('container-progress(height container from 0 to 8'); +test_invalid_number('container-progress(height of from 0 to 8'); +test_invalid_number('container-progress(depth from 0px to 8px'); +test_invalid_number('container-progress(width of 10 from 0px to 8px'); +test_invalid_number('container-progress(height of 10 from 0px to 8px'); +test_invalid_number('container-progress(height of name from 0deg to 8deg'); +test_invalid_number('container-progress(height of name from 0 to 8px'); +test_invalid_number('container-progress(10px from 0px to 8px'); +test_invalid_number('container-progress(depth of name from 0px to 8px'); +test_invalid_number('container-progress(width from 0deg to 8deg'); +test_invalid_number('container-progress(5 from 0deg to 8deg'); +test_invalid_number('container-progress(5 from 0% to 8deg'); +test_invalid_number('container-progress(height from 0% to sign(10px)'); +test_invalid_number('container-progress(5% from 0px to 10px'); +test_invalid_length('calc(1px * container-progress(10deg from 0 to 10))'); +test_invalid_length('calc(1px * container-progress(10 from 0px to 10))'); +</script> diff --git a/testing/web-platform/tests/css/css-values/container-progress-serialize.tentative.html b/testing/web-platform/tests/css/css-values/container-progress-serialize.tentative.html new file mode 100644 index 0000000000..181054c653 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/container-progress-serialize.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/serialize-testcommon.js"></script> +<div id="outer-container"> + <div id="inner-container"> + <div id=target></div> + </div> +</div> +<style> +:root { + font-size: 10px; +} +#outer-container { + container: my-container / size; + width: 322px; + height: 228px; +} +#inner-container { + container-type: size; + width: 228px; + height: 322px; +} +#target { + font-size: 10px; +} +</style> +<script> +function test_serialization(t,s,c) { + test_specified_serialization('opacity', t, s); + test_specified_serialization('transform', `scale(${t})`, `scale(${s})`); + test_computed_serialization('opacity', t, c); + test_computed_serialization('transform', `scale(${t})`, `matrix(${c}, 0, 0, ${c}, 0, 0)`); +} + +test_serialization( + 'calc(container-progress(width from 0px to 1px) / 1000)', + 'calc(container-progress(width from 0px to 1px) / 1000)', + '0.228', +); +test_serialization( + 'calc(0.1 * container-progress(height of my-container from 0px to 10em))', + 'calc(0.1 * container-progress(height of my-container from 0px to 10em))', + '0.228', +); +</script> diff --git a/testing/web-platform/tests/css/css-values/media-progress-computed.tentative.html b/testing/web-platform/tests/css/css-values/media-progress-computed.tentative.html new file mode 100644 index 0000000000..b2b9c6662a --- /dev/null +++ b/testing/web-platform/tests/css/css-values/media-progress-computed.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#media-progress-func"> +<link rel="author" title="sakhapov@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/numeric-testcommon.js"></script> +<div id="target"></div> +<style> +#target { + font-size: 10px; +} +:root { + width: 100vw; + height: 100vh; +} +</style> +<script> +// innerWidth and innerHeight have lossy precision, see +// https://github.com/w3c/csswg-drafts/issues/5260. +let { width, height } = document.documentElement.getBoundingClientRect(); + +// Identity tests +// NOTE(emilio): We provide custom messages so that the test name doesn't +// depend on the viewport size (since in testharness.js files the viewport size is +// not guaranteed to be fixed, unlike in reftests). +test_math_used('media-progress(height from 0px to 1px)', height, { type:'number', 'msg': 'media-progress() identity check' }); + +// Nestings +test_math_used('media-progress(height from media-progress(height from 0px to 1px) * 1px to media-progress(height from 0px to 1px) * 1px)', '0', {type:'number'}); + +test_math_used('media-progress(height from media-progress(height from 0px to 1px) * 0.5px to media-progress(height from 0px to 1px) * 1px)', '1', {type:'number'}); + +// General calculations. +test_math_used('calc(media-progress(width from 0px to 50px) * 10px + 100px)', (width / 50 * 10 + 100) + 'px', { msg: 'media-progress() with length product' }); +test_math_used('calc(media-progress(height from 10px to sign(50px - 500em) * 10px))', (height - 10) / (-10 - 10), { type:'number', msg: 'media-progress with complex to calculation' }); + +// Type checking +test_math_used('calc(media-progress(width from 0px to 1px) * 1px)', width + 'px', { msg: 'media-progress() as length' }); +test_math_used('calc(media-progress(height from 0px to 1px) * 1s)', height + 's', { type:'time', msg: 'media-progress() as time' }); +test_math_used('calc(media-progress(width from 0px to 1px) * 1deg)', width + 'deg', { type:'angle', approx:0.001, msg: 'media-progress() as angle' }); +</script> diff --git a/testing/web-platform/tests/css/css-values/media-progress-invalid.tentative.html b/testing/web-platform/tests/css/css-values/media-progress-invalid.tentative.html new file mode 100644 index 0000000000..10d40bcbfb --- /dev/null +++ b/testing/web-platform/tests/css/css-values/media-progress-invalid.tentative.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#media-progress"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/parsing-testcommon.js"></script> +<script> +function test_invalid_number(value) { + test_invalid_value('opacity', value); +} +function test_invalid_length(value) { + // 'letter-spacing' accepts <length> only, not <percentage> or any mixes. + test_invalid_value('letter-spacing', value); +} + +// Syntax checking +test_invalid_number('media-progress()'); +test_invalid_number('media-progress( )'); +test_invalid_number('media-progress(,)'); +test_invalid_number('media-progress(1 from )'); +test_invalid_number('media-progress(1)'); +test_invalid_number('media-progress(50% to 0)'); +test_invalid_number('media-progress(0 from 1 to)'); +test_invalid_number('media-progress(from to)'); +test_invalid_number('media-progress(from 1 to 0)'); +test_invalid_number('media-progress(from 1 to 0 1)'); +test_invalid_number('media-progress(from 1 0)'); +test_invalid_number('media-progress(0 from to 0)'); +test_invalid_number('media-progress(to to to to to)'); +test_invalid_number('media-progress(0, from, 10, to 200)'); +test_invalid_number('media-progress(0, from, 10, to, 200)'); +test_invalid_number('media-progress(0, from 10, to 200)'); +test_invalid_number('media-progress(0, 10, 200)'); + +// General tests +test_invalid_number('media-progress(height from 0 to 8'); +test_invalid_number('media-progress(depth from 0px to 8px'); +test_invalid_number('media-progress(width from 0deg to 8deg'); +test_invalid_number('media-progress(5 from 0deg to 8deg'); +test_invalid_number('media-progress(5 from 0% to 8deg'); +test_invalid_number('media-progress(height from 0% to sign(10px)'); +test_invalid_number('media-progress(5% from 0px to 10px'); +test_invalid_length('calc(1px * media-progress(10deg from 0 to 10))'); +test_invalid_length('calc(1px * media-progress(10 from 0px to 10))'); +</script> diff --git a/testing/web-platform/tests/css/css-values/media-progress-serialize.tentative.html b/testing/web-platform/tests/css/css-values/media-progress-serialize.tentative.html new file mode 100644 index 0000000000..354dda25b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/media-progress-serialize.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#progress"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/serialize-testcommon.js"></script> +<div id=target></div> +<style> +:root { + font-size: 10px; +} +#target { + font-size: 10px; +} +</style> +<script> +function test_serialization(t,s,c) { + test_specified_serialization('opacity', t, s); + test_specified_serialization('transform', `scale(${t})`, `scale(${s})`); + test_computed_serialization('opacity', t, c); + test_computed_serialization('transform', `scale(${t})`, `matrix(${c}, 0, 0, ${c}, 0, 0)`); +} + +test_serialization( + 'media-progress(width from 0px to 1000px)', + 'media-progress(width from 0px to 1000px)', + '0.8', +); +test_serialization( + 'calc(0.1 * media-progress(height from 0px to 10em))', + 'calc(0.1 * media-progress(height from 0px to 10em))', + '0.6', +); +test_serialization( + 'calc(media-progress(width from 0px to 100px) / 20)', + 'calc(media-progress(width from 0px to 100px) / 20)', + '0.4' +); +test_computed_serialization( + 'width', + 'calc(1px * media-progress(height from abs(11em - 10rem) to 110px / 10))', + '590px', +); +</script> diff --git a/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html b/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html index 6ea12f2b75..d2090cb7f8 100644 --- a/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html +++ b/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html @@ -20,12 +20,12 @@ test_serialization( ); test_serialization( 'progress(10em from 0px to 10em)', - 'calc(progress(10em from 0px to 10em))', + 'progress(10em from 0px to 10em)', '1', ); test_serialization( 'progress(10em from 0px to 10rem)', - 'calc(progress(10em from 0px to 10rem))', + 'progress(10em from 0px to 10rem)', '1', ); test_serialization( diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html index c690ee2b9a..18c47557c9 100644 --- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: 3d transform ref</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> div { box-sizing: border-box; will-change: transform } diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html index 24ab886025..983ba1d861 100644 --- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html +++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: 3d transform</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="3d-transform-incoming-ref.html"> <meta name=fuzzy content="3d-transform-incoming-ref.html:0-255;0-515"> diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html index 393943e396..0e09cba92b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: 3d transform ref</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> div { box-sizing: border-box; will-change: transform } diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html index 746b93afd4..398fa97ca9 100644 --- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html +++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: 3d transform</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="3d-transform-outgoing-ref.html"> <meta name=fuzzy content="3d-transform-outgoing-ref.html:0-255;0-1200"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html index b86e0a95a1..10ef0d5931 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: display content in a pseudo with object-fit: none (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> #container { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html index 8bd63e9a88..10338231b0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: display content in a pseudo with object-fit: none (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> #container { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html index 381a311cc4..19cd63d142 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: element with content less than box size (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html index d2b8f63ca0..86c6f9c7ee 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with content less than box size</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-smaller-than-box-size-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html index f4a34967ec..1fa42c5f38 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: offscreen content</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> body { background: pink } diff --git a/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html index 11b4957fbc..1c74897000 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: offscreen content with content-visibility auto</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="content-visibility-auto-shared-element-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html index 7b8c15b87f..250564b41c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: element with child with transparent background (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .shared { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html index 6c447aa1a8..81a53494d0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with child with transparent background</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-child-with-transparent-background-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html index a322301686..81fbabe3c5 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: element with clip (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html index f81a96370e..deea590892 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: element with clip (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .container { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html index 5acd847734..e0aef0fc37 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: root element with clip</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-clip-root-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html index 28bfa86875..9c9f2385c1 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with clip</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-clip-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html index 4bb87f316f..fada94f146 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: element with inline child (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="stylesheet" href="/fonts/ahem.css"> <link rel="author" href="mailto:bokan@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html index f1a5ca79af..bc72443b39 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with inline child</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="stylesheet" href="/fonts/ahem.css"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="content-with-inline-child-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html index 7aa2014397..c1b316ea6b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture elements with object view box on the pseudo (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> body { background: pink } diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html index a24e30ede9..f6e7c4e6f4 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: shared element with overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html index a9d873957a..ae076d5578 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: shared element with overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html index 9baf9563d1..f86f64843c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-transform-ref.html"> <meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html index e3bd7fff1d..3755910a1b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: object-view-box</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-transform-ref.html"> <meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-400"> diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html index 568e040c1e..8c2b65e63e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html index 7349d131d7..5ec3d5c64c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: element with transparent background (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html index b961a095e7..416cc4eca5 100644 --- a/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html +++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with transparent background</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-transparent-background-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html index 780d5fbd45..808195a557 100644 --- a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: css tags generate pseudo elements in paint order (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html index e7f62c2346..2c91853187 100644 --- a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: css tags generate pseudo elements in paint order (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html index 703b64f5c6..2ba73758e2 100644 --- a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html +++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: css tags generate pseudo elements in paint order</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="css-tags-paint-order-with-entry-ref.html"> <meta name="fuzzy" content="css-tags-paint-order-with-entry-ref.html:0-120;0-300"> diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html index c0e8769b47..9f1c6ad961 100644 --- a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html +++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: css tags generate pseudo elements in paint order</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="css-tags-paint-order-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html index 23fa74dd5e..c2c9a1dc50 100644 --- a/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: use css tags for shared elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html index 33bbae70fc..29ec7350d0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html +++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: use css tags for shared elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="css-tags-shared-element-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html index 44ed0947ab..fc6b4892a5 100644 --- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html @@ -2,7 +2,7 @@ <html> <head> <title>View transitions: Dialog element in RTL scrollable iframe</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> iframe { diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html index b9c0f7e25c..f5959bf434 100644 --- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html +++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html @@ -2,7 +2,7 @@ <html class=reftest-wait> <head> <title>View transitions: Dialog element in RTL scrollable iframe</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="dialog-in-rtl-iframe-ref.html"> <meta name=fuzzy content="dialog-in-rtl-iframe-ref.html:0-80;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html index 91c2277366..487a828b14 100644 --- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element in top layer during transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="dialog-in-top-layer-during-transition-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html index 406bdac32b..5e9867e8cb 100644 --- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element in top layer during transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="dialog-in-top-layer-during-transition-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html index 41467678a3..029b0e9f86 100644 --- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: element in top layer during transition (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html b/testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html index cfdf769695..66a8db6b67 100644 --- a/testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html +++ b/testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class="test-wait"> <title>View transitions: documentElement.remove</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html index 523c8616a6..698b32956b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: element with overflow ref</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .old_target { diff --git a/testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html index 678e0a062e..a4dcf5707b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html +++ b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="element-with-overflow-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html index bccf64915d..a57c1d5108 100644 --- a/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html +++ b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: event pseudo name</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="web-animations-api-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html b/testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html index 9e10b9b44e..5fadcc5f9c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: offscreen content</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> body { background: pink } diff --git a/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html index bfe0b9fb94..97ad9dfb44 100644 --- a/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html +++ b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: offscreen content</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="far-away-capture-ref.html"> <meta name="fuzzy" content="far-away-capture-ref.html:0-1;0-5"> diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html index 7c9ed911cb..c9650d97b9 100644 --- a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html +++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: hit test shared element at the real dom location</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="hit-test-unpainted-element-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html index dce9f27d90..9d50894d14 100644 --- a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: hit test shared element at the real dom location (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html index 68026edfb1..e8bec197f6 100644 --- a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html +++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: hit test shared element at the real dom location</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="hit-test-unpainted-element-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html index bca532b22c..99cde99149 100644 --- a/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: hit test shared element at the real dom location (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html index 1b8868280b..a427aee8d1 100644 --- a/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html +++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: hit test shared element at the real dom location</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="hit-test-unrelated-element-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html index ea895e8484..338f8a6f23 100644 --- a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html @@ -2,7 +2,7 @@ <html> <head> <title>View transitions: iframe transition to scrollbar (ref)</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> iframe { diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html index 37a300902a..67a57bb885 100644 --- a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html +++ b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html @@ -2,7 +2,7 @@ <html class=reftest-wait> <head> <title>View transitions: iframe transition to scrollbar</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="iframe-new-has-scrollbar-ref.html"> <meta name=fuzzy content="iframe-new-has-scrollbar-ref.html:0-80;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html index 3bb9bdb88d..6d6556d51c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html @@ -2,7 +2,7 @@ <html> <head> <title>View transitions: iframe transition from scrollbar (ref)</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> iframe { diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html index 014a429994..96dd75a3df 100644 --- a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html +++ b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html @@ -2,7 +2,7 @@ <html class=reftest-wait> <head> <title>View transitions: iframe transition from scrollbar</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="iframe-old-has-scrollbar-ref.html"> <meta name=fuzzy content="iframe-old-has-scrollbar-ref.html:0-80;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html index 49394f35f6..bf99b25f76 100644 --- a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: iframe</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> iframe { width: 500px; height: 500px } diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html index 93a5cbed66..8fa361b0fc 100644 --- a/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html +++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html @@ -2,7 +2,7 @@ <html class=reftest-wait> <title>View transitions: iframe</title> <meta name="timeout" content="long"> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="iframe-transition-ref.html"> <meta name="assert" content="Ensure that iframe root capture is sized and displayed correctly"> diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html index 177594c870..14b76fb07e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: capture elements with display inline (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-element-size.html b/testing/web-platform/tests/css/css-view-transitions/inline-element-size.html index c9f0d48942..4f94c92550 100644 --- a/testing/web-platform/tests/css/css-view-transitions/inline-element-size.html +++ b/testing/web-platform/tests/css/css-view-transitions/inline-element-size.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class="reftest-wait"> <title>View transitions: capture elements with display inline</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="inline-element-size-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html b/testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html index dbeb39da54..b26f8a45d6 100644 --- a/testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html +++ b/testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: ensure input targets document root while rendering is suppressed</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7797"> <link rel="author" href="mailto:bokan@chromium.org"> diff --git a/testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html b/testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html index 4455ad6172..02d9cfeb8e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: different width container should keep aspect ratio (by default)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .spacer { diff --git a/testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html b/testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html index 8c57dba658..ac05756f05 100644 --- a/testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: shared element writing-modes (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/japanese-tag.html b/testing/web-platform/tests/css/css-view-transitions/japanese-tag.html index 976dcab4fc..8940608f95 100644 --- a/testing/web-platform/tests/css/css-view-transitions/japanese-tag.html +++ b/testing/web-platform/tests/css/css-view-transitions/japanese-tag.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element writing-modes</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="japanese-tag-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html b/testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html index 5910d5d95a..2a033ddc7e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html +++ b/testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class="test-wait"> <title>View transitions: list-style-position crash</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <script> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html index 9a00a62b7a..23f5fc22cf 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html index ed16ac5662..fbc8edadc0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html index 507f9b8c0a..e251196cbf 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element below viewport partially onscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html index b5c0d4e9ae..611d4da21a 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport and completely offscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-below-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-950"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html index 6eeb85af3e..bda3ebf1b1 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport and completely offscreen (old content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-below-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html index 05827eb196..ef26c46f0d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: massive element below viewport and completely offscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html index 54232ead6f..e881e19622 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html index 772720def1..c8c3c53082 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-445"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html index 001c135f0a..3c2ae6a6f5 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element below viewport partially onscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html index d9d03d1e91..c8471032a4 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport and completely offscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html index 7861e5c3b8..04ab58f3aa 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport and completely offscreen (old content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html index 32e688bbdb..3fb7a7a530 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element on top of viewport and completely offscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> :root { diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html index 7c14cef2d0..15cc94ffe7 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html index b586f96de9..0d2aeec59d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport partially onscreen (old content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html index 8fa3050535..436783b42e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element on top of viewport partially onscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> :root { diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html index f4a9f833df..6ef8edd3b0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport and completely offscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-6;totalPixels=0-920"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html index a2eb0447bd..5e303e8286 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport and completely offscreen (old content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html index e835907738..697719507f 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element on top of viewport and completely offscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target_at_bottom_edge { diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html index 764a311fc9..a9e5f5842a 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html index cecefd8f58..41dc622914 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element on top of viewport partially onscreen (old content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html index 9c60e8bf1d..6377c72616 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element on top of viewport partially onscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html index b1bae1c09b..719701fe88 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html index c878ce881e..e8eeec3f26 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html index 3516741da0..c7bdc7afee 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element below viewport partially onscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> :root { diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html index 91b133f2cf..89d00a53a8 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport and completely offscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html index 164ff05f93..04247af18e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport and completely offscreen (old content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html"> <meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-445"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html index f29d3ac609..ed554d4dfe 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: massive element below viewport and completely offscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html index b63ed07225..a7b599e5eb 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html index cf090e0ab4..2498f2e1f1 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: massive element below viewport partially onscreen (new content)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html"> <meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-445"> diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html index 1df26bb375..b134c15858 100644 --- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: massive element below viewport partially onscreen (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> :root { diff --git a/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html index dd93e0b498..503418c3dc 100644 --- a/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: Modify style via CSSOM (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> #box { diff --git a/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html index 6f026607bc..5e96a68465 100644 --- a/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html +++ b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class="reftest-wait"> <title>View transitions: Modify style via CSSOM</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="modify-style-via-cssom-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html index 8a552b03a5..402c2a4131 100644 --- a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html +++ b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with fixed position descendant</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="named-element-with-fix-pos-child-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html index a8211f4200..b011291bfc 100644 --- a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html +++ b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: element with fixed position descendant</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="named-element-with-fix-pos-child-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html index a161cd8fc9..7d513e282d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: element with fixed position descendant (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html index b8c3b34c03..79e8980139 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture elements with different size capture</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <script src="/common/reftest-wait.js"></script> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html index 78efa9d82f..094d6963bf 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture elements with different size capture</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-and-old-sizes-match-ref.html"> <meta name="fuzzy" content="new-and-old-sizes-match-ref.html:0-1;0-300"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html index 1b28bbf29b..a216bff8b0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture opacity elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html index 4a2dfc78c2..702bb09bc3 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture clip-path elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-captures-clip-path-ref.html"> <meta name="fuzzy" content="new-content-captures-clip-path-ref.html:0-1;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html index 2a80cf5568..62de5018a8 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture elements with different size capture (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html index a891dec555..740199675d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: capture elements with different size capture</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-captures-different-size-ref.html"> <meta name=fuzzy content="new-content-captures-different-size-ref.html:0-40;0-30000"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html index deea6d139b..615d414594 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture opacity elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html index ab4efd1f42..03d2cc858e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture opacity elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-captures-opacity-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html index 6d906fc6f1..9d9cfa06be 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture opacity elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> span { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html index b88654cd37..7ea6b1583c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture span elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-captures-positioned-spans-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html index 2f2e5e7694..4b0cae3f8e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture opacity elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html index 84e55de58a..90b13c338c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture root elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-captures-root-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html index b95233d712..f7bba2d683 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture opacity elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> span { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html index 843f6752d7..94bef1d6dd 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture span elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-captures-spans-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html index 5f75909e82..3f69ac695d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture elements and then change overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> body { background: pink } diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html index a8e2fa8c6b..9dbd258833 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: capture elements and then change overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-changes-overflow-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html index 34e36786f8..161e3876ac 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: container of shared element writing-modes (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html index e7ac768e17..c6fceff6c1 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: container of shared element writing-modes</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-container-writing-modes-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html index 94280ae3af..9ed3f5f681 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: shared element writing-modes (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html index d7740d78f5..6a975c6d9c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element writing-modes</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-element-writing-modes-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html index e936a779c7..6c165d1b24 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: capture starts with root being display none (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .tb { writing-mode: horizontal-tb; } diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html index 4d2ad28b17..e59c029ccc 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait style="display: none"> <title>View transitions: capture starts with root being display none</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-from-root-display-none-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html index eddd733014..6ff0b8cbcf 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: incoming viewport has scrollbars (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859"> <link rel="author" href="mailto:bokan@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html index 4024952b13..3246a7e76f 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: incoming viewport has scrollbars</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="new-content-has-scrollbars-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html b/testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html index 53ec94122f..60f2b92036 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: different width container should keep aspect ratio (by default)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="intrinsic-aspect-ratio-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html index c85028d3bd..7492467a12 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: new content captures an empty div (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> div { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html index bacc63f194..a61a6f06ef 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: old content captures an empty div</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-is-empty-div-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html index b891eee16d..04a80409c5 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: display content in a pseudo with object-fit: fill</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="content-object-fit-fill-ref.html"> <meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html index d4b81b1a0e..ccdbc6edc3 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: display content in a pseudo with object-fit: none</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="content-object-fit-none-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html index 28e22b8ca2..1a17f0b8e0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box with larger overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html index b1871141c2..41b5c41db2 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box with larger overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html index 01a3ed3204..73346e66df 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box with larger clip-path</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-object-view-box-clip-path-reference-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html index dcd5fec70a..47b1e91c9d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box with larger clip-path</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-object-view-box-clip-path-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html index d6016c950e..89d2331971 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box with larger overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html index 593901529f..1c4761f1f3 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box with larger overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-object-view-box-overflow-clipped-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html index d6016c950e..89d2331971 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box with larger overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html index 2bbea1e1c4..89e83beb7f 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box with larger overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-object-view-box-overflow-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html index 1ca35f5a42..729be2fcbf 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: display content in a pseudo with proper scaling (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .inner { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html index 4ea3c2e04a..bccb760fb5 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: display content in a pseudo with proper scaling</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-content-scaling-ref.html"> <meta name="fuzzy" content="new-content-scaling-ref.html:maxDifference=0-16;totalPixels=0-400"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html b/testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html index 47917e90f3..40139bbaa9 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: capture elements with object view box on the pseudo</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="content-with-object-view-box-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html index 59170ebf00..4ab9fa5a57 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element with overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-overflow-zoomed-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html index e2dc045089..165b4710ca 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element with overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-overflow-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html index b3db1f2e19..8c096d1b10 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: one element captured for two tags (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> div { diff --git a/testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html index 7e870e9d89..d57bdd6d42 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: new element tag specified for start phase</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-element-on-start-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html index f6b817d92b..99ca705d00 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: container of shared element writing-modes (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html index 61dc5aca17..e956fbc6cd 100644 --- a/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html +++ b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: container of shared element writing-modes</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-root-vertical-writing-mode-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html b/testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html index e1596cf76e..bc0d764a59 100644 --- a/testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html +++ b/testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: author styles ignored during prepare</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html b/testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html index c004a94dcb..ae9113cb1f 100644 --- a/testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html +++ b/testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: no crash with view-transitions in massive iframe</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:roger.johannesson@xperi.com"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html b/testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html index ae9cfda9bb..85af434a14 100644 --- a/testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html +++ b/testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html> <title>View transitions: CSS Animations are paused while render-blocked</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html b/testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html index 52058b7a04..a86fd14536 100644 --- a/testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html +++ b/testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html> <title>View transitions: rAF is not issued while render-blocked</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html b/testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html index 98ac7c9de9..1fe68ad941 100644 --- a/testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: shared element with overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/no-root-capture.html b/testing/web-platform/tests/css/css-view-transitions/no-root-capture.html index 9e16d1e447..87e0326600 100644 --- a/testing/web-platform/tests/css/css-view-transitions/no-root-capture.html +++ b/testing/web-platform/tests/css/css-view-transitions/no-root-capture.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element with overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="no-root-capture-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/no-white-flash-before-activation-ref.html b/testing/web-platform/tests/css/css-view-transitions/no-white-flash-before-activation-ref.html new file mode 100644 index 0000000000..f661c07439 --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/no-white-flash-before-activation-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<html> +<body style="background-color: #000;"></body> +</html> diff --git a/testing/web-platform/tests/css/css-view-transitions/no-white-flash-before-activation.html b/testing/web-platform/tests/css/css-view-transitions/no-white-flash-before-activation.html new file mode 100644 index 0000000000..1b4bb7cfae --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/no-white-flash-before-activation.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <title>View Transitions: No white flash should be visible during the duration of the update callback</title> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/#ref-for-captured-in-a-view-transition"> + <link rel="match" href="no-white-flash-before-activation-ref.html"> + <style> + body { + margin: 0; + } + div { + width: 100vw; + height: 100vh; + background-color: #000; + } + </style> +</head> +<body> + <div></div> + <script src="/common/reftest-wait.js"></script> + <script> + failIfNot(document.startViewTransition, "Missing document.startViewTransition"); + addEventListener("load", () => { + document.startViewTransition(() => { + requestAnimationFrame(takeScreenshot); + return new Promise(() => {}); + }); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html b/testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html index 98ac7c9de9..1fe68ad941 100644 --- a/testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: shared element with overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/nothing-captured.html b/testing/web-platform/tests/css/css-view-transitions/nothing-captured.html index 468cb6e199..ac5635ec7c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/nothing-captured.html +++ b/testing/web-platform/tests/css/css-view-transitions/nothing-captured.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element with overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="nothing-captured-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html index 3ea7eb96b6..8ef19ed358 100644 --- a/testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html +++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="object-view-box-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html index 7f6f79ba44..335e48fa70 100644 --- a/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html +++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: object-view-box</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="object-view-box-ref.html"> <meta name="fuzzy" content="object-view-box-ref.html:0-1;0-300"> diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html index 9ed1e50309..744f77f81e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html index 171f999554..e1142fa5f6 100644 --- a/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: new element is modified while offscren and brought onscreen using pseudo (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html index 77c35ab583..2a47a05972 100644 --- a/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html +++ b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: new element is modified while offscren and brought onscreen using pseudo</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="offscreen-element-modified-before-coming-onscreen-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html index 0d9d498b6b..2f02cf13d0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture clip-path elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html index 467b19d928..7ed5e1ca15 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture clip-path elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-captures-clip-path-ref.html"> <meta name="fuzzy" content="old-content-captures-clip-path-ref.html:0-1;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html index 4fbabd48f7..52e9941416 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture elements with different size capture (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html index a8d375f064..392247bc95 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: capture elements with different size capture</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-captures-different-size-ref.html"> <meta name=fuzzy content="old-content-captures-different-size-ref.html:0-40;0-30000"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html index 33f7f5b14a..fd48fb20e9 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture opacity elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html index ee3e3e4cde..cd71c9dfaf 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture opacity elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-captures-opacity-ref.html"> <meta name=fuzzy content="old-content-captures-opacity-ref.html:0-1;0-50000"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html index 92bd70f6f4..ca4705f818 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture root elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html index 96acb9f455..51a22bc136 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture root elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-captures-root-ref.html"> <meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html index be264399c8..b109c7c1dd 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: container of shared element writing-modes (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html index 9896c27152..1a0d9b9428 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: container of shared element writing-modes</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-container-writing-modes-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html index 8c57dba658..ac05756f05 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: shared element writing-modes (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html index 5029c6aaaa..3b1ba1ad4f 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element writing-modes</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-element-writing-modes-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html index b349e80700..640777bf08 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: outgoing viewport has scrollbars (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859"> <link rel="author" href="mailto:bokan@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html index 781ff7c125..13e26c702d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: outgoing viewport has scrollbars</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="old-content-has-scrollbars-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html b/testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html index b46a778217..bfca9d321a 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: different width container should keep aspect ratio (by default)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="intrinsic-aspect-ratio-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html index b4b17ee780..8144bfe43c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: old content captures an empty div (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> div { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html index 137060c1dd..34aa580b34 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: old content captures an empty div</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-is-empty-div-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html index 9ad8b14843..0652b30a07 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: display content in a pseudo with object-fit: fill</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="content-object-fit-fill-ref.html"> <meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html index 1275aece7c..cfe733230b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: display content in a pseudo with object-fit: none</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="content-object-fit-none-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html index 28e22b8ca2..1a17f0b8e0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box with larger overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html index b1871141c2..41b5c41db2 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box with larger overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html index 14a1ee83d9..5e6969d9cc 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box with larger clip-path</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-object-view-box-clip-path-reference-ref.html"> <meta name="fuzzy" content="old-content-object-view-box-clip-path-reference-ref.html:0-1;0-100"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html index dff57c68f6..f894555154 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box with larger clip-path</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-object-view-box-clip-path-ref.html"> <meta name="fuzzy" content="old-content-object-view-box-clip-path-ref.html:0-1;0-30"> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html index d6016c950e..89d2331971 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: object-view-box with larger overflow (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .target { diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html index ff9bb4e7d2..09285ddfe4 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: object-view-box with larger overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-object-view-box-overflow-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html b/testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html index f24c8e60d1..df32005546 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html @@ -2,7 +2,7 @@ <meta name="timeout" content="long"> <html class=reftest-wait> <title>View transitions: capture elements with object view box on the pseudo</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="content-with-object-view-box-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html index 10257b761f..fa701deb33 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element with overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-overflow-zoomed-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html index 6ed31d375c..79c7ba160e 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: shared element with overflow</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="content-with-overflow-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html index bb4f2df0f8..2927b468d0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: container of shared element writing-modes (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html index 5f4425f64d..e94610e261 100644 --- a/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html +++ b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: container of shared element writing-modes</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="new-root-vertical-writing-mode-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html b/testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html index 8b81c35ff6..eaecbfe852 100644 --- a/testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html +++ b/testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class="reftest-wait foo"> <title>View transitions: ensure :only-child is supported on view-transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html b/testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html index 2089e9225e..02683423c0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html +++ b/testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: ensure :only-child is supported on view-transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html index 5a2624d09d..14bd768f76 100644 --- a/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html +++ b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html @@ -60,9 +60,7 @@ for (const fn of functionPseudoElements) { test_invalid_selector(`${fn}(foo bar)`); test_invalid_selector_combinations(`${fn}(foo bar)`); - // Test function with selector arguments. - test_invalid_selector(`${fn}(.foo)`); - test_invalid_selector_combinations(`${fn}(.foo)`); + // Test function with selector arguments. test_invalid_selector(`${fn}(#bar)`); test_invalid_selector_combinations(`${fn}(#bar)`); } diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html index f622f94b5f..6b3b493b6b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: invalidating VT pseudo elements renders correctly (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html index 55a9d5d373..e1f1718618 100644 --- a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html +++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: invalidating VT pseudo elements renders correctly</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="pseudo-rendering-invalidation-ref.html"> <meta name="fuzzy" content="pseudo-rendering-invalidation-ref.html:0-20;0-300"> diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildcard-no-star.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildcard-no-star.html new file mode 100644 index 0000000000..2dc7d00cd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildcard-no-star.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>View transition classes: selector should match with wildcard</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions-2/"> +<link rel="author" href="mailto:nrosenthal@chromium.org"> +<link rel="match" href="pseudo-with-classes-ref.html"> +<script src="/common/rendering-utils.js"></script> +<script src="/common/reftest-wait.js"></script> + +<style> + div { + width: 100px; + height: 100px; + position: absolute; + } + + #target { + background: green; + view-transition-name: target; + view-transition-class: cls; + } + + ::view-transition-group(*) { + animation-duration: 1s; + } + + ::view-transition-new(.cls), + ::view-transition-old(.cls) { + left: 100px; + } +</style> +<div id=target></div> + +<script> + failIfNot(document.startViewTransition, "Missing document.startViewTransition"); + + window.addEventListener("load", () => { + document.startViewTransition().ready.then(takeScreenshot); + }); +</script> diff --git a/testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html b/testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html index adf3dc6c16..043d01c932 100644 --- a/testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html +++ b/testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: promise resolution ordering</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html index 92bd70f6f4..ca4705f818 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: capture root elements (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> .box { diff --git a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html index 4264db8169..a4d6f11ad4 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture root elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="old-content-captures-root-ref.html"> <meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html index fc55719c7e..d228be8581 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: html display none</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html index 19f4143aa6..b9c384d94a 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: entry animation from root display none</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html index a4010b5f2f..7b2a6103f3 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html > <title>View transitions: capture root element with scrollbar (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html index c657fa19fb..2fa0132727 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait style="background: lightblue;"> <title>When the root element has scrollbars, these should be excluded in snapshot</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="root-scrollbar-with-fixed-background-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html index c180c384f4..33fbea0064 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: root element style changes during transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> #target { diff --git a/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html index d1d291124b..0b8fb19946 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: root element style changes during transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="root-style-change-during-animation-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html index 24b50fa65e..d7d702e09a 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>Root to shared animation test (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html index 6ba07bd9e6..52a7d771ef 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <html class=reftest-wait> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="root-to-shared-animation-end-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html index 3075d2480c..df0ec1a9d8 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>Root to shared animation test (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html index 0620e911cf..adddf377c6 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <html class=reftest-wait> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="root-to-shared-animation-incoming-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html index d04ab3f767..8b777a2c8c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>Root to shared animation test (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html index 0a1cb9617e..e7e669539d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html +++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <html class=reftest-wait> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="root-to-shared-animation-start-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html index c429136a2d..dc9d6ae245 100644 --- a/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html @@ -2,7 +2,7 @@ <html dir="rtl"> <head> <title>Transition is correctly positioned on RTL page (ref)</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html index de2570605a..c8248b5d89 100644 --- a/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html +++ b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html dir="rtl" class=reftest-wait> <title>Transition is correctly positioned on RTL page</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="rtl-with-scrollbar-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html index 4bf2164c7a..cce8d5eec3 100644 --- a/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: universal specificity (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> body { diff --git a/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html index ec50b1e407..2e9e9c245c 100644 --- a/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html +++ b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: universal specificity</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="set-universal-specificity-ref.html"> <script src="/common/reftest-wait.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html index 3d307ce3c7..5f2e780c58 100644 --- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: use snapshot containing block for absolute position (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html index ef986cd75c..4a619f29cc 100644 --- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html +++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: use snapshot containing block for absolute position</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="snapshot-containing-block-absolute-ref.html"> <meta name="fuzzy" content="snapshot-containing-block-absolute-ref.html:0-20;0-100"> diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html index 8a74bd2164..c219fb1edd 100644 --- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: snapshot containing block includes scrollbar gutters (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> :root { diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html index 6e9bf568f6..8e47a056bd 100644 --- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html +++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: snapshot containing block includes scrollbar gutters</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="snapshot-containing-block-includes-scrollbar-gutter-ref.html"> <meta name="fuzzy" content="snapshot-containing-block-includes-scrollbar-gutter-ref.html:0-20;0-100"> diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html index 8ed60934ca..0bff68efb2 100644 --- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: use snapshot containing block for static position (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html index 5e03480c27..fc0c7033c9 100644 --- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html +++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: use snapshot containing block for static position</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="snapshot-containing-block-static-ref.html"> <meta name="fuzzy" content="snapshot-containing-block-static-ref.html:0-20;0-100"> diff --git a/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html b/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html index d0cef9be63..ed4705c56d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html +++ b/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: ensure correct style inheritance for pseudo tree</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html index 6747612285..29e4c32e5b 100644 --- a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html @@ -2,7 +2,7 @@ <html> <head> <title>View transitions: Transition from an empty iframe (ref)</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <style> iframe { diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html index 869967a57e..7cd621fbfd 100644 --- a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html +++ b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html @@ -2,7 +2,7 @@ <html class=reftest-wait> <head> <title>View transitions: Transition from an empty iframe</title> - <link rel="help" href="https://github.com/WICG/view-transitions"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <link rel="match" href="transition-in-empty-iframe-ref.html"> <meta name=fuzzy content="transition-in-empty-iframe-ref.html:0-80;0-1000"> diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-hidden-page.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-hidden-page.html new file mode 100644 index 0000000000..f23d30f96c --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/transition-in-hidden-page.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <title>View transitions: Transition in a hidden page</title> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> + <meta name="timeout" content="long"> + <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="/page-visibility/resources/window_state_context.js"></script> + <style> + ::view-transition-group(*) { + animation-duration: 5s; + } + </style> + <script> + promise_test(async t => { + assert_implements(document.startViewTransition, "Missing document.startViewTransition"); + + const wsc = window_state_context(t); + await wsc.minimize(); + assert_true(document.hidden); + const transition = document.startViewTransition(); + await wsc.restore(); + await promise_rejects_dom(t, "InvalidStateError", transition.ready); + }, "A view transition should be immediately skipped if started when document is hidden"); + + promise_test(async t => { + assert_implements(document.startViewTransition, "Missing document.startViewTransition"); + + const wsc = window_state_context(t); + const transition = document.startViewTransition(async () => { + await wsc.minimize(); + }); + + let event_fired = false; + + window.addEventListener("visibilitychange", () => { + if (document.hidden) + event_fired = true; + }); + + // Restoring so that the document has an opportunity to present the real + // frame and start the transition's animation. + await wsc.restore(); + + const [readyResult] = await Promise.allSettled([transition.ready]); + assert_true(event_fired, "visibilitychange event should fire before skipping the transition"); + await transition.finished; + assert_equals(readyResult.status, "rejected"); + }, "A view transition should be skipped when a document becomes hidden while processing update callback"); + + promise_test(async t => { + assert_implements(document.startViewTransition, "Missing document.startViewTransition"); + assert_false(document.hidden); + const wsc = window_state_context(t); + const transition = document.startViewTransition(() => { }); + await transition.ready; + await new Promise(resolve => requestAnimationFrame(resolve)); + await wsc.minimize(); + const result = await new Promise(resolve => { + transition.finished.then(() => resolve("finished")); + t.step_timeout(() => resolve("timeout"), 1000); + }); + + assert_equals(result, "finished"); + }, "A view transition should be skipped when a document becomes hidden while animating"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-view-transitions/update-callback-timeout.html b/testing/web-platform/tests/css/css-view-transitions/update-callback-timeout.html new file mode 100644 index 0000000000..9e96e97e11 --- /dev/null +++ b/testing/web-platform/tests/css/css-view-transitions/update-callback-timeout.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <title>View transitions: Transition has implementation-defined timeout.</title> + <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> + <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> + <meta name="timeout" content="long"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script> + promise_test(async t => { + assert_implements(document.startViewTransition, "Missing document.startViewTransition"); + const transition = document.startViewTransition(() => { + return new Promise(() => {}); + }); + transition.updateCallbackDone.then(() => { + assert_unreached(); + }); + transition.finished.then(() => { + assert_unreached(); + }); + await promise_rejects_dom(t, "TimeoutError", transition.ready); + }, "View transition should have an implementation-defined timeout on the update callback"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html index cc0250bc59..8b86e2a161 100644 --- a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: view-transition-name is limited to document root (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <head> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html index afd5d56f61..a25b329b03 100644 --- a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html +++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: view-transition-name is limited to document root</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="view-transition-name-on-document-root-ref.html"> <head> diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html index 9ec14f60cd..e86fa3f3e2 100644 --- a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <title>View transitions: view-transition-name removed mid transition (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html index b18df68511..265dc1fef0 100644 --- a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html +++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: view-transition-name removed mid transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="view-transition-name-removed-mid-transition-ref.html"> diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html index ab66e7d16d..d71d6e1375 100644 --- a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html +++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title>View transitions: one element captured for two tags (ref)</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> div { diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html index 6d8395ebb7..c739e416c8 100644 --- a/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html +++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html class=reftest-wait> <title>View transitions: capture opacity elements</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> <link rel="match" href="web-animations-api-ref.html"> <meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500"> diff --git a/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html index 6caadeba89..28abd8452d 100644 --- a/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html +++ b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html @@ -2,7 +2,7 @@ <title> View transitions: Resizing viewport before animating rejects the ready promise. </title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <script src="/resources/testharness.js"></script> diff --git a/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html index e2424cad8c..fd83562316 100644 --- a/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html +++ b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html @@ -2,7 +2,7 @@ <html> <head> <title>View transitions: Resizing viewport skips the transition</title> -<link rel="help" href="https://github.com/WICG/view-transitions"> +<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:bokan@chromium.org"> <script src="/common/rendering-utils.js"></script> diff --git a/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html b/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html index 30ed78e30b..82af111bbe 100644 --- a/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html +++ b/testing/web-platform/tests/css/css-viewport/computedStyle-zoom.html @@ -5,23 +5,23 @@ <link rel="help" href="https://drafts.csswg.org/css-viewport/"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> -<head> - <style> - div { +<style> + div { width: 64px; height: 64px; + line-height: 64px; + text-indent: 64px; background-color: blue - } - div.x4_zoom { + } + div.x4_zoom { zoom: 4.0; background-color: blueviolet; - } - div.x2_zoom { + } + div.x2_zoom { background-color: chartreuse; zoom: 2.0; - } - - </style> + } +</style> </head> <body> <div id="no_zoom"></div> @@ -29,7 +29,7 @@ <div class="x2_zoom" id="parent_div"> <div class="x4_zoom" id="nested_zoom"></div> </div> - <div class="x2_zoom" id="testing_set_style" style="height: 1px; width: 1px;"></div> + <div class="x2_zoom" id="testing_set_style" style="height: 1px; width: 1px; line-height: 1px; text-indent: 1px;"></div> <script> test(function() { assert_true(!!no_zoom, "no zoom target exists"); @@ -37,38 +37,37 @@ assert_true(!!nested_zoom, "zoom target exists"); assert_true(!!parent_div, "parent div with zoom exists") }); + function assert_length_props(style, expected) { + for (let prop of ["width", "height", "line-height", "text-indent"]) { + assert_equals(style.getPropertyValue(prop), expected, prop); + } + } test(function(){ - noZoomStyle = window.getComputedStyle(no_zoom); - assert_equals(noZoomStyle.getPropertyValue("width"), "64px"); - assert_equals(noZoomStyle.getPropertyValue("height"), "64px"); + let noZoomStyle = getComputedStyle(no_zoom); + assert_length_props(noZoomStyle, "64px"); assert_equals(noZoomStyle.getPropertyValue("zoom"), "1"); }); test(function(){ - withZoomStyle = window.getComputedStyle(with_zoom); - assert_equals(withZoomStyle.getPropertyValue("width"), "64px"); - assert_equals(withZoomStyle.getPropertyValue("height"), "64px"); + let withZoomStyle = getComputedStyle(with_zoom); + assert_length_props(withZoomStyle, "64px"); assert_equals(withZoomStyle.getPropertyValue("zoom"), "4"); }); test(function(){ - parentWithZoomStyle = window.getComputedStyle(parent_div); - assert_equals(parentWithZoomStyle.getPropertyValue("width"), "64px"); - assert_equals(parentWithZoomStyle.getPropertyValue("height"), "64px"); + let parentWithZoomStyle = getComputedStyle(parent_div); + assert_length_props(parentWithZoomStyle, "64px"); assert_equals(parentWithZoomStyle.getPropertyValue("zoom"), "2"); }); test(function(){ - nestedZoomStyle = window.getComputedStyle(nested_zoom); - assert_equals(nestedZoomStyle.getPropertyValue("width"), "64px"); - assert_equals(nestedZoomStyle.getPropertyValue("height"), "64px"); + nestedZoomStyle = getComputedStyle(nested_zoom); + assert_length_props(nestedZoomStyle, "64px"); assert_equals(nestedZoomStyle.getPropertyValue("zoom"), "4"); }); test(function(){ - testDivStyle = window.getComputedStyle(testing_set_style); - assert_equals(testDivStyle.getPropertyValue("width"), "1px"); - assert_equals(testDivStyle.getPropertyValue("height"), "1px"); + testDivStyle = getComputedStyle(testing_set_style); + assert_length_props(testDivStyle, "1px"); assert_equals(testDivStyle.getPropertyValue("zoom"), "2"); - window.testing_set_style.setAttribute("style", "width: 64px; height: 64px;"); - assert_equals(testDivStyle.getPropertyValue("width"), "64px"); - assert_equals(testDivStyle.getPropertyValue("height"), "64px"); + testing_set_style.setAttribute("style", "width: 64px; height: 64px; line-height: 64px; text-indent: 64px;"); + assert_length_props(testDivStyle, "64px"); assert_equals(testDivStyle.getPropertyValue("zoom"), "2"); }); </script> diff --git a/testing/web-platform/tests/css/zoom/tentative/background-image-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/background-image-ref.html index 6fe548f343..6fe548f343 100644 --- a/testing/web-platform/tests/css/zoom/tentative/background-image-ref.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/background-image-ref.html diff --git a/testing/web-platform/tests/css/zoom/tentative/background-image.html b/testing/web-platform/tests/css/css-viewport/zoom/background-image.html index db6baa60db..805dad187d 100644 --- a/testing/web-platform/tests/css/zoom/tentative/background-image.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/background-image.html @@ -1,5 +1,6 @@ <!doctype html> <title>Zoom affects background-image intrinsic sizes</title> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> <link rel="match" href="background-image-ref.html"> <style> div { diff --git a/testing/web-platform/tests/css/zoom/tentative/basic-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/basic-ref.html index 5de90caf7f..5de90caf7f 100644 --- a/testing/web-platform/tests/css/zoom/tentative/basic-ref.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/basic-ref.html diff --git a/testing/web-platform/tests/css/zoom/tentative/basic.html b/testing/web-platform/tests/css/css-viewport/zoom/basic.html index fcd1761cfa..580d3c83cd 100644 --- a/testing/web-platform/tests/css/zoom/tentative/basic.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/basic.html @@ -3,6 +3,7 @@ <title>zoom property: basic test</title> <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> <link rel="author" href="https://mozilla.com" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> <link rel="match" href="basic-ref.html"> <style> div { diff --git a/testing/web-platform/tests/css/css-viewport/zoom/font-size-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/font-size-ref.html new file mode 100644 index 0000000000..5714a878b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-viewport/zoom/font-size-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style>CSS Test reference</style> +<div style="font-size: 12px"> + 12px text +</div> + +<hr> + +<div style="font-size: 24px;"> + 12px zoomed text +</div> + +<hr> + +<div style="font-size: 12px"> + <div style="font-size: 24px"> + 12px zoomed inherited text + </div> +</div> diff --git a/testing/web-platform/tests/css/css-viewport/zoom/font-size.html b/testing/web-platform/tests/css/css-viewport/zoom/font-size.html new file mode 100644 index 0000000000..e4b20c3c93 --- /dev/null +++ b/testing/web-platform/tests/css/css-viewport/zoom/font-size.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style>CSS zoom applies to font-size when specified and inherited</style> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> +<link rel="match" href="font-size-ref.html"> +<div style="font-size: 12px"> + 12px text +</div> +<hr> +<div style="font-size: 12px; zoom: 2"> + 12px zoomed text +</div> +<hr> +<div style="font-size: 12px"> + <div style="zoom:2"> + 12px zoomed inherited text + </div> +</div> diff --git a/testing/web-platform/tests/css/zoom/tentative/green-square-100px.html b/testing/web-platform/tests/css/css-viewport/zoom/green-square-100px.html index 6677176230..6677176230 100644 --- a/testing/web-platform/tests/css/zoom/tentative/green-square-100px.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/green-square-100px.html diff --git a/testing/web-platform/tests/css/zoom/tentative/image-intrinsic-size.html b/testing/web-platform/tests/css/css-viewport/zoom/image-intrinsic-size.html index d152bb24ee..d152bb24ee 100644 --- a/testing/web-platform/tests/css/zoom/tentative/image-intrinsic-size.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/image-intrinsic-size.html diff --git a/testing/web-platform/tests/css/zoom/tentative/inherited-length.html b/testing/web-platform/tests/css/css-viewport/zoom/inherited-length.html index 2bc04ff0cb..d83111a435 100644 --- a/testing/web-platform/tests/css/zoom/tentative/inherited-length.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/inherited-length.html @@ -3,6 +3,7 @@ <title>zoom property: inherited length into zoom</title> <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> <link rel="author" href="https://mozilla.com" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> <link rel="match" href="green-square-100px.html"> <style> div { diff --git a/testing/web-platform/tests/css/zoom/tentative/inherited.html b/testing/web-platform/tests/css/css-viewport/zoom/inherited.html index baa7f7ed8a..2c8ad1694a 100644 --- a/testing/web-platform/tests/css/zoom/tentative/inherited.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/inherited.html @@ -3,6 +3,7 @@ <title>Effective zoom value is inherited</title> <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> <link rel="author" href="https://mozilla.com" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> <link rel="match" href="basic-ref.html"> <style> .container { diff --git a/testing/web-platform/tests/css/css-viewport/line-height-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/line-height-ref.html index c75539243c..c75539243c 100644 --- a/testing/web-platform/tests/css/css-viewport/line-height-ref.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/line-height-ref.html diff --git a/testing/web-platform/tests/css/css-viewport/line-height.html b/testing/web-platform/tests/css/css-viewport/zoom/line-height.html index fa333be32f..fa333be32f 100644 --- a/testing/web-platform/tests/css/css-viewport/line-height.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/line-height.html diff --git a/testing/web-platform/tests/css/zoom/tentative/parsing/zoom-computed.html b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-computed.html index 3737901490..41fb1b24ae 100644 --- a/testing/web-platform/tests/css/zoom/tentative/parsing/zoom-computed.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-computed.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <meta charset="utf-8"> <title>CSS Test: getComputedStyle().zoom</title> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/computed-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/zoom/tentative/parsing/zoom-valid.html b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-valid.html index 3db16e0748..3f36508b8b 100644 --- a/testing/web-platform/tests/css/zoom/tentative/parsing/zoom-valid.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/parsing/zoom-valid.html @@ -3,6 +3,7 @@ <title>CSS Test: parsing zoom with valid and invalid values</title> <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> <link rel="author" title="Mozilla" href="https://mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> diff --git a/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent-ref.html new file mode 100644 index 0000000000..4e7456ce71 --- /dev/null +++ b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width"> +<div style="font-size: 4em; line-height: 4lh">ABC</div> diff --git a/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent.html b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent.html new file mode 100644 index 0000000000..57df82b6f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-viewport/zoom/relative-units-from-parent.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1892676"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> +<link rel="match" href="relative-units-from-parent-ref.html"> +<!-- + The font-size and line-height use the parent sizes, but should still + multiply by our own zoom. +--> +<div style="zoom: 2; font-size: 2em; line-height: 2lh">ABC</div> diff --git a/testing/web-platform/tests/css/css-viewport/zoom/relative-units.html b/testing/web-platform/tests/css/css-viewport/zoom/relative-units.html new file mode 100644 index 0000000000..8cfa27c93a --- /dev/null +++ b/testing/web-platform/tests/css/css-viewport/zoom/relative-units.html @@ -0,0 +1,42 @@ +<!doctype html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1892676"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + :root, + #zoomed { + font-size: 10px; + line-height: 10px; + zoom: 2; + } +</style> +<div id="outside"></div> +<div id="zoomed"> + <div id="inside"></div> +</div> +<script> + function test_unit(unit, outside, zoomed, inside = zoomed) { + test(function() { + let values = { outside, zoomed, inside }; + for (let id of ["outside", "zoomed", "inside"]) { + let el = document.getElementById(id); + el.style.height = "1" + unit; + // approx_equals is needed because innerHeight / innerWidth round. + assert_approx_equals(el.getBoundingClientRect().height, values[id], 1, `${unit} in ${id}`); + el.style.height = ""; + } + }); + } + + test_unit("em", 20, 40); + test_unit("rem", 20, 40); + test_unit("lh", 20, 40); + test_unit("rlh", 20, 40); + test_unit("vh", 2 * innerHeight / 100, 4 * innerHeight / 100); + test_unit("vw", 2 * innerWidth / 100, 4 * innerWidth / 100); +</script> diff --git a/testing/web-platform/tests/css/zoom/tentative/scroll-corner-crash.html b/testing/web-platform/tests/css/css-viewport/zoom/scroll-corner-crash.html index 0ec88deb74..0ec88deb74 100644 --- a/testing/web-platform/tests/css/zoom/tentative/scroll-corner-crash.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/scroll-corner-crash.html diff --git a/testing/web-platform/tests/css/zoom/tentative/scrollbar-crash.html b/testing/web-platform/tests/css/css-viewport/zoom/scrollbar-crash.html index 791022407f..791022407f 100644 --- a/testing/web-platform/tests/css/zoom/tentative/scrollbar-crash.html +++ b/testing/web-platform/tests/css/css-viewport/zoom/scrollbar-crash.html diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-options-visual-order.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-options-visual-order.html index 359c09279e..e3ae8a27a9 100644 --- a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-options-visual-order.html +++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-options-visual-order.html @@ -29,6 +29,7 @@ for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sidew select.style.writingMode = writingMode; this.add_cleanup(() => { select.removeAttribute("style"); + select.value = ""; }); const elementBox = select.getBoundingClientRect(); diff --git a/testing/web-platform/tests/css/cssom-view/Element-currentCSSZoom.html b/testing/web-platform/tests/css/cssom-view/Element-currentCSSZoom.html new file mode 100644 index 0000000000..2f477e8e2d --- /dev/null +++ b/testing/web-platform/tests/css/cssom-view/Element-currentCSSZoom.html @@ -0,0 +1,32 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Element.currentCSSZoom</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-currentcsszoom"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="unzoomed"> + <div id="unzoomedChild"></div> +</div> +<div style="zoom: 2" id="outer"> + <div style="zoom: 2" id="inner"> + <div id="renderedChild"></div> + <div style="display: none" id="nonRenderedChild"></div> + </div> +</div> +<script> +test(() => { + assert_equals(unzoomed.currentCSSZoom, 1, "Unzoomed content"); + assert_equals(outer.currentCSSZoom, 2, "Zoomed content"); + assert_equals(inner.currentCSSZoom, 4, "Effective zoom gets multiplied properly"); + assert_equals(renderedChild.currentCSSZoom, 4, "Effective zoom gets propagated to children"); + assert_equals(nonRenderedChild.currentCSSZoom, 1, "Non-rendered elements return 1 for currentCSSZoom"); +}, "Element.currentCSSZoom basic test"); + +test(() => { + unzoomed.style.zoom = 2; + assert_equals(unzoomed.currentCSSZoom, 2, "currentCSSZoom reacts to style changes"); + assert_equals(unzoomedChild.currentCSSZoom, 2, "currentCSSZoom propagates to descendants after style changes"); +}, "Element.currentCSSZoom reacts to style changes"); +</script> diff --git a/testing/web-platform/tests/css/cssom-view/WEB_FEATURES.yml b/testing/web-platform/tests/css/cssom-view/WEB_FEATURES.yml new file mode 100644 index 0000000000..a545dbadcb --- /dev/null +++ b/testing/web-platform/tests/css/cssom-view/WEB_FEATURES.yml @@ -0,0 +1,5 @@ +features: +- name: scroll-into-view + files: + - scrollIntoView-* + - scrollintoview.html diff --git a/testing/web-platform/tests/css/cssom-view/range-bounding-client-rect-with-nested-text.html b/testing/web-platform/tests/css/cssom-view/range-bounding-client-rect-with-nested-text.html new file mode 100644 index 0000000000..78ca5421df --- /dev/null +++ b/testing/web-platform/tests/css/cssom-view/range-bounding-client-rect-with-nested-text.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>All the rectangles for the text nodes must included in getClientRects</title> +<link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-range-getclientrects"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .nullDims { + width: 0; + height: 0; + } + + .nullDims > div { + position: absolute; + left: 10px; + } +</style> +<div id="container"> + <div class="nullDims"> + <div id="first" style="top: 10px">Hello</div> + </div> + <div class="nullDims"> + <div style="top: 40px">Firefox</div> + </div> + <div class="nullDims"> + <div style="top: 70px">Firefox again</div> + </div> + <div class="nullDims"> + <div id="last" style="top: 100px">World</div> + </div> +</div> +<script> + test(function () { + const first = document.getElementById("first"); + const last = document.getElementById("last"); + const range = document.createRange(); + range.setStart(first.firstChild, 0); + range.setEnd(last.firstChild, 5); + + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + let rects = Array.from(range.getClientRects()); + assert_equals(rects.length, 6, "Number of rectangles"); + rects = rects.filter(({ width, height }) => width > 0 && height > 0); + assert_equals(rects.length, 4, "Number of non-empty rectangles"); + }, "getClientRects should return non-empty rectangles for nested text nodes") +</script> diff --git a/testing/web-platform/tests/css/cssom/cssstyledeclaration-csstext-setter.window.js b/testing/web-platform/tests/css/cssom/cssstyledeclaration-csstext-setter.window.js new file mode 100644 index 0000000000..4474358ed0 --- /dev/null +++ b/testing/web-platform/tests/css/cssom/cssstyledeclaration-csstext-setter.window.js @@ -0,0 +1,64 @@ +// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext + +[ + document.body, + document.createElement("cool-beans") +].forEach(element => { + test(t => { + t.add_cleanup(() => element.removeAttribute("style")); + + element.style.background = "red"; + assert_equals(element.getAttribute("style"), "background: red;"); + + element.style.cssText = "background:red"; + assert_equals(element.getAttribute("style"), "background: red;"); + }, `cssText setter should set style attribute even when there are no style changes (${element.localName})`); + + test(t => { + t.add_cleanup(() => element.removeAttribute("style")); + + element.setAttribute("style", "background: red"); + assert_equals(element.getAttribute("style"), "background: red"); + + element.style.cssText = "background:red"; + assert_equals(element.getAttribute("style"), "background: red;"); + }, `cssText setter should set style attribute even when there are no style changes, part 2 (${element.localName})`); + + test(t => { + t.add_cleanup(() => element.removeAttribute("style")); + + element.setAttribute("style", "background: red"); + assert_equals(element.getAttribute("style"), "background: red"); + + element.style.cssText = "background:red "; // trailing space + assert_equals(element.getAttribute("style"), "background: red;"); + }, `cssText setter should set style attribute even when there are no style changes, part 3 (${element.localName})`); + + test(t => { + t.add_cleanup(() => element.removeAttribute("style")); + + element.setAttribute("style", "background: red"); + assert_equals(element.getAttribute("style"), "background: red"); + + element.style.cssText = "background:red;"; + assert_equals(element.getAttribute("style"), "background: red;"); + }, `cssText setter should set style attribute even when there are no style changes, part 4 (${element.localName})`); +}); + +test(t => { + const style = document.createElement("style"); + t.add_cleanup(() => { + document.body.removeAttribute("style"); + style.remove(); + }); + style.textContent = `[style="background: red;"] { background:white !important; }`; + document.body.appendChild(style); + + document.body.setAttribute("style", "background:red"); + assert_true(document.body.matches("[style=\"background:red\"]")); + assert_equals(getComputedStyle(document.body).backgroundColor, "rgb(255, 0, 0)"); + + document.body.style.cssText = "background:red"; + assert_equals(getComputedStyle(document.body).backgroundColor, "rgb(255, 255, 255)"); + assert_true(document.body.matches("[style=\"background: red;\"]")); +}, `cssText setter and selector invalidation`); diff --git a/testing/web-platform/tests/css/filter-effects/WEB_FEATURES.yml b/testing/web-platform/tests/css/filter-effects/WEB_FEATURES.yml new file mode 100644 index 0000000000..a882be3079 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/WEB_FEATURES.yml @@ -0,0 +1,7 @@ +features: +- name: backdrop-filter + files: + - backdrop-filter-* + - backdrop-filters-* + - css-backdrop-filters-* + - repaint-added-backdrop-filter.html diff --git a/testing/web-platform/tests/css/filter-effects/animation/WEB_FEATURES.yml b/testing/web-platform/tests/css/filter-effects/animation/WEB_FEATURES.yml new file mode 100644 index 0000000000..cd7e6695d4 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/animation/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: backdrop-filter + files: + - backdrop-filter-* diff --git a/testing/web-platform/tests/css/filter-effects/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/filter-effects/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..cd7e6695d4 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/parsing/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: backdrop-filter + files: + - backdrop-filter-* diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-008.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-008.html new file mode 100644 index 0000000000..30d789f4eb --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-008.html @@ -0,0 +1,264 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-path interpolation with allow-discrete</title> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#interpolating-shape"> + <meta name="assert" content="offset-path:shape() supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + html { + font-size: 16px; + } + .parent { + offset-path: shape(from -5px 5px, move to 5% 1px); + } + .target { + offset-path: shape(from 5px 5px, line to 10px 10%); + } + </style> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: 'offset-path', + from: neutralKeyframe, + to: 'shape(from -5px 5px, line to 20px 20%)', + }, [ + {at: -0.3, expect: 'shape(from 8px 5px, line to 7px 7%)'}, + {at: 0, expect: 'shape(from 5px 5px, line to 10px 10%)'}, + {at: 0.6, expect: 'shape(from -1px 5px, line to 16px 16%)'}, + {at: 1, expect: 'shape(from -5px 5px, line to 20px 20%)'}, + {at: 1.5, expect: 'shape(from -10px 5px, line to 25px 25%)'}, + ]); + + test_no_interpolation({ + property: 'offset-path', + from: 'initial', + to: 'shape(from 8px 5px, line to 7px 7%)', + }); + + test_interpolation({ + property: 'offset-path', + from: 'inherit', + to: 'shape(from 15% 15px, move to 20% -10px)', + }, [ + {at: -0.3, expect: 'shape(from calc(-4.5% - 6.5px) 2px, move to 0.5% 4.3px)'}, + {at: 0, expect: 'shape(from calc(0% - 5px) 5px, move to 5% 1px)'}, + {at: 0.5, expect: 'shape(from calc(7.5% - 2.5px) 10px, move to 12.5% -4.5px)'}, + {at: 1, expect: 'shape(from 15% 15px, move to 20% -10px'}, + {at: 1.5, expect: 'shape(from calc(22.5% + 2.5px) 20px, move to 27.5% -15.5px)'}, + ]); + + test_no_interpolation({ + property: 'offset-path', + from: 'unset', + to: 'shape(from 10px 10px, close)', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'none', + to: 'shape(from 10px 10px, close)', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'shape(from 10px 10px, move to 10% 10%)', + to: 'shape(from 10px 10px, close)', + }); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)', + to: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, hline to -1%, vline to -2px, close)'}, + {at: 0, expect: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)'}, + {at: 0.5, expect: 'shape(from 10% 10px, hline to 15% , vline to -10px, close)'}, + {at: 1, expect: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)'}, + {at: 1.5, expect: 'shape(from 20% 20px, hline to 35%, vline to -20px, close)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)', + to: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, curve to 7% 13px via -3% 86px, curve to 33% 17px via 17% 53px 34% 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, curve to 15% 5px via 5% 70px, curve to 25% 25px via 25% 45px 10% 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, curve to 25% -5px via 15% 50px, curve to 15% 35px via 35% 35px -20% 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)', + to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px via -3% 86px, curve by 33% 17px via 17% 53px 34% 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px via 5% 70px, curve by 25% 25px via 25% 45px 10% 85px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)', + to: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px via -3% 86px, smooth to 33% 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px via 5% 70px, smooth to 25% 25px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)', + to: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px via -3% 86px, smooth by 33% 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px via 5% 70px, smooth by 25% 25px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', + to: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px cw rotate 270deg small, arc to 25% 20px of 10px 5px small cw)' + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px ccw small, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px ccw small)'}, + {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px ccw small, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px ccw small )'}, + {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw large, arc to 25% 20px of 10px 5px cw small)'}, + {at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px rotate 270deg cw small, arc to 25% 20px of 10px 5px cw small)'}, + {at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px ccw small, arc by 30% -20px of 15px rotate 390deg cw small, arc to 25% 20px of 10px 5px cw small)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 8.25px, close, vline by 3pt)', + to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)', + }, [ + {at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'}, + {at: 0, expect: 'shape(from 5px -5%, hline to 10px, vline by calc(0% + 160px), hline by 8.25px, close, vline by 4px)'}, + {at: 0.6, expect: 'shape(from -1px calc(-2% + 3px), hline to 16px, vline by calc(6% + 64px), hline by 12.9px, close ,vline by 6.4px)'}, + {at: 1, expect: 'shape(from -5px calc(0% + 5px), hline to 20px, vline by 10%, hline by 16px, close, vline by 8px)'}, + {at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'}, + ]); + + test_no_interpolation({ + property: 'offset-path', + from: 'shape(from 10px 10px, move to 10% 10%)', + to: 'path("M10 10 z")', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'path("M10 10 M10 10")', + to: 'shape(from 10px 10px, close)', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'path("M10 10 h 5")', + to: 'shape(from 10px 10px, hline to 5px)', + }); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)', + to: 'path("M 15 15 H 25 V -15 Z")', + }, [ + {at: -0.3, expect: 'shape(from 2px 2px, hline to -1px, vline to -2px, close)'}, + {at: 0, expect: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)'}, + {at: 0.5, expect: 'shape(from 10px 10px, hline to 15px, vline to -10px, close)'}, + {at: 1, expect: 'shape(from 15px 15px, hline to 25px, vline to -15px, close)'}, + {at: 1.5, expect: 'shape(from 20px 20px, hline to 35px, vline to -20px, close)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)', + to: 'path("M 15 15 Q 10 60 20 0 C 30 40 -5 100 20 30")', + }, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, curve to calc(13% - 6px) 13px via calc(0% - 3px) 86px, curve to calc(39% - 6px) 17px via calc(26% - 9px) 53px calc(32.5% + 1.5px) 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, curve to calc(5% + 10px) 5px via calc(0% + 5px) 70px, curve to calc(15% + 10px) 25px via calc(10% + 15px) 45px calc(12.5% - 2.5px) 85px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, curve to calc(0% + 20px) 0px via calc(0% + 10px) 60px, curve to calc(0% + 20px) 30px via calc(0% + 30px) 40px calc(0% - 5px) 100px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, curve to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, curve to calc(-15% + 30px) 35px via calc(-10% + 45px) 35px calc(-12.5% - 7.5px) 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'path("M 5 5 q 0 80 10 10 c 20 50 25 70 30 20")', + to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)', + }, [ + {at: -0.3, expect: 'shape(from calc(-4.5% + 6.5px) 2px, curve by calc(-6% + 13px) 13px via -3% 86px, curve by calc(-6% + 39px) 17px via calc(-9% + 26px) 53px calc(1.5% + 32.5px) 61px)'}, + {at: 0, expect: 'shape(from calc(0% + 5px) 5px, curve by calc(0% + 10px) 10px via 0% 80px, curve by calc(0% + 30px) 20px via calc(0% + 20px) 50px calc(0% + 25px) 70px)'}, + {at: 0.5, expect: 'shape(from calc(7.5% + 2.5px) 10px, curve by calc(10% + 5px) 5px via 5% 70px, curve by calc(10% + 15px) 25px via calc(15% + 10px) 45px calc(-2.5% + 12.5px) 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'}, + {at: 1.5, expect: 'shape(from calc(22.5% - 2.5px) 20px, curve by calc(30% - 5px) -5px via 15% 50px, curve by calc(30% - 15px) 35px via calc(45% - 10px) 35px calc(-7.5% - 12.5px) 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)', + to: 'path("M 15 15 S 10 60 20 0 T 20 30")', + }, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, smooth to calc(13% - 6px) 13px via calc(0% - 3px) 86px, smooth to calc(39% - 6px) 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, smooth to calc(5% + 10px) 5px via calc(0% + 5px) 70px, smooth to calc(15% + 10px) 25px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, smooth to calc(0% + 20px) 0px via calc(0% + 10px) 60px, smooth to calc(0% + 20px) 30px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, smooth to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, smooth to calc(-15% + 30px) 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'path("M 5 5 s 0 80 10 10 t 30 20")', + to: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)', + }, [ + {at: -0.3, expect: 'shape(from 2px 2px, smooth by 7px 13px via -3px 86px, smooth by 33px 17px)'}, + {at: 0, expect: 'shape(from 5px 5px, smooth by 10px 10px via 0px 80px, smooth by 30px 20px)'}, + {at: 0.5, expect: 'shape(from 10px 10px, smooth by 15px 5px via 5px 70px, smooth by 25px 25px)'}, + {at: 1, expect: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)'}, + {at: 1.5, expect: 'shape(from 20px 20px, smooth by 25px -5px via 15px 50px, smooth by 15px 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', + to: 'path("M 15 15 A 20,30 0 0,0 5,-25 a 20,20 270 0,1 25,-15 A 10,5 0 0,0 25 20")', + }, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, arc to calc(19.5% - 1.5px) -12px of 7px 17px, arc by calc(19.5% - 7.5px) -2px of 33px cw large rotate -42deg, arc to calc(32.5% - 7.5px) 20px of 10px 5px)'}, + {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from calc(3.5% + 4.5px) 8px, arc to calc(10.5% + 1.5px) -18px of 13px 23px, arc by calc(10.5% + 7.5px) -8px of 27px cw large rotate 102deg, arc to calc(17.5% + 7.5px) 20px of 10px 5px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, arc to calc(7.5% + 2.5px) -20px of 15px 25px, arc by calc(7.5% + 12.5px) -10px of 25px cw large rotate 150deg, arc to calc(12.5% + 12.5px) 20px of 10px 5px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, arc to calc(0% + 5px) -25px of 20px 30px, arc by calc(0% + 25px) -15px of 20px cw rotate 270deg, arc to calc(0% + 25px) 20px of 10px 5px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, arc to calc(-7.5% + 7.5px) -30px of 25px 35px, arc by calc(-7.5% + 37.5px) -20px of 15px cw rotate 390deg, arc to calc(-12.5% + 37.5px) 20px of 10px 5px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'path("M 5 5 A 10,20 0 0,0 15,-15 a 30,30 30 1,1 15,-5 A 10,5 0 0,0 25 20")', + to: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px cw rotate 270deg small, arc to 25px 20px of 10px 5px small cw)' + }, [ + {at: -0.3, expect: 'shape(from 2px 2px, arc to 18px -12px of 7px 17px ccw small, arc by 12px -2px of 33px 33px rotate -42deg cw large , arc to 25px 20px of 10px 5px ccw small)'}, + {at: 0, expect: 'shape(from 5px 5px, arc to 15px -15px of 10px 20px, arc by 15px -5px of 30px cw rotate 30deg large, arc to 25px 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from 8px 8px, arc to 12px -18px of 13px 23px ccw small, arc by 18px -8px of 27px 27px rotate 102deg cw large, arc to 25px 20px of 10px 5px ccw small )'}, + {at: 0.5, expect: 'shape(from 10px 10px, arc to 10px -20px of 15px 25px ccw small, arc by 20px -10px of 25px rotate 150deg cw large, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1, expect: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px rotate 270deg cw small, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1.5, expect: 'shape(from 20px 20px, arc to 0px -30px of 25px 35px ccw small, arc by 30px -20px of 15px rotate 390deg cw small, arc to 25px 20px of 10px 5px cw small)'}, + ]); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001-ref.html new file mode 100644 index 0000000000..b1737a27df --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: <basic-shape> shape() path</title> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + background-color: green; + transform: translate(550px, 150px) rotate(90deg); + width: 100px; + height: 100px; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001.html new file mode 100644 index 0000000000..4cca1744d0 --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> shape() function</title> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<link rel="match" href="offset-path-shape-shape-001-ref.html"> +<meta name="assert" content="This tests that shape() generates a rotation and translation."> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + width: 100px; + height: 100px; + background-color: green; + offset-path: shape(from 0px 0%, + hline by 100%, + vline to 400px, + hline by -100%, + close); + offset-distance: 40%; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-002.html new file mode 100644 index 0000000000..51030cab14 --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> shape() function with padding-box</title> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<link rel="match" href="offset-path-shape-shape-001-ref.html"> +<meta name="assert" content="This tests that shape() generates a rotation and translation."> + +<style> +#outer { + top: 50px; + left: 50px; + position: relative; + width: 600px; + height: 400px; + padding: 50px; + box-sizing: content-box; +} +#box { + width: 100px; + height: 100px; + background-color: green; + offset-path: shape(from 50px 10%, + hline by calc(100% - 100px), + vline to calc(100% - 50px), + hline to 50px, + close) + padding-box; + offset-distance: 40%; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-003.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-003.html new file mode 100644 index 0000000000..2b83f89cdc --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> shape() function with content-box</title> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<link rel="match" href="offset-path-shape-shape-001-ref.html"> +<meta name="assert" content="This tests that shape() generates a rotation and translation."> + +<style> +#outer { + width: 600px; + height: 400px; + border: 50px solid transparent; +} +#box { + width: 100px; + height: 100px; + background-color: green; + offset-path: shape(from 50px calc(-10% + 90px), + hline by 100%, + vline to calc(100% + 50px)) + content-box; + offset-distance: 80%; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/parsing/offset-path-shape-computed.html b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-computed.html new file mode 100644 index 0000000000..8904eaf16a --- /dev/null +++ b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Motion Path Module Level 1: getComputedStyle for offset-path with shape()</title> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<meta name="assert" content="offset-path has absolute shape commands."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> +html { + font-size: 16px; +} +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("offset-path", "shape(from 0px 0px, line to 10px 10px)"); +test_computed_value("offset-path", "shape(from 1em 50px, line to 10rem 10%)", "shape(from 16px 50px, line to 160px 10%)"); +test_computed_value("offset-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); +test_computed_value("offset-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)", "shape(from 10px 10px, hline by 10px, vline to 80px)"); +test_computed_value("offset-path", "shape(from 10px 10px, vline by 5%, hline to 1px)"); +test_computed_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1%)", "shape(from 10px 10px, curve to 50px 20px via 160px 1%)"); +test_computed_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1px 20% 1em)", "shape(from 10px 10px, curve to 50px 20px via 160px 1px 20% 16px)"); +test_computed_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 1%)", "shape(from 10px 10px, smooth to 50px 20px via 160px 1%)"); +test_computed_value("offset-path", "shape(from 10px 10px, smooth to 50px 3pt)", "shape(from 10px 10px, smooth to 50px 4px)"); +test_computed_value("offset-path", "shape(from 10px 10px, arc to 50px 3pt of 10px 10px)", "shape(from 10px 10px, arc to 50px 4px of 10px)"); +test_computed_value("offset-path", "shape(from 10px 10px, arc to 50px 3pt of 10px 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 4px of 10px)"); +test_computed_value("offset-path", "shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg)", "shape(from 10% 16px, arc to 50px 4px of 20% cw large rotate 25deg)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/motion/parsing/offset-path-shape-parsing.html b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-parsing.html new file mode 100644 index 0000000000..6ca288b660 --- /dev/null +++ b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-parsing.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Motion Path Module Level 1: parsing offset-path with shape()</title> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<meta name="assert" content="offset-path supports the full shape() grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// basic +test_valid_value("offset-path", "shape(from 0px 0px, line to 10px 10px)"); +test_valid_value("offset-path", "shape( from 0px 0px, line to 10px 10px )", "shape(from 0px 0px, line to 10px 10px)"); +test_valid_value("offset-path", "shape(from 1em 50%, line to 10px 10px)"); +test_valid_value("offset-path", "shape(from 1ch 50px, line to 10rem 10vh)"); +test_valid_value("offset-path", "shape(from 1ch -50px, line to -10% 12px)"); + +// segment types +test_valid_value("offset-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); +test_valid_value("offset-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)"); +test_valid_value("offset-path", "shape(from 10px 10px, vline by 5%, hline to 1vw)"); +test_valid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1%)"); +test_valid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1px 20vh 1ch)"); +test_valid_value("offset-path", "shape(from 10px 10px, curve by 50px 20px via 10rem 1px 20vh 1ch)"); +test_valid_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 1%)"); +test_valid_value("offset-path", "shape(from 10px 10px, smooth to 50px 1pt)"); +test_valid_value("offset-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)", "shape(from 10px 10px, arc to 50px 1pt of 10px)"); +test_valid_value("offset-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 1pt of 10px)"); +test_valid_value("offset-path", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)"); + +// nonsense +test_invalid_value("offset-path", "shape(evenodd from 0px 0px, line to 10px 10px)"); +test_invalid_value("offset-path", "shape(nonzero from 0px 0px, line to 10px 10px)"); +test_invalid_value("offset-path", "shape(evenodd from 0px 0px, close)"); +test_invalid_value("offset-path", "shape(from 0px 0px, close path)"); +test_invalid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem)"); +test_invalid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1% 12px)"); +test_invalid_value("offset-path", "shape(from 10px 10px, hline byy 10px, vline to 5rem)"); +test_invalid_value("offset-path", "shape(from 10px 10px, vline by 5% hline by 1vw"); +test_invalid_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem)"); +test_invalid_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 2px 2pt)"); +test_invalid_value("offset-path", "shape()"); +test_invalid_value("offset-path", "shape(from)"); +test_invalid_value("offset-path", "shape(from 0px)"); +test_invalid_value("offset-path", "shape(from 0px 20px,)"); +test_invalid_value("offset-path", "shape(close)"); +test_invalid_value("offset-path", "shape(nonzero close)"); +test_invalid_value("offset-path", "shape(from 0px 10px)"); +test_invalid_value("offset-path", "shape(allkindsofnonsense)"); +test_invalid_value("offset-path", "shape(arc)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml b/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml new file mode 100644 index 0000000000..47cf05a2c0 --- /dev/null +++ b/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml @@ -0,0 +1,7 @@ +features: +- name: focus-visible + files: + - focus-visible-* +- name: has + files: + - has-* diff --git a/testing/web-platform/tests/css/selectors/dir-pseudo-on-input-element.html b/testing/web-platform/tests/css/selectors/dir-pseudo-on-input-element.html index 25f7a080d7..b1427bf42d 100644 --- a/testing/web-platform/tests/css/selectors/dir-pseudo-on-input-element.html +++ b/testing/web-platform/tests/css/selectors/dir-pseudo-on-input-element.html @@ -1,14 +1,10 @@ <!DOCTYPE html> -<html> -<head> <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> <link rel="help" href="https://html.spec.whatwg.org/multipage/dom.html#the-directionality"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> -</head> <body> <script> - test(() => { const input = document.createElement('input'); input.type = 'tel'; @@ -195,9 +191,17 @@ for (const type of ['date', 'time', 'number', 'range', 'color', 'checkbox', 'rad input.removeAttribute('dir'); assert_true(input.matches(':dir(ltr)')); assert_false(input.matches(':dir(rtl)')); + + let rtlParent = document.createElement("div"); + rtlParent.dir = "rtl"; + input.dir = "auto"; + rtlParent.appendChild(input); + document.body.appendChild(rtlParent); // Just for good measure. + assert_true(input.matches(':dir(ltr)')); + assert_false(input.matches(':dir(rtl)')); + rtlParent.remove(); }, `input element whose type attribute is in the ${type} state`); } </script> -</body> </html> diff --git a/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml b/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml new file mode 100644 index 0000000000..4eaa2f3931 --- /dev/null +++ b/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml @@ -0,0 +1,6 @@ +features: +- name: has + files: + - has-* + - "*-in-has.*" + - "*-in-has-*" diff --git a/testing/web-platform/tests/css/selectors/invalidation/is-where-pseudo-containing-hard-pseudo.html b/testing/web-platform/tests/css/selectors/invalidation/is-where-pseudo-containing-hard-pseudo.html new file mode 100644 index 0000000000..416aacca8c --- /dev/null +++ b/testing/web-platform/tests/css/selectors/invalidation/is-where-pseudo-containing-hard-pseudo.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<title>CSS Selectors Invalidation: :is and :where selectors containing "hard" selectors</title> +<link rel="author" title="David Shin" href="dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/selectors/#logical-combination"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874042"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.container { + color: grey; +} + +#subject1:is(.other-match, :has(.descendant)) { + color: red; +} + +#subject1:is(.parent > .other-match, .parent > :has(.descendant)) { + color: orangered; +} + +#subject2:where(.other-match, :has(.descendant)) { + color: darkred; +} + +#subject2:where(.parent > .other-match, .parent > :has(.descendant)) { + color: pink; +} + +#subject3:is(.other-match, :nth-child(1000 of .another-match)) { + color: green; +} + +#subject3:is(.parent > .other-match, .parent > :nth-child(1000 of .another-match)) { + color: lightgreen; +} + +#subject4:where(.other-match, :nth-child(1000 of .another-match)) { + color: darkgreen; +} + +#subject4:where(.parent > .other-match, .parent > :nth-child(1000 of .another-match)) { + color: yellowgreen; +} +</style> +<div id="par"> + <div id="subject1" class="container"></div> + <div id="subject2" class="container"></div> + <div id="subject3" class="container another-match"></div> + <div id="subject4" class="container another-match"></div> +</div> +<script> +const colors = { + grey: "rgb(128, 128, 128)", + red: "rgb(255, 0, 0)", + orangered: "rgb(255, 69, 0)", + darkred: "rgb(139, 0, 0)", + pink: "rgb(255, 192, 203)", + green: "rgb(0, 128, 0)", + lightgreen: "rgb(144, 238, 144)", + darkgreen: "rgb(0, 100, 0)", + yellowgreen: "rgb(154, 205, 50)" +}; + +function testClassChange(subject, before, after, afterParent) { + const cls = "other-match"; + const parentCls = "parent"; + const beforeColor = colors[before]; + + test(() => { + assert_equals(getComputedStyle(subject).color, beforeColor); + }, subject.id + " initial color is " + before); + + subject.classList.add(cls); + const afterColor = colors[after]; + test(() => { + assert_equals(getComputedStyle(subject).color, afterColor); + }, subject.id + " is " + after + " when ." + cls + " added"); + + par.classList.add(parentCls); + const afterParentColor = colors[afterParent]; + test(() => { + assert_equals(getComputedStyle(subject).color, afterParentColor); + }, subject.id + " is " + afterParent + " when ." + parentCls + " added to parent"); + + par.classList.remove(parentCls); + test(() => { + assert_equals(getComputedStyle(subject).color, afterColor); + }, subject.id + " is " + afterParent + " when ." + parentCls + " removed from parent"); + + subject.classList.remove(cls); + test(() => { + assert_equals(getComputedStyle(subject).color, beforeColor); + }, subject.id + " is " + after + " when ." + cls + " removed"); +} + +testClassChange(subject1, "grey", "red", "orangered"); +testClassChange(subject2, "grey", "darkred", "pink"); +testClassChange(subject3, "grey", "green", "lightgreen"); +testClassChange(subject4, "grey", "darkgreen", "yellowgreen"); +</script> diff --git a/testing/web-platform/tests/css/selectors/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/selectors/parsing/WEB_FEATURES.yml new file mode 100644 index 0000000000..261019c003 --- /dev/null +++ b/testing/web-platform/tests/css/selectors/parsing/WEB_FEATURES.yml @@ -0,0 +1,8 @@ +features: +- name: focus-visible + files: + - parse-focus-visible.html +- name: has + files: + - parse-has.html + - parse-has-* diff --git a/testing/web-platform/tests/css/zoom/iframe-zoom-nested.html b/testing/web-platform/tests/css/zoom/iframe-zoom-nested.html new file mode 100644 index 0000000000..22a491eb0b --- /dev/null +++ b/testing/web-platform/tests/css/zoom/iframe-zoom-nested.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>nested iframes with CSS zoom</title> +<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link href="reference/iframe-zoom-nested-ref.html" rel="match"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> +<head> + <style> + body { + overflow: hidden; + } + + div { + margin: 0px; + padding: 0px; + overflow: visible; + } + + iframe { + overflow: visible; + border: none; + } + </style> +</head> +<body> + <div id="no_zoom"> + <iframe src="resources/nested-iframe-no-zoom.html" scrolling="no"></iframe> + </div> + <div id="no_zoom2"> + <iframe src="resources/nested-iframe-with-zoom.html" scrolling="no"></iframe> + </div> + <div id="with_zoom" style="zoom: 2;"> + <iframe src="resources/nested-iframe-no-zoom.html" scrolling="no"></iframe> + </div> + <div id="another_with_zoom" style="zoom: 2;"> + <iframe src="resources/nested-iframe-with-zoom.html" scrolling="no"></iframe> + </div> +</body> diff --git a/testing/web-platform/tests/css/zoom/iframe-zoom.sub.html b/testing/web-platform/tests/css/zoom/iframe-zoom.sub.html new file mode 100644 index 0000000000..82a202161b --- /dev/null +++ b/testing/web-platform/tests/css/zoom/iframe-zoom.sub.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>iframe in an element with CSS zoom</title> +<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link href="reference/iframe-zoom-ref.html" rel="match"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> + +<head> + <style> + body { + overflow: hidden; + } + + div { + margin: 0px; + padding: 0px; + } + + iframe { + height: 80px; + width: 80px; + border: none; + } + </style> +</head> + +<body> + + <div id="no_zoom"> + <iframe src="resources/iframe_content.html"></iframe> + </div> + + <div id="with_zoom" style="zoom: 3;"> + <iframe src="resources/iframe_content.html"></iframe> + </div> + + <div id="another_with_zoom" style="zoom: 3;"> + <iframe src="http://{{hosts[alt][]}}:{{ports[http][0]}}/css/zoom/tentative/resources/iframe_content.html"></iframe> + </div> + +</body> diff --git a/testing/web-platform/tests/css/zoom/reference/iframe-zoom-nested-ref.html b/testing/web-platform/tests/css/zoom/reference/iframe-zoom-nested-ref.html new file mode 100644 index 0000000000..b855278516 --- /dev/null +++ b/testing/web-platform/tests/css/zoom/reference/iframe-zoom-nested-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>ref for nested iframes with css zoom</title> +<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> + +<head> + <style> + iframe { + border: none; + margin: 0px; + padding: 0px; + } + </style> +</head> + +<body> + + <div id="no_zoom"> + <iframe style="height: 80px;" srcdoc='<body style="margin: 0;"><div id="target" style="background-color: aqua; width: 64px; height: 64px;"></div></body>'></iframe> + </div> + + <div id="with_zoom"> + <iframe style="height: 248px;" srcdoc='<body style="margin: 0;"><div id="target" style="background-color: aqua; width: 64px; height: 64px; zoom: 2;"></div></body>'></iframe> + </div> + + <div id="another_with_zoom"> + <iframe style="height: 248px;" srcdoc='<body style="margin: 0;"><div id="target" style="background-color: aqua; width: 64px; height: 64px; zoom: 2;"></div></body>'></iframe> + </div> + + <div id="another_with_zoom"> + <iframe style="height: 260px;" srcdoc='<body style="margin: 0;"><div id="target" style="background-color: aqua; width: 64px; height: 64px; zoom: 4;"></div></body>'></iframe> + </div> + +</body> diff --git a/testing/web-platform/tests/css/zoom/reference/iframe-zoom-ref.html b/testing/web-platform/tests/css/zoom/reference/iframe-zoom-ref.html new file mode 100644 index 0000000000..43bc3e24cf --- /dev/null +++ b/testing/web-platform/tests/css/zoom/reference/iframe-zoom-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>ref for iframe in an element with css zoom</title> +<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-viewport/"> + +<head> + <style> + iframe { + border: none; + margin: 0px; + padding: 0px; + } + </style> +</head> + +<body> + + <div id="no_zoom"> + <iframe style="height: 80px;" srcdoc='<body style="margin: 0;"><div id="target" style="background-color: aqua; width: 64px; height: 64px;"></div></body>'></iframe> + </div> + + <div id="with_zoom"> + <iframe style="height: 248px;" srcdoc='<body style="margin: 0;"><div id="target" style="background-color: aqua; width: 64px; height: 64px; zoom: 3;"></div></body>'></iframe> + </div> + + <div id="another_with_zoom"> + <iframe style="height: 240px;" srcdoc='<body style="margin: 0;"><div id="target" style="background-color: aqua; width: 64px; height: 64px; zoom: 3;"></div></body>'></iframe> + </div> + +</body> diff --git a/testing/web-platform/tests/css/zoom/resources/iframe_content.html b/testing/web-platform/tests/css/zoom/resources/iframe_content.html new file mode 100644 index 0000000000..58c4d03a46 --- /dev/null +++ b/testing/web-platform/tests/css/zoom/resources/iframe_content.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body style="margin: 0"> + <div id="target" style="background-color: aqua; width: 64px; height: 64px;"></div> +</body> diff --git a/testing/web-platform/tests/css/zoom/resources/nested-iframe-no-zoom.html b/testing/web-platform/tests/css/zoom/resources/nested-iframe-no-zoom.html new file mode 100644 index 0000000000..60b1fd6481 --- /dev/null +++ b/testing/web-platform/tests/css/zoom/resources/nested-iframe-no-zoom.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div> +<iframe src="iframe_content.html" style="overflow: visible; width: 80px; border: none;" scrolling="no"></iframe> +</div> diff --git a/testing/web-platform/tests/css/zoom/resources/nested-iframe-with-zoom.html b/testing/web-platform/tests/css/zoom/resources/nested-iframe-with-zoom.html new file mode 100644 index 0000000000..e7de64aafb --- /dev/null +++ b/testing/web-platform/tests/css/zoom/resources/nested-iframe-with-zoom.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="zoom: 3;"> +<iframe src="iframe_content.html" style="overflow: visible; height: 80px; width: 80px; border: none;" scrolling="no"></iframe> +</div> |