third_party/WebKit/LayoutTests/fast/dom/MutationObserver/observe-subtree.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../../resources/js-test.js"></script>
   6 <title></title>
   7 </head>
   8 <body>
   9 <p id=description></p>
  10 <div id="console"></div>
  11 <script>
  12
  13 window.jsTestIsAsync = true;
  14 var mutations;
  15 var mutations2;
  16 var div;
  17 var subDiv, subDiv2, subDiv3, text;
  18 var calls;
  19
  20 function testBasic() {
  21     var observer;
  22
  23     function start() {
  24         debug('Testing basic aspects of subtree observation.');
  25
  26         mutations = null;
  27         div = document.createElement('div');
  28         subDiv = div.appendChild(document.createElement('div'));
  29         subDiv.innerHTML = 'hello, world';
  30         observer = new MutationObserver(function(mutations) {
  31             window.mutations = mutations;
  32         });
  33
  34         observer.observe(div, {attributes: true, characterData: true, subtree: true});
  35         subDiv.setAttribute('foo', 'bar');
  36         subDiv.firstChild.textContent = 'goodbye!';
  37         setTimeout(finish, 0);
  38     }
  39
  40     function finish() {
  41         debug('...attribute and characterData changes in subtree');
  42
  43         shouldBe('mutations.length', '2');
  44         shouldBe('mutations[0].type', '"attributes"');
  45         shouldBe('mutations[0].target', 'subDiv');
  46         shouldBe('mutations[0].attributeName', '"foo"');
  47         shouldBe('mutations[0].attributeNamespace', 'null');
  48         shouldBe('mutations[1].type', '"characterData"');
  49         shouldBe('mutations[1].target', 'subDiv.firstChild');
  50         observer.disconnect();
  51         debug('');
  52         runNextTest();
  53     }
  54
  55     start();
  56 }
  57
  58 function testMultipleObservers() {
  59     var observer;
  60     var observer2;
  61
  62     function start() {
  63         debug('Testing two observers at different depths.');
  64
  65         mutations = null;
  66         mutations2 = null;
  67         div = document.createElement('div');
  68         subDiv = div.appendChild(document.createElement('div'));
  69         observer = new MutationObserver(function(mutations) {
  70             window.mutations = mutations;
  71         });
  72         observer2 = new MutationObserver(function(mutations) {
  73             window.mutations2 = mutations;
  74         });
  75
  76         observer.observe(div, {attributes: true, subtree: true});
  77         observer2.observe(subDiv, {attributes: true});
  78         subDiv.setAttribute('foo', 'bar');
  79         setTimeout(finish, 0);
  80     }
  81
  82     function finish() {
  83         shouldBe('mutations.length', '1');
  84         shouldBe('mutations[0].type', '"attributes"');
  85         shouldBe('mutations[0].target', 'subDiv');
  86         shouldBe('mutations[0].attributeName', '"foo"');
  87         shouldBe('mutations[0].attributeNamespace', 'null');
  88         shouldBe('mutations2.length', '1');
  89         shouldBe('mutations2[0].type', '"attributes"');
  90         shouldBe('mutations2[0].target', 'subDiv');
  91         shouldBe('mutations2[0].attributeName', '"foo"');
  92         shouldBe('mutations2[0].attributeNamespace', 'null');
  93         observer.disconnect();
  94         observer2.disconnect();
  95         debug('');
  96         runNextTest();
  97     }
  98
  99     start();
 100 }
 101
 102 function testMultipleObservations() {
 103     var observer;
 104
 105     function start() {
 106         debug('Testing one observer at two different depths.');
 107
 108         mutations = null;
 109         calls = 0;
 110         div = document.createElement('div');
 111         subDiv = div.appendChild(document.createElement('div'));
 112         observer = new MutationObserver(function(mutations) {
 113             window.mutations = mutations;
 114             ++calls;
 115         });
 116
 117         observer.observe(div, {attributes: true, subtree: true});
 118         observer.observe(subDiv, {attributes: true, subtree: true});
 119         subDiv.setAttribute('foo', 'bar');
 120         setTimeout(finish, 0);
 121     }
 122
 123     function finish() {
 124         shouldBe('calls', '1');
 125         shouldBe('mutations.length', '1');
 126         shouldBe('mutations[0].type', '"attributes"');
 127         shouldBe('mutations[0].target', 'subDiv');
 128         shouldBe('mutations[0].attributeName', '"foo"');
 129         shouldBe('mutations[0].attributeNamespace', 'null');
 130         observer.disconnect();
 131         debug('');
 132         runNextTest();
 133     }
 134
 135     start();
 136 }
 137
 138 function testTransientDetachedBasic() {
 139     var observer;
 140
 141     function start() {
 142         debug('Testing that transiently detached nodes are still observed via subtree.');
 143
 144         mutations = null;
 145         div = document.createElement('div');
 146         subDiv = div.appendChild(document.createElement('div'));
 147         subDiv.innerHTML = 'hello, world';
 148         observer = new MutationObserver(function(mutations) {
 149             window.mutations = mutations;
 150         });
 151
 152         observer.observe(div, {attributes: true, characterData: true, subtree: true});
 153         subDiv.setAttribute('foo', 'bar');
 154         div.removeChild(subDiv);
 155         subDiv.setAttribute('test', 'test');
 156         setTimeout(checkDeliveredAndChangeAgain, 0);
 157     }
 158
 159     function checkDeliveredAndChangeAgain() {
 160         debug('...both changes should be received. Change detached subDiv again.');
 161
 162         shouldBe('mutations.length', '2');
 163         shouldBe('mutations[0].type', '"attributes"');
 164         shouldBe('mutations[0].target', 'subDiv');
 165         shouldBe('mutations[0].attributeName', '"foo"');
 166         shouldBe('mutations[1].type', '"attributes"');
 167         shouldBe('mutations[1].target', 'subDiv');
 168         shouldBe('mutations[1].attributeName', '"test"');
 169
 170         mutations = null;
 171         subDiv.setAttribute('foo', 'baz');
 172
 173         setTimeout(checkNotDeliveredAndReattach);
 174     }
 175
 176     function checkNotDeliveredAndReattach() {
 177         debug('...transient subtree observation was stopped after delivery, so subDiv change should not be received. Reattach and change again.');
 178
 179         shouldBe('mutations', 'null');
 180
 181         mutations = null
 182         div.appendChild(subDiv);
 183         subDiv.setAttribute('foo', 'bat');
 184
 185         setTimeout(checkDeliveredAndReobserve);
 186     }
 187
 188     function checkDeliveredAndReobserve() {
 189         debug('...reattached subtree should now be observable. Try detaching and re-observing.');
 190
 191         shouldBe('mutations.length', '1');
 192         shouldBe('mutations[0].type', '"attributes"');
 193         shouldBe('mutations[0].target', 'subDiv');
 194         shouldBe('mutations[0].attributeName', '"foo"');
 195
 196         mutations = null;
 197         div.removeChild(subDiv);
 198         subDiv.firstChild.textContent = 'badbye';
 199         observer.observe(div, {attributes: true, characterData: true, subtree: true});
 200         subDiv.setAttribute('foo', 'boo');
 201
 202         setTimeout(finish);
 203     }
 204
 205
 206     function finish() {
 207         debug('...The change made before re-observing should be received, but not the one after.');
 208
 209         shouldBe('mutations.length', '1');
 210         shouldBe('mutations[0].type', '"characterData"');
 211         shouldBe('mutations[0].target', 'subDiv.firstChild');
 212
 213         observer.disconnect();
 214         debug('');
 215         runNextTest();
 216     }
 217     start();
 218 }
 219
 220 function testTransientDetachedDetailed() {
 221     var observer;
 222
 223     function start() {
 224         debug('Testing correct behavior of transient observation with complex movement .');
 225
 226         mutations = null;
 227         div = document.createElement('div');
 228         subDiv = div.appendChild(document.createElement('div'));
 229         subDiv2 = subDiv.appendChild(document.createElement('div'));
 230         subDiv2.innerHTML = 'hello, world';
 231         subDiv3 = document.createElement('div');
 232
 233         observer = new MutationObserver(function(mutations) {
 234             window.mutations = mutations;
 235         });
 236
 237         observer.observe(div, {attributes: true, characterData: true, subtree: true});
 238         div.removeChild(subDiv);
 239         subDiv.removeChild(subDiv2);
 240         text = subDiv2.removeChild(subDiv2.firstChild);
 241
 242         subDiv.setAttribute('a', 'a');
 243         subDiv2.setAttribute('b', 'b');
 244         text.textContent = 'c';
 245         subDiv3.appendChild(subDiv2);
 246         subDiv3.setAttribute('d', 'd');
 247         subDiv2.setAttribute('e', 'e');
 248         div.appendChild(subDiv3);
 249         subDiv3.setAttribute('f', 'f');
 250         subDiv2.setAttribute('g', 'g');
 251
 252         setTimeout(finish, 0);
 253     }
 254
 255     function finish() {
 256         debug('...All changes should be received except for setting the "d" attribute on subDiv3 before it was reachable from div.');
 257
 258         shouldBe('mutations.length', '6');
 259         shouldBe('mutations[0].type', '"attributes"');
 260         shouldBe('mutations[0].target', 'subDiv');
 261         shouldBe('mutations[0].attributeName', '"a"');
 262
 263         shouldBe('mutations[1].type', '"attributes"');
 264         shouldBe('mutations[1].target', 'subDiv2');
 265         shouldBe('mutations[1].attributeName', '"b"');
 266
 267         shouldBe('mutations[2].type', '"characterData"');
 268         shouldBe('mutations[2].target', 'text');
 269
 270         shouldBe('mutations[3].type', '"attributes"');
 271         shouldBe('mutations[3].target', 'subDiv2');
 272         shouldBe('mutations[3].attributeName', '"e"');
 273
 274         shouldBe('mutations[4].type', '"attributes"');
 275         shouldBe('mutations[4].target', 'subDiv3');
 276         shouldBe('mutations[4].attributeName', '"f"');
 277
 278         shouldBe('mutations[5].type', '"attributes"');
 279         shouldBe('mutations[5].target', 'subDiv2');
 280         shouldBe('mutations[5].attributeName', '"g"');
 281
 282         observer.disconnect();
 283         debug('');
 284         runNextTest();
 285     }
 286     start();
 287 }
 288
 289 var tests = [testBasic, testMultipleObservers, testMultipleObservations, testTransientDetachedBasic, testTransientDetachedDetailed];
 290 var testIndex = 0;
 291
 292 function runNextTest() {
 293     if (testIndex < tests.length)
 294         tests[testIndex++]();
 295     else
 296         finishJSTest();
 297 }
 298
 299 description('Test WebKitMutationObserver.observe on a subtree');
 300
 301 runNextTest();
 302 </script>
 303 </body>
 304 </html>