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
126
127
128
129
130
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="timeout" content="long">
<meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" />
<link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class" />
<title>:state() css selector applies</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<custom-state id="myCE">I should be green</custom-state>
<p id="mySibling">I should be blue</p>
<p id="myHas">I should be blue</p>
<style>
custom-state {
color: #f00;
}
custom-state + p {
color: #f00;
}
custom-state:state(--green) {
color: #0f0;
}
custom-state:--green {
color: #0f0;
}
body:has(custom-state:state(--green)) p {
color: #0ff;
}
custom-state:state(--green) + p[id] {
color: #00f;
}
custom-state:--green + p {
color: #00f;
}
</style>
<script>
customElements.define('custom-state', class extends HTMLElement {
connectedCallback() {
this.elementInternals = this.attachInternals();
}
});
test(function() {
assert_false(myCE.elementInternals.states.has('--green'));
assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
}, "state selector has no influence when state is not applied");
test(function() {
assert_false(myCE.elementInternals.states.has('--green'));
assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
}, "state selector has no influence on sibling selectors when not applied");
test(function(t) {
myCE.elementInternals.states.add('--green');
t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
assert_true(myCE.elementInternals.states.has('--green'));
assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)');
}, "state selector has influence when state is applied");
test(function(t) {
myCE.elementInternals.states.add('--green');
t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
assert_true(myCE.elementInternals.states.has('--green'));
assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(0, 0, 255)');
}, "state selector influences siblings when state is applied");
test(function(t) {
myCE.elementInternals.states.add('--green');
t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
assert_true(myCE.elementInternals.states.has('--green'));
assert_equals(getComputedStyle(myHas).getPropertyValue('color'), 'rgb(0, 255, 255)');
}, "state selector influences has() when state is applied");
test(function(t) {
myCE.elementInternals.states.add('--foo');
t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') });
assert_false(myCE.elementInternals.states.has('--green'));
assert_true(myCE.elementInternals.states.has('--foo'));
assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
}, "state selector only applies on given ident");
test(function(t) {
myCE.elementInternals.states.add('--foo');
t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') });
assert_false(myCE.elementInternals.states.has('--green'));
assert_true(myCE.elementInternals.states.has('--foo'));
assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
}, "state selector only applies to siblings on given ident");
test(function(t) {
myCE.elementInternals.states.add('--foo');
t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') });
assert_false(myCE.elementInternals.states.has('--green'));
assert_true(myCE.elementInternals.states.has('--foo'));
assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
}, "state selector only applies to has() on given ident");
test(function(t) {
myCE.elementInternals.states.add('--green');
myCE.elementInternals.states.add('--green');
myCE.elementInternals.states.add('--green');
t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
assert_true(myCE.elementInternals.states.has('--green'));
assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)');
assert_true(myCE.elementInternals.states.delete('--green'));
assert_false(myCE.elementInternals.states.has('--green'));
assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
assert_false(myCE.elementInternals.states.delete('--green'));
}, "states added multiple times counts as one");
test(function(t) {
myCE.elementInternals.states.add('--green');
myCE.elementInternals.states.add('--foo');
t.add_cleanup(() => { myCE.elementInternals.states.clear() });
assert_true(myCE.elementInternals.states.has('--green'));
assert_true(myCE.elementInternals.states.has('--foo'));
assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)');
myCE.elementInternals.states.clear();
assert_false(myCE.elementInternals.states.has('--green'));
assert_false(myCE.elementInternals.states.has('--foo'));
assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
}, "style is invalided on clear()");
</script>
</body>
</html>
|
