not-pseudo-containing-sibling-relationship-in-has.html (1747B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Selectors Test: :has(:not()) 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(:not(.item, :nth-child(3))) { background-color: red; } 10 #target2:has(:not(.item, :nth-last-child(3))) { background-color: red; } 11 </style> 12 <div id="test-container"> 13 <div id="target1"> 14 <div class="item"></div> 15 <div id="item1">This text should have a green background</div> 16 </div> 17 <div id="target2"> 18 <div id="item2">This text should have a green background</div> 19 <div class="item"></div> 20 </div> 21 </div> 22 <script> 23 test(() => { 24 assert_equals(getComputedStyle(target1).backgroundColor, "rgb(255, 0, 0)"); 25 assert_equals(getComputedStyle(target2).backgroundColor, "rgb(255, 0, 0)"); 26 }, "Initially red"); 27 28 function insertDivItemBefore(item) { 29 let div = document.createElement("div"); 30 div.classList.add("item"); 31 item.parentElement.insertBefore(div, item); 32 } 33 34 function insertDivItemAfter(item) { 35 let div = document.createElement("div"); 36 div.classList.add("item"); 37 item.parentElement.append(div, item.nextSibling); 38 } 39 40 test(() => { 41 insertDivItemBefore(item1); 42 assert_equals(getComputedStyle(target1).backgroundColor, "rgb(0, 128, 0)"); 43 }, ":nth-child() enclosed by :not() matching after insertion"); 44 45 test(() => { 46 insertDivItemAfter(item2); 47 assert_equals(getComputedStyle(target2).backgroundColor, "rgb(0, 128, 0)"); 48 }, ":nth-last-child() enclosed by :not() matching after insertion"); 49 </script>