81 lines
3 KiB
HTML
81 lines
3 KiB
HTML
<!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 = "<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);
|
|
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>
|