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
|
<!doctype html>
<title>Container Relative Units: in @container prelude</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
.size { container-type: size; }
.inline { container-type: inline-size; }
.ancestor {
container-type: size;
width: 64px;
height: 160px;
}
.parent {
container-type: inline-size;
width: 32px;
height: 77px;
}
.container {
container-type: size;
width: 16px;
height: 16px;
}
/* Unit should resolve against .parent width. */
@container ((width = 16px) and (width = 50cqw)) { #child1 { --cqw:true; } }
/* Unit should resolve against .ancestor height. */
@container ((width = 16px) and (width = 10cqh)) { #child1 { --cqh:true; } }
/* Unit should resolve against .parent width. */
@container ((width = 16px) and (width = 50cqi)) { #child1 { --cqi:true; } }
/* Unit should resolve against .ancestor height. */
@container ((width = 16px) and (width = 10cqb)) { #child1 { --cqb:true; } }
/* Unit should resolve against biggest of w/h. */
@container ((width = 16px) and (width = 10cqmax)) { #child1 { --cqmax:true; } }
/* Unit should resolve against smallest of w/h. */
@container ((width = 16px) and (width = 50cqmin)) { #child1 { --cqmin:true; } }
/* Flipped writing mode: */
/* Non-logical units are the same as above */
@container ((width = 16px) and (width = 50cqw)) { #child2 { --cqw:true; } }
@container ((width = 16px) and (width = 10cqh)) { #child2 { --cqh:true; } }
@container ((width = 16px) and (width = 10cqmax)) { #child2 { --cqmax:true; } }
@container ((width = 16px) and (width = 50cqmin)) { #child2 { --cqmin:true; } }
/* Unit should resolve against .ancestor height. */
@container ((width = 16px) and (width = 50cqb)) { #child2 { --cqi:true; } }
/* Unit should resolve against .parent width. */
@container ((width = 16px) and (width = 10cqi)) { #child2 { --cqb:true; } }
</style>
<div class=ancestor>
<div class=parent>
<div class=container>
<div id=child1>Test1</div>
</div>
</div>
</div>
<div class=ancestor>
<div class=parent>
<div class=container style="writing-mode:vertical-rl;">
<div id=child2>Test1</div>
</div>
</div>
</div>
<script>
setup(() => assert_implements_container_queries());
let units = [
'cqw',
'cqh',
'cqi',
'cqb',
'cqmin',
'cqmax',
];
for (let unit of units) {
test(() => {
assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true');
}, `${unit} unit resolves against appropriate container`);
}
// Ensure that the writing mode of the subject element is not relevant for
// container-relative units in the @container prelude.
for (let unit of units) {
test((t) => {
t.add_cleanup(() => {
child1.style = '';
});
child1.style.writingMode = 'vertical-rl';
assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true');
}, `${unit} unit resolves against appropriate container (vertical writing-mode on subject)`);
}
for (let unit of units) {
test(() => {
assert_equals(getComputedStyle(child2).getPropertyValue(`--${unit}`), 'true');
}, `${unit} unit resolves against appropriate container (vertical writing-mode on container)`);
}
</script>
|
