is.html (4361B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors Invalidation: :is()</title> 5 <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches"> 7 <meta name="assert" content="This tests that the :is() selector is effective"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 .b { 12 color: yellow; 13 } 14 /*Simple selector arguments */ 15 .a :is(.b, .c) { 16 color: red; 17 } 18 /*Compound selector arguments */ 19 .a :is(.c#d, .e) { 20 color: green; 21 } 22 /* Complex selector arguments */ 23 .a .g>.b { 24 color: black; 25 } 26 .a :is(.e+.f, .g>.b, .h) { 27 color: blue; 28 } 29 .g>.b { 30 color: black; 31 } 32 .a .h { 33 color: black; 34 } 35 /* Nested */ 36 .a+.c>.e { 37 color: black; 38 } 39 .c>.a+.e { 40 color: black; 41 } 42 .a+:is(.b+.f, :is(.c>.e, .g)) { 43 color: red; 44 } 45 .c>.e { 46 color: black; 47 } 48 /* Non-Subject Compound */ 49 .a:is(.b *) .c{ 50 color: blue; 51 } 52 </style> 53 </head> 54 <body> 55 <div id="a1"> 56 <div class="b" id="b1"> 57 Red 58 </div> 59 <div class="c" id="c1"> 60 Red 61 </div> 62 <div class="c" id="d"> 63 Green 64 </div> 65 <div class="e" id="e1"> 66 Green 67 </div> 68 <div class="f" id="f1"> 69 Blue 70 </div> 71 <div class="g"> 72 <div class="b" id="b2"> 73 Blue 74 <div class="b" id="b3"> 75 Red 76 </div> 77 </div> 78 </div> 79 <div class="h" id="h1"> 80 Blue 81 </div> 82 </div> 83 <div class="c" id="c2"> 84 <div id="a2"></div> 85 <div class="e" id="e2"> 86 Red 87 </div> 88 </div> 89 <div id=b4> 90 <div> 91 <div class=a> 92 <div class=c id="c3"> 93 Blue 94 </div> 95 </div> 96 </div> 97 </div> 98 <script> 99 document.body.offsetTop; 100 101 var black = "rgb(0, 0, 0)"; 102 var blue = "rgb(0, 0, 255)"; 103 var green = "rgb(0, 128, 0)"; 104 var red = "rgb(255, 0, 0)"; 105 var yellow = "rgb(255, 255, 0)"; 106 107 test(() => { 108 assert_equals(getComputedStyle(b1).color, yellow); 109 assert_equals(getComputedStyle(b2).color, black); 110 assert_equals(getComputedStyle(b3).color, yellow); 111 assert_equals(getComputedStyle(c1).color, black); 112 assert_equals(getComputedStyle(d).color, black); 113 assert_equals(getComputedStyle(e1).color, black); 114 assert_equals(getComputedStyle(e2).color, black); 115 assert_equals(getComputedStyle(f1).color, black); 116 assert_equals(getComputedStyle(h1).color, black); 117 }, "Preconditions."); 118 119 test(() => { 120 a1.className = "a"; 121 assert_equals(getComputedStyle(b1).color, red); 122 assert_equals(getComputedStyle(b3).color, red); 123 assert_equals(getComputedStyle(c1).color, red); 124 }, "Invalidate :is() for simple selector arguments."); 125 126 test(() => { 127 a1.className = "a"; 128 assert_equals(getComputedStyle(d).color, green); 129 }, "Invalidate :is() for compound selector arguments."); 130 131 test(() => { 132 a1.className = "a"; 133 assert_equals(getComputedStyle(b2).color, blue); 134 assert_equals(getComputedStyle(b3).color, red); 135 assert_equals(getComputedStyle(f1).color, blue); 136 }, "Invalidate :is() for complex selector arguments."); 137 138 test(() => { 139 a1.className = "a"; 140 assert_equals(getComputedStyle(e2).color, black); 141 a2.className = "a"; 142 assert_equals(getComputedStyle(e2).color, red); 143 }, "Invalidate nested :is()."); 144 145 test(() => { 146 a1.className = "a"; 147 assert_equals(getComputedStyle(b2).color, blue); 148 assert_equals(getComputedStyle(h1).color, blue); 149 }, "Test specificity of :is()."); 150 151 test(() => { 152 b4.className = "b"; 153 assert_equals(getComputedStyle(c3).color, blue); 154 b4.className = ""; 155 assert_equals(getComputedStyle(c3).color, red); 156 b4.className = "b"; 157 assert_equals(getComputedStyle(c3).color, blue); 158 }, "Invalidate :is() in non-subject compound"); 159 </script> 160 </body> 161 </html>