is-specificity.html (1259B)
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 chooses the correct specificity"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 .b.c + .d + .q.r + .s + #target { 12 font-size: 10px; 13 height: 10px; 14 width: 10px; 15 } 16 :is(.a, .b.c + .d, .q) + :is(* + .p, .q.r + .s, * + .t) + #target { 17 height: 20px; 18 width: 20px; 19 } 20 .b.c + .d + .q.r + .s + #target { 21 width: 30px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="b c"></div> 27 <div class="a d e"></div> 28 <div class="q r"></div> 29 <div class="p s t"></div> 30 <div id="target"></div> 31 <script> 32 33 test(() => { 34 assert_equals(getComputedStyle(target).width, "30px"); 35 assert_equals(getComputedStyle(target).height, "20px"); 36 assert_equals(getComputedStyle(target).fontSize, "10px"); 37 }, "Test :is() uses highest possible specificity"); 38 39 </script> 40 </body> 41 </html>