<!DOCTYPE html>
<title>:is() inside :not()</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
<link rel="help" href="https://drafts.csswg.org/selectors/#negation">

<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(':not(:is(#a))', [b, c, d, e, f]);
  test_selector(':not(:where(#b))', [a, c, d, e, f]);
  test_selector(':not(:where(:root #c))', [a, b, d, e, f]);
  test_selector(':not(:is(#a, #b))', [c, d, e, f]);
  test_selector(':not(:is(#b div))', [a, b, c, d, f]);
  test_selector(':not(:is(#a div, div + div))', [a, e, f]);
  test_selector(':not(:is(span))', [a, b, c, d, e, f]);
  test_selector(':not(:is(div))', []);
  test_selector(':not(:is(*|div))', []);
  test_selector(':not(:is(*|*))', []);
  test_selector(':not(:is(*))', []);
  test_selector(':not(:is(svg|div))', [a, b, c, d, e, f]);
  test_selector(':not(:is(:not(div)))', [a, b, c, d, e, f]);
  test_selector(':not(:is(span, b, i))', [a, b, c, d, e, f]);
  test_selector(':not(:is(span, b, i, div))', []);
  test_selector(':not(:is(#b ~ div div, * + #c))', [a, b, d, e]);
  test_selector(':not(:is(div > :not(#e)))', [a, b, c, e]);
  test_selector(':not(:is(div > :not(:where(#e, #f))))', [a, b, c, e, f]);
</script>