is-nested.html (1907B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors: :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 when nested"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 /* Testing that highest specificity is chosen for class outside of :is() */ 12 .a+.b+.c>.e+.d { 13 color: black; 14 font-size: 10px; 15 width: 10px; 16 } 17 .e:is(.b+.f, .e:is(*, .c>.e, .g, *))+.d { 18 color: red; 19 font-size: 20px; 20 } 21 .a+.b+.c>.e+.d { 22 color: yellow; 23 } 24 /* Testing specificty of a class within :is() */ 25 .a+.c>.e { 26 color: black; 27 } 28 .e:is(.b+.f, :is(.c>.e, .g)) { 29 color: red; 30 } 31 .c>.e { 32 color: black; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="a"> 38 </div> 39 <div class="b" id="b2"> 40 </div> 41 <div class="c" id="c2"> 42 <div class="e"> 43 </div> 44 <div class="d" id="d1"> 45 Yellow 46 </div> 47 </div> 48 <div class="a"> 49 </div> 50 <div class="c" id="c2"> 51 <div class="e" id="e1"> 52 Red 53 </div> 54 </div> 55 <script> 56 57 var red = "rgb(255, 0, 0)"; 58 var yellow = "rgb(255, 255, 0)"; 59 60 test(() => { 61 assert_equals(getComputedStyle(d1).color, yellow); 62 assert_equals(getComputedStyle(d1).fontSize, "20px"); 63 assert_equals(getComputedStyle(d1).width, "10px"); 64 }, "Test nested :is() chooses highest specificity for class outside :is()."); 65 66 test(() => { 67 assert_equals(getComputedStyle(e1).color, red); 68 }, "Test nested :is() specificity for class within arguments."); 69 70 </script> 71 </body> 72 </html>