MutationObserver-inner-outer.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /dom/nodes/MutationObserver-inner-outer.html - WPT Dashboard Interop Dashboard

<!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>