summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/dom/nodes/MutationObserver-inner-outer.html
blob: 9f6d871417dcb006380f6e59bd0c0a031fd7e78e (plain)
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>