| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Selectors Level 4: query using :is()</title> |
| <link rel="help" href="https://drafts.csswg.org/selectors/#matches"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/query-testcommon.js"></script> |
| </head> |
| <body> |
| <div id="a1" class="a"> |
| <div class="b" id="b1"></div> |
| <div class="c" id="c1"></div> |
| <div class="c" id="d"></div> |
| <div class="e" id="e1"></div> |
| <div class="f" id="f1"></div> |
| <div class="g"> |
| <div class="b" id="b2"> |
| <div class="b" id="b3"></div> |
| </div> |
| </div> |
| <div class="h" id="h1"></div> |
| </div> |
| <div class="c" id="c2"> |
| <div id="a2" class="a"></div> |
| <div class="e" id="e2"></div> |
| </div> |
| <script> |
| 'use strict'; |
| |
| // Simple selector arguments are supported by :is |
| test_query_selector(document, '.a :is(.b, .c)', |
| ['b1', 'c1', 'd', 'b2', 'b3']); |
| |
| // Compound selector arguments are supported by :is |
| test_query_selector(document, '.a :is(.c#d, .e)', |
| ['d', 'e1']); |
| |
| // Complex selector arguments are supported by :is |
| test_query_selector(document, '.a :is(.e+.f, .g>.b, .h)', |
| ['f1', 'b2', 'h1']); |
| |
| // Nested selector arguments are supported by :is |
| test_query_selector(document, '.a+:is(.b+.f, :is(.c>.e, .g))', |
| 'e2'); |
| |
| // Nested :where selector arguments are supported by :is |
| test_query_selector(document, '.a :is(:where(:where(.b ~ .c)))', |
| ['c1', 'd']); |
| |
| // Nested :not selector arguments are supported by :is |
| test_query_selector(document, '.b + :is(.c + .c + .c, .b + .c:not(span), .b + .c + .e) ~ .h', |
| ['h1']); |
| </script> |
| </body> |
| </html> |
