parser-constructs-custom-element-synchronously.html (1969B)
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 synchronously"> 7 <link rel="help" href="https://html.spec.whatwg.org/#create-an-element-for-the-token"> 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.firstChild); 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 before instantiating the custom element'); 48 49 </script> 50 </body> 51 </html>