diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
| commit | 8dd16259287f58f9273002717ec4d27e97127719 (patch) | |
| tree | 3863e62a53829a84037444beab3abd4ed9dfc7d0 /testing/web-platform/tests/css/css-contain/container-queries | |
| parent | Releasing progress-linux version 126.0.1-1~progress7.99u1. (diff) | |
| download | firefox-8dd16259287f58f9273002717ec4d27e97127719.tar.xz firefox-8dd16259287f58f9273002717ec4d27e97127719.zip | |
Merging upstream version 127.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/container-queries')
2 files changed, 76 insertions, 0 deletions
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> |