Skip to content

Commit 1b79903

Browse files
lilleschromium-wpt-export-bot
lilles
authored and
chromium-wpt-export-bot
committed
Invalidate siblings for :has(:nth-child()) changes
Invalidation for :has() containing child indexed selectors is similar to indirect adjacent selectors in that we need to traverse siblings of elements marked as affecting :has() targets. Bug: 1445876 Change-Id: I50a1b252336a9eb30ec37cbe36d2016704190e7e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4561955 Commit-Queue: Rune Lillesveen <[email protected]> Reviewed-by: Byungwoo Lee <[email protected]> Cr-Commit-Position: refs/heads/main@{#1148962}
1 parent 465ea96 commit 1b79903

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed

‎css/selectors/invalidation/has-with-nth-child.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Selectors Test: :has(:nth-child()) invalidation for sibling change</title>
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
7+
<style>
8+
#test-container > div { background-color: green; }
9+
#target1:has(.item:nth-child(3)) { background-color: red; }
10+
#target2:has(.item:nth-last-child(3)) { background-color: red; }
11+
#target3:has(.item:nth-child(3) > .child) { background-color: red; }
12+
#target4:has(.item:nth-last-child(3) > .child) { background-color: red; }
13+
</style>
14+
<div id="test-container">
15+
<div id="target1">
16+
<div class="item" id="item1">FAIL if you see this text</div>
17+
<div class="item"></div>
18+
<div class="item">This text should have a green background</div>
19+
</div>
20+
<div id="target2">
21+
<div class="item">This text should have a green background</div>
22+
<div class="item"></div>
23+
<div class="item" id="item2">FAIL if you see this text</div>
24+
</div>
25+
<div id="target3">
26+
<div class="item" id="item3">FAIL if you see this text</div>
27+
<div class="item"></div>
28+
<div class="item">
29+
<span class="child">This text should have a green background<span>
30+
</div>
31+
</div>
32+
<div id="target4">
33+
<div class="item">
34+
<span class="child">This text should have a green background<span>
35+
</div>
36+
<div class="item"></div>
37+
<div class="item" id="item4">FAIL if you see this text</div>
38+
</div>
39+
</div>
40+
<script>
41+
test(() => {
42+
assert_equals(getComputedStyle(target1).backgroundColor, "rgb(255, 0, 0)");
43+
assert_equals(getComputedStyle(target2).backgroundColor, "rgb(255, 0, 0)");
44+
assert_equals(getComputedStyle(target3).backgroundColor, "rgb(255, 0, 0)");
45+
assert_equals(getComputedStyle(target4).backgroundColor, "rgb(255, 0, 0)");
46+
}, "Initially red");
47+
48+
test(() => {
49+
item1.remove();
50+
assert_equals(getComputedStyle(target1).backgroundColor, "rgb(0, 128, 0)");
51+
}, ":nth-child() no longer matching after removal");
52+
53+
test(() => {
54+
item2.remove();
55+
assert_equals(getComputedStyle(target2).backgroundColor, "rgb(0, 128, 0)");
56+
}, ":nth-last-child() no longer matching after removal");
57+
58+
test(() => {
59+
item3.remove();
60+
assert_equals(getComputedStyle(target3).backgroundColor, "rgb(0, 128, 0)");
61+
}, ":nth-child() in non-subject no longer matching after removal");
62+
63+
test(() => {
64+
item4.remove();
65+
assert_equals(getComputedStyle(target4).backgroundColor, "rgb(0, 128, 0)");
66+
}, ":nth-last-child() in non-subject no longer matching after removal");
67+
</script>

0 commit comments

Comments
 (0)