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