<!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>