is-where-basic.html (1493B)
1 <!DOCTYPE html> 2 <title>Basic :is/:where matching behavior</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-4/#matches"> 6 7 <main id=main> 8 <div id=a><div id=d></div></div> 9 <div id=b><div id=e></div></div> 10 <div id=c><div id=f></div></div> 11 </main> 12 13 <script> 14 function formatElements(elements) { 15 return elements.map(e => e.id).sort().join(); 16 } 17 18 // Test that |selector| returns the given elements in #main. 19 function test_selector(selector, expected) { 20 test(function() { 21 let actual = Array.from(main.querySelectorAll(selector)); 22 assert_equals(formatElements(actual), formatElements(expected)); 23 }, `${selector} matches expected elements`); 24 } 25 26 test_selector(':is()', []); 27 test_selector(':is(#a)', [a]); 28 test_selector(':is(#a, #f)', [a, f]); 29 test_selector(':is(#a, #c) :where(#a #d, #c #f)', [d, f]); 30 test_selector('#c > :is(#c > #f)', [f]); 31 test_selector('#c > :is(#b > #f)', []); 32 test_selector('#a div:is(#d)', [d]); 33 test_selector(':is(div) > div', [d, e, f]); 34 test_selector(':is(*) > div', [a, b, c, d, e, f]); 35 test_selector(':is(*) div', [a, b, c, d, e, f]); 36 test_selector('div > :where(#e, #f)', [e, f]); 37 test_selector('div > :where(*)', [d, e, f]); 38 test_selector(':is(*) > :where(*)', [a, b, c, d, e, f]); 39 test_selector(':is(#a + #b) + :is(#c)', [c]); 40 test_selector(':is(#a, #b) + div', [b, c]); 41 </script>