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
|
<!DOCTYPE html>
<title>CSS Values and Units Test: sibling-index() and sibling-count() changes in container queries</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-features">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@property --length {
syntax: "<length>";
initial-value: 0px;
inherits: false;
}
.container { container-type: inline-size; }
#c1 {
width: 100px;
--length: 100px;
}
#c2 {
width: 400px;
--length: 600px;
}
span {
--match-100: no;
--match-600: no;
}
@container (width = calc(100px * sibling-index())) {
span { background-color: green; }
}
@container (width = calc(200px * sibling-count())) {
span { color: lime; }
}
@container style(--length: calc(100px * sibling-index())) {
span { --match-100: yes; }
}
@container style(--length: calc(300px * sibling-count())) {
span { --match-600: yes; }
}
</style>
<div style="color:black">
<div id="rm1"></div>
<div id="rm2"></div>
<div id="c1" class="container">
<span id="t1"></span>
</div>
<div id="c2" class="container">
<span id="t2"></span>
</div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)");
assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
}, "sibling-index() in @container width query initially not matching");
test(() => {
assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)");
assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
}, "sibling-count() in @container width query initially not matching");
test(() => {
assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "no");
assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no");
}, "sibling-index() in @container style() query initially not matching");
test(() => {
assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no");
assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "no");
}, "sibling-count() in @container style() query initially not matching");
rm1.remove();
rm2.remove();
test(() => {
assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)");
assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
}, "sibling-index() in @container width query matching after removal");
test(() => {
assert_equals(getComputedStyle(t2).backgroundColor, "rgba(0, 0, 0, 0)");
assert_equals(getComputedStyle(t2).color, "rgb(0, 255, 0)");
}, "sibling-count() in @container width query matching after removal");
test(() => {
assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "yes");
assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no");
}, "sibling-index() in @container style() query matching after removal");
test(() => {
assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no");
assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "yes");
}, "sibling-count() in @container style() query matching after removal");
</script>
|
