<!
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>
function test() {
let root = document.createElement(
"div");
root.innerHTML =
"";
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);
SimpleTest.finish();
};
SimpleTest.waitForExplicitFinish();
addLoadEvent(() => SpecialPowers.pushPrefEnv({
"set": [[
"dom.mutation_events.enabled", true]]}, test));
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
</body>
</html>
