not-002.html (3285B)
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 .b { 10 color: yellow; 11 } 12 /*Simple selector arguments */ 13 .a :not(:not(.b, .c)) { 14 color: red; 15 } 16 /*Compound selector arguments */ 17 .a :not(:not(.c#d, .e)) { 18 color: green; 19 } 20 /* Complex selector arguments */ 21 .a .g>.b { 22 color: black; 23 } 24 .a :not(:not(.e+.f, .g>.b, .h)) { 25 color: blue; 26 } 27 .g>.b { 28 color: black; 29 } 30 .a .h { 31 color: black; 32 } 33 /* Nested */ 34 .a+.c>.e { 35 color: black; 36 } 37 .c>.a+.e { 38 color: black; 39 } 40 .a+:not(:not(.b+.f, :is(.c>.e, .g))) { 41 color: red; 42 } 43 .c>.e { 44 color: black; 45 } 46 </style> 47 <div id="a1"> 48 <div class="b" id="b1"> 49 Red 50 </div> 51 <div class="c" id="c1"> 52 Red 53 </div> 54 <div class="c" id="d"> 55 Green 56 </div> 57 <div class="e" id="e1"> 58 Green 59 </div> 60 <div class="f" id="f1"> 61 Blue 62 </div> 63 <div class="g"> 64 <div class="b" id="b2"> 65 Blue 66 <div class="b" id="b3"> 67 Red 68 </div> 69 </div> 70 </div> 71 <div class="h" id="h1"> 72 Blue 73 </div> 74 </div> 75 <div class="c" id="c2"> 76 <div id="a2"></div> 77 <div class="e" id="e2"> 78 Red 79 </div> 80 </div> 81 <script> 82 document.body.offsetTop; 83 84 var black = "rgb(0, 0, 0)"; 85 var blue = "rgb(0, 0, 255)"; 86 var green = "rgb(0, 128, 0)"; 87 var red = "rgb(255, 0, 0)"; 88 var yellow = "rgb(255, 255, 0)"; 89 90 test(() => { 91 assert_equals(getComputedStyle(b1).color, yellow); 92 assert_equals(getComputedStyle(b2).color, black); 93 assert_equals(getComputedStyle(b3).color, yellow); 94 assert_equals(getComputedStyle(c1).color, black); 95 assert_equals(getComputedStyle(d).color, black); 96 assert_equals(getComputedStyle(e1).color, black); 97 assert_equals(getComputedStyle(e2).color, black); 98 assert_equals(getComputedStyle(f1).color, black); 99 assert_equals(getComputedStyle(h1).color, black); 100 }, "Preconditions."); 101 102 test(() => { 103 a1.className = "a"; 104 assert_equals(getComputedStyle(b1).color, red); 105 assert_equals(getComputedStyle(b3).color, red); 106 assert_equals(getComputedStyle(c1).color, red); 107 }, "Invalidate :not() for simple selector arguments."); 108 109 test(() => { 110 a1.className = "a"; 111 assert_equals(getComputedStyle(d).color, green); 112 }, "Invalidate :not() for compound selector arguments."); 113 114 test(() => { 115 a1.className = "a"; 116 assert_equals(getComputedStyle(b2).color, blue); 117 assert_equals(getComputedStyle(b3).color, red); 118 assert_equals(getComputedStyle(f1).color, blue); 119 }, "Invalidate :not() for complex selector arguments."); 120 121 test(() => { 122 a1.className = "a"; 123 assert_equals(getComputedStyle(e2).color, black); 124 a2.className = "a"; 125 assert_equals(getComputedStyle(e2).color, red); 126 }, "Invalidate nested :is() inside :not()."); 127 128 test(() => { 129 a1.className = "a"; 130 assert_equals(getComputedStyle(b2).color, blue); 131 assert_equals(getComputedStyle(h1).color, blue); 132 }, "Test specificity of :not()."); 133 </script>