diff options
Diffstat (limited to '')
10 files changed, 155 insertions, 27 deletions
diff --git a/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html index 0971402e6b..fb706cbf03 100644 --- a/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html +++ b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html @@ -43,7 +43,6 @@ fieldset, details { <div class="wrapper"> <canvas></canvas> <div class="inline-block">foo</div> - <button>foo</button> <select><option>foo</option></select> <select multiple style="height: 40px;"><option>foo</option></select> <textarea style="height: 40px;"></textarea> diff --git a/testing/web-platform/tests/css/css-contain/contain-layout-button-001.html b/testing/web-platform/tests/css/css-contain/contain-layout-button-001.html deleted file mode 100644 index b53b28879e..0000000000 --- a/testing/web-platform/tests/css/css-contain/contain-layout-button-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Containment Test: Layout containment on button</title> -<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> -<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout"> -<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align"> -<link rel="match" href="reference/contain-layout-button-001-ref.html"> -<meta name=assert content="Layout containment does apply to buttons, thus their baseline is their margin-bottom edge."> -<style> -button { - border: 5px solid green; - padding: 0; - /* We use a nonzero margin-bottom to be sure we're synthesizing a baseline - from the margin-box rather than from the border-box: */ - margin-bottom: 2px; - contain: layout; - color: transparent; - width: 0; - height: 0; -} -</style> - -<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p> -before<button>b</button>after diff --git a/testing/web-platform/tests/css/css-contain/contain-layout-button-001.tentative.html b/testing/web-platform/tests/css/css-contain/contain-layout-button-001.tentative.html new file mode 100644 index 0000000000..f5a664e566 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/contain-layout-button-001.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Layout containment on button</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align"> +<link rel="match" href="reference/contain-layout-button-001-ref.html"> +<meta name=assert content="Layout containment does apply to buttons, but in an inline context their baseline is synthesized from their content-box."> +<style> +button { + border: 5px solid green; + padding: 0; + /* We use a nonzero margin-bottom to be sure we're synthesizing a baseline + from the margin-box rather than from the border-box: */ + margin-bottom: 2px; + contain: layout; + color: transparent; + width: 0; + height: 0; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p> +before<button>b</button>after diff --git a/testing/web-platform/tests/css/css-contain/contain-layout-button-002.tentative.html b/testing/web-platform/tests/css/css-contain/contain-layout-button-002.tentative.html new file mode 100644 index 0000000000..15026d55f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/contain-layout-button-002.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout"> +<link rel="help" href="https://github.com/web-platform-tests/wpt/issues/45889"> +<link rel="match" href="reference/contain-layout-button-002-ref.html"> +<meta name=assert content="An empty button and a button with layout containment should align the same."> +<style> +button { + border: 5px solid green; + padding: 10px; + margin-bottom: 2px; + color: transparent; + width: 20px; + height: 20px; +} +</style> + +<p>This test passes if it has the same output as the reference.</p> +<button></button> <button style="contain:layout"></button> diff --git a/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html index 4ae5efca91..d9152432ed 100644 --- a/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html +++ b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html @@ -206,6 +206,9 @@ --inherit-no: bar; --unset-no: baz; --initial-no: baz; + --space-no: baz; + --explicit-initial: initial; + --space: ; } @container style(--initial: initial) { #initial { color: green; } @@ -225,6 +228,18 @@ @container not style(--inherit-no: inherit) { #inherit-no { color: green; } } + @container style(--explicit-initial: initial) { + #explicit-initial { color: green; } + } + @container not style(--explicit-initial) { + #explicit-initial-implicit { color: green; } + } + @container style(--space: ) { + #space { color: green; } + } + @container not style(--space-no: ) { + #space-no { color: green; } + } @container style(--unset: unset) { #unset { color: green; } } @@ -238,6 +253,10 @@ <div id="initial-implicit"></div> <div id="initial-no"></div> <div id="initial-no-implicit"></div> + <div id="explicit-initial"></div> + <div id="explicit-initial-implicit"></div> + <div id="space"></div> + <div id="space-no"></div> <div id="inherit"></div> <div id="inherit-no"></div> <div id="unset"></div> @@ -262,6 +281,22 @@ }, "Style query matching value-less query against non-initial value"); test(() => { + assert_equals(getComputedStyle(document.querySelector("#explicit-initial")).color, green); + }, "Style query 'initial' matching (with explicit 'initial' value)"); + + test(() => { + assert_equals(getComputedStyle(document.querySelector("#explicit-initial-implicit")).color, green); + }, "Style query matching negated value-less query against initial value (with explicit 'initial' value)"); + + test(() => { + assert_equals(getComputedStyle(document.querySelector("#space")).color, green); + }, "Style query 'space' matching"); + + test(() => { + assert_equals(getComputedStyle(document.querySelector("#space-no")).color, green); + }, "Style query 'space' not matching"); + + test(() => { assert_equals(getComputedStyle(document.querySelector("#inherit")).color, green); }, "Style query 'inherit' matching"); diff --git a/testing/web-platform/tests/css/css-contain/container-queries/registered-color-style-queries.html b/testing/web-platform/tests/css/css-contain/container-queries/registered-color-style-queries.html new file mode 100644 index 0000000000..6e2bfb896b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/container-queries/registered-color-style-queries.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>CSS Container Queries Test: registered color syntax style queries</title> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#style-container"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/cq-testcommon.js"></script> +<style> + @property --reg-color { + syntax: "<color>"; + inherits: false; + initial-value: red; + } + + #light { color-scheme: light; } + #dark { color-scheme: dark; } + .container { --reg-color: light-dark(white, black); } + + @container style(--reg-color: white) { + #t1 { color: green; } + } + @container style(--reg-color: black) { + #t2 { color: green; } + } +</style> +<div id="light" class="container"> + <div id="t1"></div> +</div> +<div id="dark" class="container"> + <div id="t2"></div> +</div> +<script> + const green = "rgb(0, 128, 0)"; + + test(() => { + assert_equals(getComputedStyle(t1).color, green); + }, "Registered color with light color-scheme and light-dark()"); + + test(() => { + assert_equals(getComputedStyle(t2).color, green); + }, "Registered color with dark color-scheme and light-dark()"); +</script> diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-background-clip-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-background-clip-crash.html new file mode 100644 index 0000000000..1fa645f457 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-background-clip-crash.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> +<body> + <style> + body { + content-visibility: hidden; + background-clip: text; + position: absolute; + border-right-style: dashed; + border-top-style: ridge; + background-color: green; + } + </style> + <script> + var p1 = document.createElement('p'); + var p2 = document.createElement('p'); + document.body.appendChild(p1); + document.body.appendChild(p2); + p1.scroll(); + p2.remove(); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html index 360652c939..83340137ac 100644 --- a/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html @@ -39,7 +39,6 @@ fieldset, details { <div class="wrapper"> <canvas></canvas> <div class="inline-block">foo</div> - <button>foo</button> <select><option>foo</option></select> <select multiple style="height: 40px;"><option>foo</option></select> <textarea style="height: 40px;"></textarea> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html index da83204dce..c20efbbb39 100644 --- a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html @@ -7,7 +7,7 @@ div.fakeButton { display: inline-block; border: 5px solid green; padding: 0; - margin-bottom: 2px; + margin-bottom: -5px; color: transparent; width: 0; height: 0px; diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-002-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-002-ref.html new file mode 100644 index 0000000000..85b98ee4a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-002-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +button { + border: 5px solid green; + padding: 10px; + margin-bottom: 2px; + color: transparent; + width: 20px; + height: 20px; +} +</style> +<p>This test passes if it has the same output as the reference.</p> +<button></button> <button></button> |