ParentNode-querySelectorAll-not-descendant.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /dom/nodes/ParentNode-querySelectorAll-not-descendant.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>querySelectorAll with :not() pseudo-class and descendant selector</title>

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

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

<!-- Regression test for https://github.com/jsdom/jsdom/issues/3340 -->

<div id="container">

  <p id="p1">

    <table>

      <tbody>

        <tr>

          <td>

            <p id="p2"></p>

          </td>

        </tr>

      </tbody>

    </table>

  </p>

  <p id="p3"></p>

</div>

<script>

"use strict";

test(() => {

  const container = document.getElementById("container");

  const result = container.querySelectorAll("p:not(table p)");

  // Browsers parse the invalid HTML `<p><table>...</table></p><p>`

  // such that the first <p> is closed before the <table>,

  // and the closing </p> tag creates a *new* empty <p> element after the table.

  // Thus, the query should match p#p1, the empty p after the table, and p#p3.

  const resultIDs = Array.from(result, el => el.id);

  assert_array_equals(resultIDs, ["p1", "", "p3"]);

});

</script>