test_bug1799354.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>Test bug 1799354</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>

  <script>

    add_task(t => {

      let root = document.createElement("div");

      root.innerHTML = "<div id='a'>text<div id='b'>text2</div></div>";

      const a = root.firstChild;

      const b = a.lastChild;

      const txt = b.previousSibling;

      const txt2 = b.firstChild;

      let events = [];

      function listener(event) {

        events.push(event);

      root.addEventListener("DOMNodeRemoved", listener);

      // Test 1, replace current children with an element.

      b.replaceChildren(txt);

      is(events.length, 2, "Should have got two DOMNodeRemoved events");

      // replaceChildren removes first all the child nodes of b and then when

      // a new child is added to it, that child is removed from its original parent.

      // https://dom.spec.whatwg.org/commit-snapshots/6b3f055f3891a63423bf235d46f38ffdb298c2e7/#concept-node-replace-all

      is(events[0].target, txt2);

      is(events[0].relatedNode, b);

      is(events[1].target, txt);

      is(events[1].relatedNode, a);

      // Test 2, replace current children with a document fragment.

      events = [];

      const df = document.createDocumentFragment();

      const dfChild1 = document.createElement("div");

      df.appendChild(dfChild1);

      const dfChild2 = document.createElement("div");

      df.appendChild(dfChild2);

      df.addEventListener("DOMNodeRemoved", listener);

      b.replaceChildren(df);

      is(events.length, 3, "Should have got three DOMNodeRemoved events");

      is(events[0].target, txt);

      is(events[0].relatedNode, b);

      is(events[1].target, dfChild1);

      is(events[1].relatedNode, df);

      is(events[2].target, dfChild2);

      is(events[2].relatedNode, df);

      // Test 3, replace current children with multiple elements.

      events = [];

      const rootChild1 = document.createElement("div");

      root.appendChild(rootChild1);

      const rootChild2 = document.createElement("div");

      root.appendChild(rootChild2);

      // Note, if replaceChildren gets more than one parameter, it moves the nodes

      // to a new internal document fragment and then removes the current children.

      b.replaceChildren(rootChild1, rootChild2);

      is(events.length, 4, "Should have got four DOMNodeRemoved events");

      is(events[0].target, rootChild1);

      is(events[0].relatedNode, root);

      is(events[1].target, rootChild2);

      is(events[1].relatedNode, root);

      is(events[2].target, dfChild1);

      is(events[2].relatedNode, b);

      is(events[3].target, dfChild2);

      is(events[3].relatedNode, b);

});

  </script>

</head>

<body>

<p id="display"></p>

<div id="content" style="display: none"></div>

<pre id="test"></pre>

</body>

</html>