Visitar URL original
Bug 1509338 [wpt PR 14184] - [selectors] :defined CSS selector, a=tes… · mozilla-releng/staging-firefox@d78a445 · GitHub
Skip to content

Commit d78a445

Browse files
ericwilligersjgraham
ericwilligers
authored and
jgraham
committed
Bug 1509338 [wpt PR 14184] - [selectors] :defined CSS selector, a=testonly
Automatic update from web-platform-tests [selectors] :defined CSS selector The :defined pseudo-class must match any element that is defined. https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined The selector is being added to [CSS Selectors Level 4](https://drafts.csswg.org/selectors/) w3c/csswg-drafts#2258 (comment) -- Merge pull request #14184 from ewilligers/defined-selector [selectors] :defined CSS selector -- wpt-commits: 92a561a3121a1831214a7b9f47931904ae3df5e7, b107846c443a49e7743185bb84eb43ab628e22dc wpt-pr: 14184
1 parent 423a042 commit d78a445

1 file changed

Lines changed: 76 additions & 0 deletions

File tree

  • testing/web-platform/tests/css/selectors/invalidation

‎testing/web-platform/tests/css/selectors/invalidation/defined.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Selectors Invalidation: :defined</title>
5+
<link rel="help" href="https://drafts.csswg.org/selectors-4/">
6+
<meta name="assert" content="This tests that the :defined selector is effective">
7+
<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<style>
11+
#container {
12+
color: gray;
13+
}
14+
15+
#a1:defined {
16+
color: blue;
17+
}
18+
:defined + #b1 {
19+
color: green;
20+
}
21+
:defined > #c1 {
22+
color: red;
23+
}
24+
div + :defined + * #d1 {
25+
color: yellow;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<section id="container">
31+
<elucidate-late id="a1"></elucidate-late>
32+
<div id="b1"></div>
33+
<elucidate-late>
34+
<div id="c1"></div>
35+
</elucidate-late>
36+
<div>
37+
<div id="d1"></div>
38+
</div>
39+
</section>
40+
41+
<script>
42+
const gray = "rgb(128, 128, 128)";
43+
const blue = "rgb(0, 0, 255)";
44+
const green = "rgb(0, 128, 0)";
45+
const red = "rgb(255, 0, 0)";
46+
const yellow = "rgb(255, 255, 0)";
47+
48+
function assertGray(a, b, c, d) {
49+
assert_equals(getComputedStyle(a).color, gray);
50+
assert_equals(getComputedStyle(b).color, gray);
51+
assert_equals(getComputedStyle(c).color, gray);
52+
assert_equals(getComputedStyle(d).color, gray);
53+
}
54+
55+
function assertColorful(a, b, c, d) {
56+
assert_equals(getComputedStyle(a).color, blue);
57+
assert_equals(getComputedStyle(b).color, green);
58+
assert_equals(getComputedStyle(c).color, red);
59+
assert_equals(getComputedStyle(d).color, yellow);
60+
}
61+
62+
class ElucidateLate extends HTMLElement {
63+
constructor() {
64+
super();
65+
}
66+
}
67+
68+
test(() => {
69+
assertGray(a1, b1, c1, d1);
70+
customElements.define('elucidate-late', ElucidateLate);
71+
assertColorful(a1, b1, c1, d1);
72+
}, ":defined selector is effective");
73+
74+
</script>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)