not-001.html (1365B)
1 <!DOCTYPE html> 2 <title>CSS Selectors Invalidation: complex :not()</title> 3 <link rel="help" href="https://drafts.csswg.org/selectors-4/#negation"> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 * { 10 color: yellow; 11 } 12 :not(.b ~ *) { 13 color: green; 14 } 15 </style> 16 <div id="b"> 17 </div> 18 <div class="c"> 19 </div> 20 <div class="d"> 21 </div> 22 <script> 23 var black = "rgb(0, 0, 0)"; 24 var blue = "rgb(0, 0, 255)"; 25 var green = "rgb(0, 128, 0)"; 26 var red = "rgb(255, 0, 0)"; 27 var yellow = "rgb(255, 255, 0)"; 28 29 test(() => { 30 assert_equals(getComputedStyle(document.querySelector("#b")).color, green); 31 assert_equals(getComputedStyle(document.querySelector(".c")).color, green); 32 assert_equals(getComputedStyle(document.querySelector(".d")).color, green); 33 }, "precondition"); 34 35 test(() => { 36 document.getElementById("b").className = "b"; 37 assert_equals(getComputedStyle(document.querySelector("#b")).color, green); 38 assert_equals(getComputedStyle(document.querySelector(".c")).color, yellow); 39 assert_equals(getComputedStyle(document.querySelector(".d")).color, yellow); 40 }, "Invalidation of sibling combinators in :not()"); 41 </script>