LayoutTests/fast/events/domnodeinsertedintodocument-dispatched-post-rendering.html

   1 <!doctype html>
   2 <html class="a">
   3  <head>
   4   <title>DOMNodeInsertedIntoDocument: dispatch after appending to the render tree</title>
   5   <style type="text/css">
   6
   7     .appended {
   8       width: 100px;
   9     }
  10
  11     .inserted {
  12       width: 200px;
  13     }
  14
  15     .replaced {
  16       width: 300px;
  17     }
  18
  19   </style>
  20  </head>
  21  <body>
  22   <p id="original-message">FAIL (script did not run)</p>
  23   <script>
  24
  25     if (window.testRunner)
  26       testRunner.dumpAsText();
  27
  28     var body = document.body;
  29
  30     function log (msg) {
  31       var original_message = document.getElementById('original-message');
  32       if (original_message) {
  33         body.removeChild(original_message);
  34       }
  35       body.appendChild(document.createElement('p')).textContent = msg;
  36     };
  37
  38     function test (element, expected_width, methodName) {
  39       var width = window.getComputedStyle(element, null).width;
  40       log((width == expected_width) ? 'PASS' : 'FAIL: got width = "' + width + '" for element added to the tree with ' + methodName + '()');
  41     };
  42
  43     var appended_element = document.createElement('div');
  44     appended_element.className = 'appended';
  45     appended_element.addEventListener('DOMNodeInsertedIntoDocument', function (event) {
  46       test(appended_element, '100px', 'appendChild');
  47     }, false);
  48     body.appendChild(appended_element);
  49
  50     var inserted_element = document.createElement('div');
  51     inserted_element.className = 'inserted';
  52     inserted_element.addEventListener('DOMNodeInsertedIntoDocument', function (event) {
  53       test(inserted_element, '200px', 'insertBefore');
  54     }, false);
  55     body.insertBefore(inserted_element, appended_element);
  56
  57     var replaced_element = document.createElement('div');
  58     replaced_element.className = 'replaced';
  59     replaced_element.addEventListener('DOMNodeInsertedIntoDocument', function (event) {
  60       test(replaced_element, '300px', 'replaceChild');
  61     }, false);
  62     body.replaceChild(replaced_element, inserted_element);
  63
  64   </script>
  65  </body>
  66 </html>