Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/nested-query-containers.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Nested query containers affecting each other</title>
<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_size_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>