has-with-nth-child.html (2631B)
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>