| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>Custom Elements: Create an element when definition is non-null and synchr
onous flag not set</title> |
| 3 <script src="../../resources/testharness.js"></script> |
| 4 <script src="../../resources/testharnessreport.js"></script> |
| 5 <script src="resources/custom-elements-helpers.js"></script> |
| 6 <body> |
| 7 <script> |
| 8 'use strict'; |
| 9 |
| 10 // Create an element |
| 11 // https://dom.spec.whatwg.org/#concept-create-element |
| 12 // 6. If definition is non-null, then: |
| 13 // 6.2. If the synchronous custom elements flag is not set: |
| 14 |
| 15 (() => { |
| 16 // customElements.define() upgrades existing elements |
| 17 // with synchronous flag unset. |
| 18 test_with_window(w => { |
| 19 create_element_and_upgrade(w); |
| 20 }, 'define() should upgrade existing elements'); |
| 21 |
| 22 function create_element_and_upgrade(w) { |
| 23 let document = w.document; |
| 24 let element = document.createElement('a-a'); |
| 25 document.body.appendChild(element); |
| 26 assert_false('is_custom_constructed' in element, 'Constructor should not run
before define()'); |
| 27 define(w); |
| 28 assert_true(element.is_custom_constructed, 'Constructor should run after def
ine()'); |
| 29 return element; |
| 30 } |
| 31 |
| 32 function define(w) { |
| 33 w.customElements.define('a-a', class extends w.HTMLElement { |
| 34 constructor() { super(); this.is_custom_constructed = true; } |
| 35 }); |
| 36 } |
| 37 |
| 38 // The "clone a node" concept is async. |
| 39 // https://dom.spec.whatwg.org/#concept-node-clone |
| 40 test_with_window(w => { |
| 41 let element = create_element_and_upgrade(w); |
| 42 let clone = element.cloneNode(); |
| 43 assert_true(clone.is_custom_constructed); |
| 44 }, 'cloneNode() should run custom constructor'); |
| 45 |
| 46 // importNode() uses the same "clone a node" conecpt to clone the node. |
| 47 test_with_window(w => { |
| 48 define(w); |
| 49 let document = w.document; |
| 50 let another_document = document.implementation.createHTMLDocument(); |
| 51 let element_in_another_document = another_document.createElement('a-a'); |
| 52 let imported = document.importNode(element_in_another_document); |
| 53 assert_true(imported.is_custom_constructed); |
| 54 }, 'importNode() should run custom constructor'); |
| 55 |
| 56 // innerHTML/outerHTML setters use the fragment parser. |
| 57 // https://w3c.github.io/DOM-Parsing/#dom-element-innerhtml |
| 58 // Synchronous flag is unset if HTML fragment parsing algorithm. |
| 59 // https://html.spec.whatwg.org/multipage/syntax.html#create-an-element-for-th
e-token |
| 60 test_with_window(w => { |
| 61 define(w); |
| 62 let document = w.document; |
| 63 let fragment = document.createElement('div'); |
| 64 document.body.appendChild(fragment); |
| 65 fragment.innerHTML = '<a-a></a-a>'; |
| 66 assert_true(fragment.children[0].is_custom_constructed); |
| 67 }, 'innerHTML setter should run custom constructor'); |
| 68 |
| 69 test_with_window(w => { |
| 70 define(w); |
| 71 let document = w.document; |
| 72 let fragment = document.createElement('div'); |
| 73 document.body.appendChild(fragment); |
| 74 fragment.outerHTML = '<a-a></a-a>'; |
| 75 assert_true(document.body.children[0].is_custom_constructed); |
| 76 }, 'outerHTML setter should run custom constructor'); |
| 77 })(); |
| 78 </script> |
| 79 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2043153003:
Implement "create an element" when async for Custom Element V1 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master