<!doctype html>
<html class="a">
 <head>
  <title>DOMNodeInsertedIntoDocument: dispatch after appending to the render tree</title>
  <style type="text/css">

    .appended {
      width: 100px;
    }

    .inserted {
      width: 200px;
    }

    .replaced {
      width: 300px;
    }

  </style>
 </head>
 <body>
  <p id="original-message">FAIL (script did not run)</p>
  <script>

    if (window.testRunner)
      testRunner.dumpAsText();

    var body = document.body;

    function log (msg) {
      var original_message = document.getElementById('original-message');
      if (original_message) {
        body.removeChild(original_message);
      }
      body.appendChild(document.createElement('p')).textContent = msg;
    };

    function test (element, expected_width, methodName) {
      var width = window.getComputedStyle(element, null).width;
      log((width == expected_width) ? 'PASS' : 'FAIL: got width = "' + width + '" for element added to the tree with ' + methodName + '()');
    };

    var appended_element = document.createElement('div');
    appended_element.className = 'appended';
    appended_element.addEventListener('DOMNodeInsertedIntoDocument', function (event) {
      test(appended_element, '100px', 'appendChild');
    }, false);
    body.appendChild(appended_element);

    var inserted_element = document.createElement('div');
    inserted_element.className = 'inserted';
    inserted_element.addEventListener('DOMNodeInsertedIntoDocument', function (event) {
      test(inserted_element, '200px', 'insertBefore');
    }, false);
    body.insertBefore(inserted_element, appended_element);

    var replaced_element = document.createElement('div');
    replaced_element.className = 'replaced';
    replaced_element.addEventListener('DOMNodeInsertedIntoDocument', function (event) {
      test(replaced_element, '300px', 'replaceChild');
    }, false);
    body.replaceChild(replaced_element, inserted_element);

  </script>
 </body>
</html>