connected-callbacks-html-fragment-parsing.html (1914B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Custom Elements: the HTML fragment parsing algorithm must not create a custom element synchronously</title> 5 <meta name="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 6 <meta name="assert" content="The HTML fragment parsing algorithm must enqueue a custom element upgrade reaction instead of synchronously invoking its constructor"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/parsing.html#create-an-element-for-the-token"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="resources/custom-elements-helpers.js"></script> 11 </head> 12 <body> 13 <div id="log"></div> 14 <script> 15 16 let iteration = 0; 17 18 document_types().forEach(function (entry) { 19 var documentName = entry.name; 20 var getDocument = entry.create; 21 let calls = 0; 22 23 promise_test(function () { 24 class Parenter extends HTMLElement { 25 connectedCallback() { 26 const child = this.firstChild; 27 this.removeChild(child); 28 this.appendChild(child); 29 } 30 } 31 class Child extends HTMLElement { 32 connectedCallback() { calls++; } 33 } 34 iteration++; 35 let parenter = 'x-parenter' + iteration; 36 let child = 'x-child' + iteration; 37 customElements.define(parenter, Parenter); 38 customElements.define(child, Child); 39 return getDocument().then(function (doc) { 40 document.documentElement.innerHTML = `<${parenter}><${child}></${child}></${parenter}>`; 41 doc.documentElement.appendChild(document.documentElement.firstChild); 42 assert_equals(calls, 1); 43 }); 44 }, `Inserting a custom element into ${documentName} using HTML fragment parsing must enqueue a custom element upgrade reaction, not synchronously invoke its constructor`); 45 }); 46 47 </script> 48 </body> 49 </html>