is-where-not.html (1839B)
1 <!DOCTYPE html> 2 <title>:is() inside :not()</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 <link rel="help" href="https://drafts.csswg.org/selectors/#negation"> 7 8 <main id=main> 9 <div id=a><div id=d></div></div> 10 <div id=b><div id=e></div></div> 11 <div id=c><div id=f></div></div> 12 </main> 13 14 <script> 15 function formatElements(elements) { 16 return elements.map(e => e.id).sort().join(); 17 } 18 19 // Test that |selector| returns the given elements in #main. 20 function test_selector(selector, expected) { 21 test(function() { 22 let actual = Array.from(main.querySelectorAll(selector)); 23 assert_equals(formatElements(actual), formatElements(expected)); 24 }, `${selector} matches expected elements`); 25 } 26 27 test_selector(':not(:is(#a))', [b, c, d, e, f]); 28 test_selector(':not(:where(#b))', [a, c, d, e, f]); 29 test_selector(':not(:where(:root #c))', [a, b, d, e, f]); 30 test_selector(':not(:is(#a, #b))', [c, d, e, f]); 31 test_selector(':not(:is(#b div))', [a, b, c, d, f]); 32 test_selector(':not(:is(#a div, div + div))', [a, e, f]); 33 test_selector(':not(:is(span))', [a, b, c, d, e, f]); 34 test_selector(':not(:is(div))', []); 35 test_selector(':not(:is(*|div))', []); 36 test_selector(':not(:is(*|*))', []); 37 test_selector(':not(:is(*))', []); 38 test_selector(':not(:is(svg|div))', [a, b, c, d, e, f]); 39 test_selector(':not(:is(:not(div)))', [a, b, c, d, e, f]); 40 test_selector(':not(:is(span, b, i))', [a, b, c, d, e, f]); 41 test_selector(':not(:is(span, b, i, div))', []); 42 test_selector(':not(:is(#b ~ div div, * + #c))', [a, b, d, e]); 43 test_selector(':not(:is(div > :not(#e)))', [a, b, c, e]); 44 test_selector(':not(:is(div > :not(:where(#e, #f))))', [a, b, c, e, f]); 45 </script>