where.html (2872B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors Invalidation: :where()</title> 5 <link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#zero-matches"> 7 <meta name="assert" content="This tests that the :where() selector is effective"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 * { 12 color: black; 13 } 14 .b { 15 color: yellow; 16 } 17 /*Simple selector arguments */ 18 :where(.b, .c) { 19 color: red; 20 } 21 /*Compound selector arguments */ 22 .a~:where(.c#d, .e) { 23 color: green; 24 } 25 /* Complex selector arguments */ 26 .h { 27 color: red; 28 } 29 :where(.a~.h, .a~.h+.f) { 30 color: yellow; 31 } 32 /* Nested */ 33 :where(.a>:where(.g+.h, .b)~.i) { 34 color: blue; 35 } 36 :where(:is(.a~.h)) { 37 color: yellow; 38 } 39 </style> 40 </head> 41 <body> 42 <div id="a1"> 43 <div class="g"> 44 </div> 45 <div class="h"> 46 </div> 47 <div class="i" id="i1"> 48 Blue 49 </div> 50 </div> 51 <div class="b" id="b1"> 52 Yellow 53 </div> 54 <div class="c" id="c1"> 55 Red 56 </div> 57 <div class="c" id="d"> 58 Green 59 </div> 60 <div class="h" id="h1"> 61 Red 62 </div> 63 <div class="f" id="f1"> 64 Yellow 65 </div> 66 <script> 67 document.body.offsetTop; 68 69 var black = "rgb(0, 0, 0)"; 70 var green = "rgb(0, 128, 0)"; 71 var red = "rgb(255, 0, 0)"; 72 var yellow = "rgb(255, 255, 0)"; 73 var blue = "rgb(0, 0, 255)"; 74 75 test(() => { 76 assert_equals(getComputedStyle(b1).color, yellow); 77 assert_equals(getComputedStyle(c1).color, red); 78 assert_equals(getComputedStyle(d).color, red); 79 assert_equals(getComputedStyle(h1).color, red); 80 assert_equals(getComputedStyle(f1).color, black); 81 assert_equals(getComputedStyle(i1).color, black); 82 }, "Preconditions."); 83 84 test(() => { 85 a1.className = "a"; 86 assert_equals(getComputedStyle(b1).color, yellow); 87 assert_equals(getComputedStyle(c1).color, red); 88 }, "Invalidate :where() for simple selector arguments."); 89 90 test(() => { 91 a1.className = "a"; 92 assert_equals(getComputedStyle(d).color, green); 93 }, "Invalidate :where() for compound selector arguments."); 94 95 test(() => { 96 a1.className = "a"; 97 assert_equals(getComputedStyle(h1).color, red); 98 assert_equals(getComputedStyle(f1).color, yellow); 99 }, "Invalidate :where() for complex selector arguments."); 100 101 test(() => { 102 a1.className = "a"; 103 assert_equals(getComputedStyle(i1).color, blue); 104 }, "Invalidate nested :where()."); 105 106 </script> 107 </body> 108 </html>