diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html b/testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html new file mode 100644 index 0000000000..83cc3c2fec --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<title>Nested query containers affecting each other</title> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/cq-testcommon.js"></script> +<style> + body > section { + contain: strict; + width: 500px; + } +</style> +<body> +<script> +promise_setup(() => { + assert_implements_container_queries(); + return new Promise(resolve => { + addEventListener("load", () => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.body.className = "run"; + resolve(); + }); + }); + }, {once: true}); + }); +}); + +function booleanTuples(n) { + const tuple = new Array(n); + function* recursion(i) { + if (i == n) { + yield tuple.slice(); + return; + } + tuple[i] = false; + yield* recursion(i + 1); + tuple[i] = true; + yield* recursion(i + 1); + } + return recursion(0); +} + +// The following display values evaluate container queries to unknown. +const testCases = [ + { + display: "inline", + expected: { + width: depth => depth % 2 ? 0 : 500 - depth, + height: depth => 0, + }, + }, + { + display: "contents", + expected: { + width: depth => depth % 2 ? 0 : 500 - depth, + height: depth => 0, + }, + }, + { + display: "table-cell", + expected: { + width: depth => depth % 2 ? 2 : 0, + height: depth => depth % 2 ? 2 : 0, + }, + }, + { + display: "table", + expected: { + width: depth => depth % 2 ? 4 : 0, + height: depth => depth % 2 ? 4 : 0, + }, + }, +]; + +let testNum = 1; +for (let testCase of testCases) { + for (let tuple of booleanTuples(3)) { + const section = document.createElement("section"); + const id = "test" + testNum; + section.id = id; + const style = document.createElement("style"); + style.textContent = ` + :where(body${tuple[0] ? ".run" : ""}) > #${id} { + container-type: size; + container-name: name; + } + :where(body${tuple[1] ? ".run" : ""}) > #${id} div { + container-type: size; + container-name: name; + border: solid; + border-width: 1px; + } + @container name (width >= 0) { + :where(body${tuple[2] ? ".run" : ""}) > #${id} div { + display: ${testCase.display}; + border-style: dotted; + } + } + `; + section.appendChild(style); + section.insertAdjacentHTML( + "beforeend", + "<div><div><div><div><div><div></div></div></div></div></div></div>" + ); + document.body.appendChild(section); + promise_test(async function() { + let div = section.querySelector("div"); + let depth = 1; + while (div) { + const cs = getComputedStyle(div); + assert_equals(cs.display, depth % 2 ? testCase.display : "block"); + assert_equals(cs.borderStyle, depth % 2 ? "dotted" : "solid", "borderStyle"); + assert_equals(div.clientWidth, testCase.expected.width(depth), "clientWidth"); + assert_equals(div.clientHeight, testCase.expected.height(depth), "clientHeight"); + div = div.firstElementChild; + depth += 1; + } + }, id + " - " + testCase.display + " - 0b" + tuple.map(Number).join("")); + testNum += 1; + } +} +</script> +</body> |