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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <p id=description></p>
   9 <div id="console"></div>
  10 <script>
  11
  12 window.jsTestIsAsync = true;
  13 var mutations;
  14 var mutations2;
  15 var mutationsWithOldValue;
  16 var calls;
  17 var charDataNode;
  18
  19 function testBasic() {
  20     var div;
  21     var observer;
  22
  23     function start() {
  24         debug('Testing basic aspects of characterData observation.');
  25
  26         mutations = null;
  27         div = document.createElement('div');
  28         div.textContent = 'foo';
  29         charDataNode = div.firstChild;
  30         observer = new MutationObserver(function(m) {
  31             mutations = m;
  32         });
  33
  34         observer.observe(charDataNode, {characterData: true});
  35         charDataNode.textContent = 'bar';
  36         setTimeout(checkDisconnectAndMutate, 0);
  37     }
  38
  39     function checkDisconnectAndMutate() {
  40         debug('...can characterData changes be observed at all');
  41
  42         shouldBe('mutations.length', '1');
  43         shouldBe('mutations[0].type', '"characterData"');
  44         shouldBe('mutations[0].target', 'charDataNode');
  45
  46         mutations = null;
  47         observer.disconnect();
  48         charDataNode.textContent = 'baz';
  49         setTimeout(checkNotDeliveredAndMutateMultiple, 0);
  50     }
  51
  52     function checkNotDeliveredAndMutateMultiple() {
  53         debug('...observer.disconnect() should prevent further delivery of mutations.');
  54
  55         shouldBe('mutations', 'null');
  56         charDataNode = document.createComment('');
  57         observer.observe(charDataNode, { characterData: true });
  58         charDataNode.textContent = 'foo';
  59         charDataNode.textContent = 'bar';
  60         setTimeout(finish);
  61     }
  62
  63     function finish() {
  64         debug('...re-observing after disconnect works with the same observer.');
  65
  66         shouldBe('mutations.length', '2');
  67         shouldBe('mutations[0].type', '"characterData"');
  68         shouldBe('mutations[0].target', 'charDataNode');
  69         shouldBe('mutations[1].type', '"characterData"');
  70         shouldBe('mutations[1].target', 'charDataNode');
  71         observer.disconnect();
  72         debug('');
  73         runNextTest();
  74     }
  75
  76     start();
  77 }
  78
  79 function testWrongType() {
  80     var div;
  81     var observer;
  82
  83     function start() {
  84         debug('Testing that observing without specifying "characterData" does not result in hearing about characterData changes.');
  85
  86         mutations = null;
  87         div = document.createElement('div');
  88         div.textContent = 'hello';
  89         charDataNode = div.firstChild;
  90         observer = new MutationObserver(function(m) {
  91             mutations = m;
  92         });
  93
  94         observer.observe(charDataNode, {childList: true, attributes: true});
  95         charDataNode = 'goodbye';
  96         setTimeout(finish, 0);
  97     }
  98
  99     function finish() {
 100         shouldBe('mutations', 'null');
 101         observer.disconnect();
 102         debug('');
 103         runNextTest();
 104     }
 105
 106     start();
 107 }
 108
 109 function testMultipleObservers() {
 110     var div;
 111     var observer;
 112     var observer2;
 113
 114     function start() {
 115         debug('Testing that multiple observers can be registered to a given node and both receive mutations.');
 116         mutations = null;
 117         div = document.createElement('div');
 118         div.textContent = 'foo';
 119         charDataNode = div.firstChild;
 120         observer = new MutationObserver(function(m) {
 121             mutations = m;
 122         });
 123         observer2 = new MutationObserver(function(m) {
 124             mutations2 = m;
 125         });
 126         observer.observe(charDataNode, {characterData: true});
 127         observer2.observe(charDataNode, {characterData: true});
 128         charDataNode.textContent = 'bar';
 129         setTimeout(finish, 0);
 130     }
 131
 132     function finish() {
 133         shouldBe('mutations.length', '1');
 134         shouldBe('mutations[0].type', '"characterData"');
 135         shouldBe('mutations[0].target', 'charDataNode');
 136         shouldBe('mutations2.length', '1');
 137         shouldBe('mutations2[0].type', '"characterData"');
 138         shouldBe('mutations2[0].target', 'charDataNode');
 139         observer.disconnect();
 140         observer2.disconnect();
 141         debug('');
 142         runNextTest();
 143     }
 144
 145     start();
 146 }
 147
 148 function testOrderingWrtDOMSubtreeModified() {
 149     var div, div2, subDiv;
 150     var observer;
 151     var listener;
 152
 153     function start() {
 154         debug('Testing mutation records are enqueued for characterData before DOMSubtreeModified is dispatched.');
 155
 156         mutations = null;
 157         div = document.body.appendChild(document.createElement('div'));
 158         div2 = document.body.appendChild(document.createElement('div'));
 159
 160         subDiv = div.appendChild(document.createElement('div'));
 161         subDiv.textContent = 'foo';
 162         charDataNode = subDiv.firstChild;
 163
 164         observer = new MutationObserver(function(m) {
 165             mutations = m;
 166         });
 167
 168         listener = function(e) {
 169             div2.setAttribute('baz', 'bat');
 170         }
 171
 172         div.addEventListener('DOMSubtreeModified', listener);
 173         observer.observe(charDataNode, {characterData: true});
 174         observer.observe(div2, {attributes: true});
 175
 176         charDataNode.textContent = 'bar';
 177
 178         setTimeout(finish, 0);
 179     }
 180
 181     function finish() {
 182         shouldBe('mutations.length', '2');
 183         shouldBe('mutations[0].type', '"characterData"');
 184         shouldBe('mutations[1].type', '"attributes"');
 185         div.removeEventListener('DOMSubtreeModified', listener);
 186         document.body.removeChild(div);
 187         observer.disconnect();
 188         debug('');
 189         runNextTest();
 190     }
 191
 192     start();
 193 }
 194
 195 function testOldValue() {
 196     var div;
 197     var observer;
 198
 199     function start() {
 200         debug('Testing that oldValue is returned when requested.');
 201         mutations = null;
 202         div = document.createElement('div');
 203         div.textContent = 'foo';
 204         charDataNode = div.firstChild;
 205         observer = new MutationObserver(function(mutations) {
 206             window.mutations = mutations;
 207         });
 208         observer.observe(charDataNode, {characterData: true, characterDataOldValue: true});
 209         charDataNode.textContent = 'bar';
 210         charDataNode.textContent = 'baz';
 211         setTimeout(finish, 0);
 212     }
 213
 214     function finish() {
 215         shouldBe('mutations.length', '2');
 216         shouldBe('mutations[0].type', '"characterData"');
 217         shouldBe('mutations[0].target', 'charDataNode');
 218         shouldBe('mutations[0].oldValue', '"foo"');
 219         shouldBe('mutations[1].type', '"characterData"');
 220         shouldBe('mutations[1].target', 'charDataNode');
 221         shouldBe('mutations[1].oldValue', '"bar"');
 222         observer.disconnect();
 223         debug('');
 224         runNextTest();
 225     }
 226
 227     start();
 228 }
 229
 230 function testOldValueAsRequested() {
 231     var div;
 232     var observerWithOldValue;
 233     var observer;
 234
 235     function start() {
 236         debug('Testing that oldValue is delivered as requested (or not).');
 237         mutations = null;
 238         mutationsWithOldValue = null;
 239         div = document.createElement('div');
 240         div.textContent = 'foo';
 241         charDataNode = div.firstChild;
 242         observerWithOldValue = new MutationObserver(function(mutations) {
 243             window.mutationsWithOldValue = mutations;
 244         });
 245         observer = new MutationObserver(function(mutations) {
 246             window.mutations = mutations;
 247         });
 248         observerWithOldValue.observe(charDataNode, {characterData: true, characterDataOldValue: true});
 249         observer.observe(charDataNode, {characterData: true});
 250         charDataNode.textContent = 'bar';
 251         setTimeout(finish, 0);
 252     }
 253
 254     function finish() {
 255         shouldBe('mutationsWithOldValue.length', '1');
 256         shouldBe('mutationsWithOldValue[0].type', '"characterData"');
 257         shouldBe('mutationsWithOldValue[0].oldValue', '"foo"');
 258         shouldBe('mutations.length', '1');
 259         shouldBe('mutations[0].type', '"characterData"');
 260         shouldBe('mutations[0].oldValue', 'null');
 261         observerWithOldValue.disconnect();
 262         observer.disconnect();
 263         debug('');
 264         runNextTest();
 265     }
 266
 267     start();
 268 }
 269
 270 function testOldValueUnionMultipleObservations() {
 271     var div;
 272     var observer;
 273
 274     function start() {
 275         debug('An observer with multiple observations will get characterDataOldValue if any entries request it.');
 276         mutations = null;
 277         div = document.createElement('div');
 278         div.textContent = 'foo';
 279         charDataNode = div.firstChild;
 280         observer = new MutationObserver(function(mutations) {
 281             window.mutations = mutations;
 282         });
 283         observer.observe(div, {characterData: true, characterDataOldValue: true, subtree: true});
 284         observer.observe(charDataNode, {characterData: true});
 285         charDataNode.textContent = 'bar';
 286         setTimeout(finish, 0);
 287     }
 288
 289     function finish() {
 290         shouldBe('mutations.length', '1');
 291         shouldBe('mutations[0].type', '"characterData"');
 292         shouldBe('mutations[0].oldValue', '"foo"');
 293         observer.disconnect();
 294         debug('');
 295         runNextTest();
 296     }
 297
 298     start();
 299 }
 300
 301 var tests = [
 302     testBasic,
 303     testWrongType,
 304     testMultipleObservers,
 305     testOrderingWrtDOMSubtreeModified,
 306     testOldValue,
 307     testOldValueAsRequested,
 308     testOldValueUnionMultipleObservations
 309 ];
 310 var testIndex = 0;
 311
 312 function runNextTest() {
 313     if (testIndex < tests.length)
 314         tests[testIndex++]();
 315     else
 316         finishJSTest();
 317 }
 318
 319 description('Test WebKitMutationObserver.observe on CharacterData nodes');
 320
 321 runNextTest();
 322 </script>
 323 </body>
 324 </html>