is-where-basic.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/selectors/is-where-basic.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Basic :is/:where matching behavior</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">

<main id=main>

  <div id=a><div id=d></div></div>

  <div id=b><div id=e></div></div>

  <div id=c><div id=f></div></div>

</main>

<script>

  function formatElements(elements) {

    return elements.map(e => e.id).sort().join();

  // Test that |selector| returns the given elements in #main.

  function test_selector(selector, expected) {

    test(function() {

      let actual = Array.from(main.querySelectorAll(selector));

      assert_equals(formatElements(actual), formatElements(expected));

    }, `${selector} matches expected elements`);

  test_selector(':is()', []);

  test_selector(':is(#a)', [a]);

  test_selector(':is(#a, #f)', [a, f]);

  test_selector(':is(#a, #c) :where(#a #d, #c #f)', [d, f]);

  test_selector('#c > :is(#c > #f)', [f]);

  test_selector('#c > :is(#b > #f)', []);

  test_selector('#a div:is(#d)', [d]);

  test_selector(':is(div) > div', [d, e, f]);

  test_selector(':is(*) > div', [a, b, c, d, e, f]);

  test_selector(':is(*) div', [a, b, c, d, e, f]);

  test_selector('div > :where(#e, #f)', [e, f]);

  test_selector('div > :where(*)', [d, e, f]);

  test_selector(':is(*) > :where(*)', [a, b, c, d, e, f]);

  test_selector(':is(#a + #b) + :is(#c)', [c]);

  test_selector(':is(#a, #b) + div', [b, c]);

</script>