1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>MutationObservers: innerHTML, outerHTML mutations</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="mutationobservers.js"></script>
<h1>MutationObservers: innerHTML, outerHTML mutations</h1>
<div id="log"></div>
<section style="display: none">
<p id='n00'>old text</p>
<p id='n01'>old text</p>
<div id='n02'><p>old text</p></div>
</section>
<script>
var n00;
var n00oldText;
var n01;
var n01oldText;
var n02;
setup(function() {
n00 = document.getElementById('n00');
n00oldText = n00.firstChild;
n01 = document.getElementById('n01');
n01oldText = n01.firstChild;
n02 = document.getElementById('n02');
})
runMutationTest(n00,
{childList:true,attributes:true},
[{type: "childList",
removedNodes: [n00oldText],
addedNodes: function() {
return [document.getElementById("n00").firstChild];
}},
{type: "attributes", attributeName: "class"}],
function() { n00.innerHTML = "new text"; n00.className = "c01"},
"innerHTML mutation");
runMutationTest(n01,
{childList:true},
[{type: "childList",
removedNodes: [n01oldText],
addedNodes: function() {
return [document.getElementById("n01").firstChild,
document.getElementById("n01").lastChild];
}}],
function() { n01.innerHTML = "<span>new</span><span>text</span>"; },
"innerHTML with 2 children mutation");
runMutationTest(n02,
{childList:true},
[{type: "childList",
removedNodes: [n02.firstChild],
addedNodes: function() {
return [n02.firstChild];
}}],
function() { n02.firstChild.outerHTML = "<p>next text</p>"; },
"outerHTML mutation");
</script>
|
