OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Custom Elements: Changes to the HTML parser</title> |
| 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| 6 <meta name="assert" content="HTML parser must construct a custom element synchro
nously"> |
| 7 <link rel="help" href="https://html.spec.whatwg.org/#create-an-element-for-the-t
oken"> |
| 8 <link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element"> |
| 9 <script src="/resources/testharness.js"></script> |
| 10 <script src="/resources/testharnessreport.js"></script> |
| 11 </head> |
| 12 <body> |
| 13 <div id="log"></div> |
| 14 <script> |
| 15 |
| 16 var childElementCountInConstructor; |
| 17 var containerChildNodesInConstructor = []; |
| 18 var containerNextSiblingInConstructor; |
| 19 class MyCustomElement extends HTMLElement { |
| 20 constructor() { |
| 21 super(); |
| 22 var container = document.getElementById('custom-element-container'); |
| 23 for (var i = 0; i < container.childNodes.length; i++) |
| 24 containerChildNodesInConstructor.push(container.childNodes[i]); |
| 25 containerNextSiblingInConstructor = container.nextSibling; |
| 26 } |
| 27 }; |
| 28 customElements.define('my-custom-element', MyCustomElement); |
| 29 |
| 30 </script> |
| 31 <div id="custom-element-container"> |
| 32 <span id="custom-element-previous-element"></span> |
| 33 <my-custom-element></my-custom-element> |
| 34 <div id="custom-element-next-element"></div> |
| 35 </div> |
| 36 <script> |
| 37 |
| 38 test(function () { |
| 39 var instance = document.querySelector('my-custom-element'); |
| 40 |
| 41 assert_equals(containerChildNodesInConstructor.length, 3); |
| 42 assert_equals(containerChildNodesInConstructor[0], instance.parentNode.first
Child); |
| 43 assert_equals(containerChildNodesInConstructor[1], document.getElementById('
custom-element-previous-element')); |
| 44 assert_equals(containerChildNodesInConstructor[2], instance.previousSibling)
; |
| 45 assert_equals(containerNextSiblingInConstructor, null); |
| 46 |
| 47 }, 'HTML parser must only append nodes that appear before a custom element befor
e instantiating the custom element'); |
| 48 |
| 49 </script> |
| 50 </body> |
| 51 </html> |
OLD | NEW |