has-specificity.html (1715B)
1 <!DOCTYPE html> 2 <title>Specificity for complex :has selectors</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#specificity-rules"> 6 <style> 7 main :has(#foo) { --t0:PASS; } 8 main :has(.foo) { --t0:FAIL; } 9 10 main :has(span#foo) { --t1:PASS; } 11 main :has(#foo) { --t1:FAIL; } 12 13 main :has(.bar, #foo) { --t2:FAIL; } 14 main :has(#foo, .bar) { --t2:PASS; } 15 16 main :has(.bar, #foo) { --t3:PASS; } 17 main :has(.foo, .bar) { --t3:FAIL; } 18 19 main :has(span + span) { --t4:PASS; } 20 main :has(span) { --t4:FAIL; } 21 22 main :has(span, li, #foo) { --t5:PASS; } 23 main :has(span, li, p) { --t5:FAIL; } 24 25 main div:has(.foo) { --t6:FAIL; } 26 main div.baz { --t6:PASS; } 27 28 main div.baz { --t7:FAIL; } 29 main div:has(.foo) { --t7:PASS; } 30 </style> 31 <main id=main> 32 <div id=div class=baz><p><span id=foo class=foo></span><span class=bar></span><li></li></p></div> 33 </main> 34 <script> 35 function test_value(name, description) { 36 test(function() { 37 let actual = getComputedStyle(div).getPropertyValue(name); 38 assert_equals(actual, 'PASS'); 39 }, description); 40 } 41 42 test_value('--t0', ':has(#foo) wins over :has(.foo)'); 43 test_value('--t1', ':has(span#foo) wins over :has(#foo)'); 44 test_value('--t2', ':has(.bar, #foo) has same specificity as :has(#foo, .bar)'); 45 test_value('--t3', ':has(.bar, #foo) wins over :has(.foo, .bar)'); 46 test_value('--t4', ':has(span + span) wins over :has(span)'); 47 test_value('--t5', ':has(span, li, p) wins over :has(span, lo, p)'); 48 test_value('--t6', 'latter .baz wins over :has(.foo)'); 49 test_value('--t7', 'latter :has(.foo) wins over .baz'); 50 </script>