not-complex.html (1896B)
1 <!DOCTYPE html> 2 <title>Matching behavior for :not with complex selector list</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/#negation"> 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(':not(#a)', [b, c, d, e, f]); 27 test_selector(':not(#a #d)', [a, b, c, e, f]); 28 test_selector(':not(#b div)', [a, b, c, d, f]); 29 test_selector(':not(div div)', [a, b, c]); 30 test_selector(':not(div + div)', [a, d, e, f]); 31 test_selector(':not(main > div)', [d, e, f]); 32 test_selector(':not(#a, #b)', [c, d, e, f]); 33 test_selector(':not(#f, main > div)', [d, e]); 34 test_selector(':not(div + div + div, div + div > div)', [a, b, d]); 35 test_selector(':not(div:nth-child(1))', [b, c]); 36 test_selector(':not(:not(div))', [a, b, c, d, e, f]); 37 test_selector(':not(:not(:not(div)))', []); 38 test_selector(':not(div, span)', []); 39 test_selector(':not(span, p)', [a, b, c, d, e, f]); 40 test_selector(':not(#unknown, .unknown)', [a, b, c, d, e, f]); 41 test_selector(':not(#unknown > div, span)', [a, b, c, d, e, f]); 42 test_selector(':not(#unknown ~ div, span)', [a, b, c, d, e, f]); 43 test_selector(':not(:hover div)', [a, b, c, d, e, f]); 44 test_selector(':not(:link div)', [a, b, c, d, e, f]); 45 test_selector(':not(:visited div)', [a, b, c, d, e, f]); 46 </script>