1 files changed, 77 insertions, 0 deletions
diff --git a/dom/base/test/test_bug1799354.html b/dom/base/test/test_bug1799354.html
new file mode 100644
index 0000000000..ba2177d576
--- /dev/null
+++ b/dom/base/test/test_bug1799354.html
@@ -0,0 +1,77 @@
+<!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>