scoped-registry-initialize-upgrades.html (5177B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-initialize"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 <script> 11 12 function runTest(title, makeDocument, makeCustomElementRegistry) { 13 test(() => { 14 const element = makeDocument().createElement('a-b'); 15 assert_equals(element.customElementRegistry, null); 16 const registry = new CustomElementRegistry; 17 registry.define('a-b', class ABElement extends HTMLElement { }); 18 assert_equals(element.customElementRegistry, null); 19 registry.initialize(element); 20 assert_equals(element.customElementRegistry, registry); 21 }, `${title}: CustomElementRegistry.prototype.initialize should upgrade the element given to the first argument`); 22 23 test(() => { 24 const doc = makeDocument(); 25 const container = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div'); 26 container.innerHTML = '<a-b id="ab1"></a-b><a-b id="ab2"></a-b>'; 27 const elements = Array.from(container.querySelectorAll('a-b')); 28 assert_equals(elements[0].id, 'ab1'); 29 assert_equals(elements[0].customElementRegistry, null); 30 assert_equals(elements[1].id, 'ab2'); 31 assert_equals(elements[1].customElementRegistry, null); 32 const registry = new CustomElementRegistry; 33 let registryInConstructor = []; 34 class ABElement extends HTMLElement { 35 constructor() { 36 super(); 37 registryInConstructor[elements.indexOf(this)] = this.customElementRegistry; 38 } 39 }; 40 registry.define('a-b', ABElement); 41 assert_false(elements[0] instanceof ABElement); 42 assert_false(elements[1] instanceof ABElement); 43 assert_equals(registryInConstructor.length, 0); 44 registry.initialize(container); 45 assert_equals(elements[0].customElementRegistry, registry); 46 assert_true(elements[0] instanceof ABElement); 47 assert_equals(elements[1].customElementRegistry, registry); 48 assert_true(elements[1] instanceof ABElement); 49 assert_equals(registryInConstructor.length, 2); 50 assert_equals(registryInConstructor[0], registry); 51 assert_equals(registryInConstructor[1], registry); 52 }, `${title}: CustomElementRegistry.prototype.initialize should upgrade elements in tree order`); 53 54 test(() => { 55 const doc1 = makeDocument(); 56 const htmlNS = 'http://www.w3.org/1999/xhtml'; 57 if (!doc1.documentElement) 58 doc1.appendChild(doc1.createElementNS(htmlNS, 'html')).appendChild(doc1.createElementNS(htmlNS, 'body')); 59 60 const undefinedElement1 = doc1.createElementNS(htmlNS, 'a-b'); 61 62 const registry1 = new CustomElementRegistry; 63 class ABElement extends HTMLElement { }; 64 registry1.define('a-b', ABElement); 65 66 const registry2 = new CustomElementRegistry; 67 undefinedElement2 = doc1.createElementNS(htmlNS, 'a-b', {customElementRegistry: registry2}); 68 69 undefinedElement1.appendChild(undefinedElement2); 70 71 assert_equals(undefinedElement1.customElementRegistry, null); 72 assert_equals(undefinedElement1.__proto__.constructor.name, 'HTMLElement'); 73 assert_equals(undefinedElement2.customElementRegistry, registry2); 74 assert_equals(undefinedElement2.__proto__.constructor.name, 'HTMLElement'); 75 76 registry1.initialize(undefinedElement1); 77 assert_equals(undefinedElement1.customElementRegistry, registry1); 78 assert_true(undefinedElement1 instanceof ABElement); 79 assert_equals(undefinedElement2.customElementRegistry, registry2); 80 assert_equals(undefinedElement2.__proto__.constructor.name, 'HTMLElement'); 81 }, `${title}: CustomElementRegistry.prototype.initialize only upgrades elements beloning to the registry`); 82 } 83 84 runTest('Document', () => new Document); 85 runTest('HTMLDocument', () => document.implementation.createHTMLDocument()); 86 runTest('XHTMLDocument', () => document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null)); 87 88 test(() => { 89 class ABElement extends HTMLElement { }; 90 const registry = new CustomElementRegistry; 91 92 const element = document.createElement('a-b', { customElementRegistry: registry }); 93 assert_equals(element.customElementRegistry, registry); 94 assert_equals(element.__proto__.constructor.name, 'HTMLElement'); 95 assert_false(element instanceof ABElement); 96 97 registry.define('a-b', ABElement); 98 assert_equals(element.customElementRegistry, registry); 99 assert_equals(element.__proto__.constructor.name, 'HTMLElement'); 100 assert_false(element instanceof ABElement); 101 102 registry.initialize(element); 103 assert_equals(element.customElementRegistry, registry); 104 assert_equals(element.__proto__.constructor.name, 'ABElement'); 105 assert_true(element instanceof ABElement); 106 }, `CustomElementRegistry.prototype.initialize upgrades already initialized elements`); 107 108 </script> 109 </body> 110 </html>