MutationObserver-characterData.html

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>MutationObservers: characterData mutations</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="mutationobservers.js"></script>

<h1>MutationObservers: characterData mutations</h1>

<div id="log"></div>

<section style="display: none">

<p id='n'>text content</p>

<p id='n00'>text content</p>

<p id='n10'>CHAN</p>

<p id='n11'>CHANGED</p>

<p id='n12'>CHANGED</p>

<p id='n20'>CHGED</p>

<p id='n21'>CHANGED</p>

<p id='n22'>CHANGED</p>

<p id='n30'>CCCHANGED</p>

<p id='n31'>CHANGED</p>

<p id='n40'>CCCHANGED</p>

<p id='n41'>CHANGED</p>

<p id="n50"><?processing data?></p>

<p id="n60"><!-- data --></p>

<p id='n70'>CHANN</p>

<p id='n71'>CHANN</p>

<p id='n80'>CHANN</p>

<p id='n81'>CHANN</p>

<p id='n90'>CHANN</p>

</section>

<script>

  var n = document.getElementById('n').firstChild;

runMutationTest(n,

                  {"characterData":true},

                  [{type: "characterData"}],

                  function() { n.data = "NEW VALUE"; },

                  "characterData Text.data: simple mutation without oldValue");

  var n00 = document.getElementById('n00').firstChild;

runMutationTest(n00,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "text content" }],

                  function() { n00.data = "CHANGED"; },

                  "characterData Text.data: simple mutation");

  var n10 = document.getElementById('n10').firstChild;

runMutationTest(n10,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHAN" }],

                  function() { n10.appendData("GED"); },

                  "characterData Text.appendData: simple mutation");

  var n11 = document.getElementById('n11').firstChild;

runMutationTest(n11,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANGED" }],

                  function() { n11.appendData(""); },

                  "characterData Text.appendData: empty string mutation");

  var n12 = document.getElementById('n12').firstChild;

runMutationTest(n12,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANGED" }],

                  function() { n12.appendData(null); },

                  "characterData Text.appendData: null string mutation");

  var n20 = document.getElementById('n20').firstChild;

runMutationTest(n20,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHGED" }],

                  function() { n20.insertData(2, "AN"); },

                  "characterData Text.insertData: simple mutation");

  var n21 = document.getElementById('n21').firstChild;

runMutationTest(n21,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANGED" }],

                  function() { n21.insertData(2, ""); },

                  "characterData Text.insertData: empty string mutation");

  var n22 = document.getElementById('n22').firstChild;

runMutationTest(n22,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANGED" }],

                  function() { n22.insertData(2, null); },

                  "characterData Text.insertData: null string mutation");

  var n30 = document.getElementById('n30').firstChild;

runMutationTest(n30,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CCCHANGED" }],

                  function() { n30.deleteData(0, 2); },

                  "characterData Text.deleteData: simple mutation");

  var n31 = document.getElementById('n31').firstChild;

runMutationTest(n31,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANGED" }, {type: "characterData", oldValue: "CHANGED" }],

                  function() { n31.deleteData(0, 0); n31.data = "n31"; },

                  "characterData Text.deleteData: empty mutation");

  var n40 = document.getElementById('n40').firstChild;

runMutationTest(n40,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CCCHANGED" }],

                  function() { n40.replaceData(0, 2, "CH"); },

                  "characterData Text.replaceData: simple mutation");

  var n41 = document.getElementById('n41').firstChild;

runMutationTest(n41,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANGED" }],

                  function() { n41.replaceData(0, 0, "CH"); },

                  "characterData Text.replaceData: empty mutation");

  var n50 = document.getElementById('n50').firstChild;

runMutationTest(n50,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "?processing data?" },{type: "characterData", oldValue: "CHANGED" },{type: "characterData", oldValue: "CHANGED" }],

                  function() {

                    n50.data = "CHANGED";

                    n50.deleteData(0, 0);

                    n50.replaceData(0, 2, "CH"); },

                  "characterData ProcessingInstruction: data mutations");

  var n60 = document.getElementById('n60').firstChild;

runMutationTest(n60,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: " data " },{type: "characterData", oldValue: "CHANGED" },{type: "characterData", oldValue: "CHANGED" }],

                  function() {

                    n60.data = "CHANGED";

                    n60.deleteData(0, 0);

                    n60.replaceData(0, 2, "CH"); },

                  "characterData Comment: data mutations");

  var n70 = document.getElementById('n70');

  var r70 = null;

  test(function () {

    n70.appendChild(document.createTextNode("NNN"));

    n70.appendChild(document.createTextNode("NGED"));

    r70 = document.createRange();

    r70.setStart(n70.firstChild, 4);

    r70.setEnd(n70.lastChild, 1);

   }, "Range (r70) is created");

runMutationTest(n70.firstChild,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANN" }],

                  function() { r70.deleteContents(); },

                  "characterData Range.deleteContents: child and data removal mutation");

  var n71 = document.getElementById('n71');

  var r71 = null;

  test(function () {

    n71.appendChild(document.createTextNode("NNN"));

    n71.appendChild(document.createTextNode("NGED"));

    r71 = document.createRange();

    r71.setStart(n71.firstChild, 4);

    r71.setEnd(n71.lastChild, 1);

   }, "Range (r71) is created");

runMutationTest(n71.lastChild,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "NGED"}],

                  function() { r71.deleteContents(); },

                  "characterData Range.deleteContents: child and data removal mutation (2)");

  var n80 = document.getElementById('n80');

  var r80 = null;

  test(function () {

    n80.appendChild(document.createTextNode("NNN"));

    n80.appendChild(document.createTextNode("NGED"));

    r80 = document.createRange();

    r80.setStart(n80.firstChild, 4);

    r80.setEnd(n80.lastChild, 1);

   }, "Range (r80) is created");

runMutationTest(n80.firstChild,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANN" }],

                  function() { r80.extractContents(); },

                  "characterData Range.extractContents: child and data removal mutation");

  var n81 = document.getElementById('n81');

  var r81 = null;

  test(function () {

    n81.appendChild(document.createTextNode("NNN"));

    n81.appendChild(document.createTextNode("NGED"));

    r81 = document.createRange();

    r81.setStart(n81.firstChild, 4);

    r81.setEnd(n81.lastChild, 1);

   }, "Range (r81) is created");

runMutationTest(n81.lastChild,

                  {"characterData":true,"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "NGED" }],

                  function() { r81.extractContents(); },

                  "characterData Range.extractContents: child and data removal mutation (2)");

  var n90 = document.getElementById('n90').firstChild;

runMutationTest(n90,

                  {"characterDataOldValue":true},

                  [{type: "characterData", oldValue: "CHANN" }],

                  function() { n90.data = "CHANGED"; },

                  "characterData/characterDataOldValue alone Text.data: simple mutation");

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: