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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>:has() invalidation with nesting where the selector is shared</title>
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
<style>
div, main { color: grey }
#outer1:has(.test) {
& #subject1_1 {
color: red;
}
& + #subject1_2 {
color: orangered;
}
}
#outer2:has(.test) {
& .ancestor {
& #subject2_1 {
color: green;
}
& + #subject2_2 {
color: lightgreen;
}
}
}
#outer3:is(:has(.test) .outer) {
& #subject3_1 {
color: blue;
}
& + #subject3_2 {
color: skyblue;
}
}
</style>
<main id="main">
<div>
<div id="outer1">
<div id="trigger1"></div>
<div id="subject1_1"></div>
</div>
<div id="subject1_2"></div>
</div>
<div id="outer2">
<div id="trigger2"></div>
<div class="ancestor">
<div id="subject2_1"></div>
</div>
<div id="subject2_2"></div>
</div>
<div id="trigger3">
<div id="outer3" class="outer">
<div id="subject3_1"></div>
</div>
<div id="subject3_2"></div>
</div>
</main>
<script>
const grey = 'rgb(128, 128, 128)';
const red = 'rgb(255, 0, 0)';
const orangered = 'rgb(255, 69, 0)';
const green = 'rgb(0, 128, 0)';
const lightgreen = 'rgb(144, 238, 144)';
const blue = 'rgb(0, 0, 255)';
const skyblue = 'rgb(135, 206, 235)';
const colors = {
red: {
descendant: red,
sibling: orangered,
},
green: {
descendant: green,
sibling: lightgreen,
},
blue: {
descendant: blue,
sibling: skyblue,
},
};
function testColor(testName, element, color) {
test(function() {
assert_equals(getComputedStyle(element).color, color);
}, testName);
}
function testClassChange(trigger, targetDescendant, targetSibling, expected)
{
trigger.classList.add('test');
testColor(`add .test to ${trigger.id} - check ${targetDescendant.id}`, targetDescendant, colors[expected].descendant);
testColor(`add .test to ${trigger.id} - check ${targetSibling.id}`, targetSibling, colors[expected].sibling);
trigger.classList.remove('test');
testColor(`remove .test from ${trigger.id} - check ${targetDescendant.id}`, targetDescendant, grey);
testColor(`remove .test from ${trigger.id} - check ${targetSibling.id}`, targetSibling, grey);
}
testClassChange(trigger1, subject1_1, subject1_2, 'red');
testClassChange(trigger2, subject2_1, subject2_2, 'green');
testClassChange(trigger3, subject3_1, subject3_2, 'blue');
</script>
|
