tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

MutationObserver-childList.html (17433B)

      1 <!DOCTYPE HTML>
      2 <meta charset=utf-8>
      3 <title>MutationObservers: childList mutations</title>
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="mutationobservers.js"></script>
      7 <h1>MutationObservers: childList mutations</h1>
      8 <div id="log"></div>
      9 
     10 <section style="display: none">
     11 <p id='dummies'>
     12 <span id='d30'>text content</span>
     13 <span id='d35'>text content</span>
     14 <span id='d40'>text content</span>
     15 <span id='d45'>text content</span>
     16 <span id='d50'>text content</span>
     17 <span id='d51'>text content</span>
     18 </p>
     19 
     20 </section>
     21 <section style="display: none">
     22 <p id='n00'><span>text content</span></p>
     23 
     24 <p id='n10'><span>text content</span></p>
     25 <p id='n11'></p>
     26 <p id='n12'></p>
     27 <p id='n13'><span>text content</span></p>
     28 
     29 <p id='n20'>PAS</p>
     30 <p id='n21'>CH</p>
     31 
     32 <p id='n30'><span>text content</span></p>
     33 <p id='n31'><span>text content</span></p>
     34 <p id='n32'><span>AN</span><span>CH</span><span>GED</span></p>
     35 <p id='n33'><span>text content</span></p>
     36 <p id='n34'><span>text content</span></p>
     37 <p id='n35'><span>text content</span></p>
     38 
     39 <p id='n40'><span>text content</span></p>
     40 <p id='n41'><span>text content</span></p>
     41 <p id='n42'><span>CH</span><span>GED</span><span>AN</span></p>
     42 <p id='n43'><span>text content</span></p>
     43 <p id='n44'><span>text content</span></p>
     44 <p id='n45'><span>text content</span></p>
     45 
     46 
     47 <p id='n50'><span>text content</span></p>
     48 <p id='n51'><span>text content</span></p>
     49 <p id='n52'><span>NO </span><span>CHANGED</span></p>
     50 <p id='n53'><span>text content</span></p>
     51 
     52 <p id='n60'><span>text content</span></p>
     53 
     54 <p id='n70'><span>NO </span><span>CHANGED</span></p>
     55 <p id='n71'>CHANN</p>
     56 
     57 <p id='n80'><span>NO </span><span>CHANGED</span></p>
     58 <p id='n81'>CHANN</p>
     59 
     60 <p id='n90'><span>CHA</span><span>ED</span></p>
     61 <p id='n91'>CHAE</p>
     62 
     63 <p id='n100'><span id="s1">CHAN</span><span id="s2">GED</span></p>
     64 
     65 </section>
     66 
     67 <script>
     68  var dummies = document.getElementById('dummies');
     69 
     70  function createFragment() {
     71    var fragment = document.createDocumentFragment();
     72    fragment.appendChild(document.createTextNode("11"));
     73    fragment.appendChild(document.createTextNode("22"));
     74    return fragment;
     75  }
     76 
     77  var n00 = document.getElementById('n00');
     78 
     79  runMutationTest(n00,
     80                  {"childList":true, "attributes":true},
     81                  [{type: "attributes", attributeName: "class"}],
     82                  function() { n00.nodeValue = ""; n00.setAttribute("class", "dummy");},
     83                  "childList Node.nodeValue: no mutation");
     84 
     85  var n10 = document.getElementById('n10');
     86  runMutationTest(n10,
     87                  {"childList":true},
     88                  [{type: "childList",
     89                    removedNodes: [n10.firstChild],
     90                    addedNodes: function() {return [n10.firstChild]}}],
     91                  function() { n10.textContent = "new data"; },
     92                  "childList Node.textContent: replace content mutation");
     93 
     94  var n11 = document.getElementById('n11');
     95  runMutationTest(n11,
     96                  {"childList":true},
     97                  [{type: "childList",
     98                    addedNodes: function() {return [n11.firstChild]}}],
     99                  function() { n11.textContent = "new data"; },
    100                  "childList Node.textContent: no previous content mutation");
    101 
    102  var n12 = document.getElementById('n12');
    103  runMutationTest(n12,
    104                  {"childList":true, "attributes":true},
    105                  [{type: "attributes", attributeName: "class"}],
    106                  function() { n12.textContent = ""; n12.setAttribute("class", "dummy");},
    107                  "childList Node.textContent: textContent no mutation");
    108 
    109  var n13 = document.getElementById('n13');
    110  runMutationTest(n13,
    111                  {"childList":true},
    112                  [{type: "childList", removedNodes: [n13.firstChild]}],
    113                  function() { n13.textContent = ""; },
    114                  "childList Node.textContent: empty string mutation");
    115 
    116  var n20 = document.getElementById('n20');
    117  n20.appendChild(document.createTextNode("S"));
    118  runMutationTest(n20,
    119                  {"childList":true},
    120                  [{type: "childList",
    121                    removedNodes: [n20.lastChild],
    122                    previousSibling: n20.firstChild}],
    123                  function() { n20.normalize(); },
    124                  "childList Node.normalize mutation");
    125 
    126  var n21 = document.getElementById('n21');
    127  n21.appendChild(document.createTextNode("AN"));
    128  n21.appendChild(document.createTextNode("GED"));
    129  runMutationTest(n21,
    130                  {"childList":true},
    131                  [{type: "childList",
    132                    removedNodes: [n21.lastChild.previousSibling],
    133                    previousSibling: n21.firstChild,
    134                    nextSibling: n21.lastChild},
    135                   {type: "childList",
    136                    removedNodes: [n21.lastChild],
    137                    previousSibling: n21.firstChild}],
    138                  function() { n21.normalize(); },
    139                  "childList Node.normalize mutations");
    140 
    141  var n30 = document.getElementById('n30');
    142  var d30 = document.getElementById('d30');
    143  runMutationTest(n30,
    144                  {"childList":true},
    145                  [{type: "childList",
    146                    addedNodes: [d30],
    147                    nextSibling: n30.firstChild}],
    148                  function() { n30.insertBefore(d30, n30.firstChild); },
    149                  "childList Node.insertBefore: addition mutation");
    150 
    151  var n31 = document.getElementById('n31');
    152  runMutationTest(n31,
    153                  {"childList":true},
    154                  [{type: "childList",
    155                    removedNodes: [n31.firstChild]}],
    156                  function() { dummies.insertBefore(n31.firstChild, dummies.firstChild); },
    157                  "childList Node.insertBefore: removal mutation");
    158 
    159  var n32 = document.getElementById('n32');
    160  runMutationTest(n32,
    161                  {"childList":true},
    162                  [{type: "childList",
    163                    removedNodes: [n32.firstChild.nextSibling],
    164                    previousSibling: n32.firstChild, nextSibling: n32.lastChild},
    165                    {type: "childList",
    166                    addedNodes: [n32.firstChild.nextSibling],
    167                    nextSibling: n32.firstChild}],
    168                  function() { n32.insertBefore(n32.firstChild.nextSibling, n32.firstChild); },
    169                  "childList Node.insertBefore: removal and addition mutations");
    170 
    171  var n33 = document.getElementById('n33');
    172  var f33 = createFragment();
    173  runMutationTest(n33,
    174                  {"childList":true},
    175                  [{type: "childList",
    176                    addedNodes: [f33.firstChild, f33.lastChild],
    177                    nextSibling: n33.firstChild}],
    178                  function() { n33.insertBefore(f33, n33.firstChild); },
    179                  "childList Node.insertBefore: fragment addition mutations");
    180 
    181  var n34 = document.getElementById('n34');
    182  var f34 = createFragment();
    183  runMutationTest(f34,
    184                  {"childList":true},
    185                  [{type: "childList",
    186                    removedNodes: [f34.firstChild, f34.lastChild]}],
    187                  function() { n34.insertBefore(f34, n34.firstChild); },
    188                  "childList Node.insertBefore: fragment removal mutations");
    189 
    190  var n35 = document.getElementById('n35');
    191  var d35 = document.getElementById('d35');
    192  runMutationTest(n35,
    193                  {"childList":true},
    194                  [{type: "childList",
    195                    addedNodes: [d35],
    196                    previousSibling: n35.firstChild}],
    197                  function() { n35.insertBefore(d35, null); },
    198                  "childList Node.insertBefore: last child addition mutation");
    199 
    200  var n40 = document.getElementById('n40');
    201  var d40 = document.getElementById('d40');
    202  runMutationTest(n40,
    203                  {"childList":true},
    204                  [{type: "childList",
    205                    addedNodes: [d40],
    206                    previousSibling: n40.firstChild}],
    207                  function() { n40.appendChild(d40); },
    208                  "childList Node.appendChild: addition mutation");
    209 
    210  var n41 = document.getElementById('n41');
    211  runMutationTest(n41,
    212                  {"childList":true},
    213                  [{type: "childList",
    214                    removedNodes: [n41.firstChild]}],
    215                  function() { dummies.appendChild(n41.firstChild); },
    216                  "childList Node.appendChild: removal mutation");
    217 
    218  var n42 = document.getElementById('n42');
    219  runMutationTest(n42,
    220                  {"childList":true},
    221                  [{type: "childList",
    222                    removedNodes: [n42.firstChild.nextSibling],
    223                    previousSibling: n42.firstChild, nextSibling: n42.lastChild},
    224                    {type: "childList",
    225                    addedNodes: [n42.firstChild.nextSibling],
    226                    previousSibling: n42.lastChild}],
    227                  function() { n42.appendChild(n42.firstChild.nextSibling); },
    228                  "childList Node.appendChild: removal and addition mutations");
    229 
    230  var n43 = document.getElementById('n43');
    231  var f43 = createFragment();
    232  runMutationTest(n43,
    233                  {"childList":true},
    234                  [{type: "childList",
    235                    addedNodes: [f43.firstChild, f43.lastChild],
    236                    previousSibling: n43.firstChild}],
    237                  function() { n43.appendChild(f43); },
    238                  "childList Node.appendChild: fragment addition mutations");
    239 
    240  var n44 = document.getElementById('n44');
    241  var f44 = createFragment();
    242  runMutationTest(f44,
    243                  {"childList":true},
    244                  [{type: "childList",
    245                    removedNodes: [f44.firstChild, f44.lastChild]}],
    246                  function() { n44.appendChild(f44); },
    247                  "childList Node.appendChild: fragment removal mutations");
    248 
    249  var n45 = document.createElement('p');
    250  var d45 = document.createElement('span');
    251  runMutationTest(n45,
    252                  {"childList":true},
    253                  [{type: "childList",
    254                    addedNodes: [d45]}],
    255                  function() { n45.appendChild(d45); },
    256                  "childList Node.appendChild: addition outside document tree mutation");
    257 
    258  var n50 = document.getElementById('n50');
    259  var d50 = document.getElementById('d50');
    260  runMutationTest(n50,
    261                  {"childList":true},
    262                  [{type: "childList",
    263                    removedNodes: [n50.firstChild],
    264                    addedNodes: [d50]}],
    265                  function() { n50.replaceChild(d50, n50.firstChild); },
    266                  "childList Node.replaceChild: replacement mutation");
    267 
    268  var n51 = document.getElementById('n51');
    269  var d51 = document.getElementById('d51');
    270  runMutationTest(n51,
    271                  {"childList":true},
    272                  [{type: "childList",
    273                    removedNodes: [n51.firstChild]}],
    274                  function() { d51.parentNode.replaceChild(n51.firstChild, d51); },
    275                  "childList Node.replaceChild: removal mutation");
    276 
    277  var n52 = document.getElementById('n52');
    278  runMutationTest(n52,
    279                  {"childList":true},
    280                  [{type: "childList",
    281                    removedNodes: [n52.lastChild],
    282                    previousSibling: n52.firstChild},
    283                   {type: "childList",
    284                    removedNodes: [n52.firstChild],
    285                    addedNodes: [n52.lastChild]}],
    286                  function() { n52.replaceChild(n52.lastChild, n52.firstChild); },
    287                  "childList Node.replaceChild: internal replacement mutation");
    288 
    289  var n53 = document.getElementById('n53');
    290  runMutationTest(n53,
    291                  {"childList":true},
    292                  [{type: "childList",
    293                    removedNodes: [n53.firstChild]},
    294                   {type: "childList",
    295                    addedNodes: [n53.firstChild]}],
    296                  function() { n53.replaceChild(n53.firstChild, n53.firstChild); },
    297                  "childList Node.replaceChild: self internal replacement mutation");
    298 
    299  var n60 = document.getElementById('n60');
    300  runMutationTest(n60,
    301                  {"childList":true},
    302                  [{type: "childList",
    303                    removedNodes: [n60.firstChild]}],
    304                  function() { n60.removeChild(n60.firstChild); },
    305                  "childList Node.removeChild: removal mutation");
    306 
    307  var n70 = document.getElementById('n70');
    308  var r70 = null;
    309  test(function () {
    310    r70 = document.createRange();
    311    r70.setStartBefore(n70.firstChild);
    312    r70.setEndAfter(n70.firstChild);
    313   }, "Range (r70) is created");
    314  runMutationTest(n70,
    315                  {"childList":true},
    316                  [{type: "childList",
    317                    removedNodes: [n70.firstChild],
    318                    nextSibling: n70.lastChild}],
    319                  function() { r70.deleteContents(); },
    320                  "childList Range.deleteContents: child removal mutation");
    321 
    322  var n71 = document.getElementById('n71');
    323  var r71 = null;
    324  test(function () {
    325    n71.appendChild(document.createTextNode("NNN"));
    326    n71.appendChild(document.createTextNode("NGED"));
    327    r71 = document.createRange();
    328    r71.setStart(n71.firstChild, 4);
    329    r71.setEnd(n71.lastChild, 1);
    330   }, "Range (r71) is created");
    331  runMutationTest(n71,
    332                  {"childList":true},
    333                  [{type: "childList",
    334                    removedNodes: [n71.firstChild.nextSibling],
    335                    previousSibling: n71.firstChild,
    336                    nextSibling: n71.lastChild}],
    337                  function() { r71.deleteContents(); },
    338                  "childList Range.deleteContents: child and data removal mutation");
    339 
    340  var n80 = document.getElementById('n80');
    341  var r80 = null;
    342  test(function () {
    343    r80 = document.createRange();
    344    r80.setStartBefore(n80.firstChild);
    345    r80.setEndAfter(n80.firstChild);
    346   }, "Range (r80) is created");
    347  runMutationTest(n80,
    348                  {"childList":true},
    349                  [{type: "childList",
    350                    removedNodes: [n80.firstChild],
    351                    nextSibling: n80.lastChild}],
    352                  function() { r80.extractContents(); },
    353                  "childList Range.extractContents: child removal mutation");
    354 
    355  var n81 = document.getElementById('n81');
    356  var r81 = null;
    357  test(function () {
    358    n81.appendChild(document.createTextNode("NNN"));
    359    n81.appendChild(document.createTextNode("NGED"));
    360    r81 = document.createRange();
    361    r81.setStart(n81.firstChild, 4);
    362    r81.setEnd(n81.lastChild, 1);
    363   }, "Range (r81) is created");
    364  runMutationTest(n81,
    365                  {"childList":true},
    366                  [{type: "childList",
    367                    removedNodes: [n81.firstChild.nextSibling],
    368                    previousSibling: n81.firstChild,
    369                    nextSibling: n81.lastChild}],
    370                  function() { r81.extractContents(); },
    371                  "childList Range.extractContents: child and data removal mutation");
    372 
    373  var n90 = document.getElementById('n90');
    374  var f90 = document.createTextNode("NG");
    375  var r90 = null;
    376  test(function () {
    377    r90 = document.createRange();
    378    r90.setStartAfter(n90.firstChild);
    379    r90.setEndBefore(n90.lastChild);
    380   }, "Range (r90) is created");
    381  runMutationTest(n90,
    382                  {"childList":true},
    383                  [{type: "childList",
    384                    addedNodes: [f90],
    385                    previousSibling: n90.firstChild,
    386                    nextSibling: n90.lastChild}],
    387                  function() { r90.insertNode(f90); },
    388                  "childList Range.insertNode: child insertion mutation");
    389 
    390  var n91 = document.getElementById('n91');
    391  var f91 = document.createTextNode("NG");
    392  var r91 = null;
    393  test(function () {
    394    n91.appendChild(document.createTextNode("D"));
    395    r91 = document.createRange();
    396    r91.setStart(n91.firstChild, 3);
    397    r91.setEnd(n91.lastChild, 0);
    398   }, "Range (r91) is created");
    399  runMutationTest(n91,
    400                  {"childList":true},
    401                  [{type: "childList",
    402                    addedNodes: function() { return [n91.lastChild.previousSibling]; },
    403                    previousSibling: n91.firstChild,
    404                    nextSibling: n91.lastChild},
    405                   {type: "childList",
    406                    addedNodes: [f91],
    407                    previousSibling: n91.firstChild,
    408                    nextSibling: function () { return n91.lastChild.previousSibling; } }],
    409                  function() { r91.insertNode(f91); },
    410                  "childList Range.insertNode: children insertion mutation");
    411 
    412  var n100 = document.getElementById('n100');
    413  var f100 = document.createElement("span");
    414  var r100 = null;
    415  test(function () {
    416    r100 = document.createRange();
    417    r100.setStartBefore(n100.firstChild);
    418    r100.setEndAfter(n100.lastChild);
    419   }, "Range (r100) is created");
    420  runMutationTest(n100,
    421                  {"childList":true},
    422                  [{type: "childList",
    423                    removedNodes: [n100.firstChild],
    424                    nextSibling: n100.lastChild},
    425                   {type: "childList",
    426                    removedNodes: [n100.lastChild]},
    427                   {type: "childList",
    428                    addedNodes: [f100] }],
    429                  function() { r100.surroundContents(f100); },
    430                  "childList Range.surroundContents: children removal and addition mutation");
    431 
    432 </script>