query-where.html (1806B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Selectors Level 4: query using :where()</title> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#zero-matches"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/query-testcommon.js"></script> 10 </head> 11 <body> 12 <div id="a1" class="a"> 13 <div class="b" id="b1"></div> 14 <div class="c" id="c1"></div> 15 <div class="c" id="d"></div> 16 <div class="e" id="e1"></div> 17 <div class="f" id="f1"></div> 18 <div class="g"> 19 <div class="b" id="b2"> 20 <div class="b" id="b3"></div> 21 </div> 22 </div> 23 <div class="h" id="h1"></div> 24 </div> 25 <div class="c" id="c2"> 26 <div id="a2" class="a"></div> 27 <div class="e" id="e2"></div> 28 </div> 29 <script> 30 'use strict'; 31 32 // Simple selector arguments are supported by :where 33 test_query_selector(document, '.a :where(.b, .c)', 34 ['b1', 'c1', 'd', 'b2', 'b3']); 35 36 // Compound selector arguments are supported by :where 37 test_query_selector(document, '.a :where(.c#d, .e)', 38 ['d', 'e1']); 39 40 // Complex selector arguments are supported by :where 41 test_query_selector(document, '.a :where(.e+.f, .g>.b, .h)', 42 ['f1', 'b2', 'h1']); 43 44 // Nested selector arguments are supported by :where 45 test_query_selector(document, '.a+:where(.b+.f, :where(.c>.e, .g))', 46 ['e2']); 47 48 // Nested :is selector arguments are supported by :where 49 test_query_selector(document, '.a :where(:is(:is(.b ~ .c)))', 50 ['c1', 'd']); 51 52 // Nested :not selector arguments are supported by :where 53 test_query_selector(document, '.b + :where(.c + .c + .c, .b + .c:not(span), .b + .c + .e) ~ .h', 54 ['h1']); 55 </script> 56 </body> 57 </html>