1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<!DOCTYPE html>
<title>Nested query containers affecting each other</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#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_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>
|
