| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Custom Elements: defineElement</title> | 2 <title>Custom Elements: defineElement</title> |
| 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#cus
tomelementsregistry"> | 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#cus
tomelementsregistry"> |
| 4 <meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org"> | 4 <meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org"> |
| 5 <script src="../../resources/testharness.js"></script> | 5 <script src="../../resources/testharness.js"></script> |
| 6 <script src="../../resources/testharness-helpers.js"></script> | 6 <script src="../../resources/testharness-helpers.js"></script> |
| 7 <script src="../../resources/testharnessreport.js"></script> | 7 <script src="../../resources/testharnessreport.js"></script> |
| 8 <script src="resources/custom-elements-helpers.js"></script> | 8 <script src="resources/custom-elements-helpers.js"></script> |
| 9 <body> | 9 <body> |
| 10 <script> | 10 <script> |
| (...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 80 w.customElements.define('a-a', F); | 80 w.customElements.define('a-a', F); |
| 81 }, 'defining an element with a constructor with a prototype that is not an ' + | 81 }, 'defining an element with a constructor with a prototype that is not an ' + |
| 82 'object should throw a TypeError'); | 82 'object should throw a TypeError'); |
| 83 }, 'Retrieved prototype is a non-object'); | 83 }, 'Retrieved prototype is a non-object'); |
| 84 | 84 |
| 85 test_with_window((w) => { | 85 test_with_window((w) => { |
| 86 assert_throws(TypeError.prototype, () => { | 86 assert_throws(TypeError.prototype, () => { |
| 87 let not_a_constructor = () => {}; | 87 let not_a_constructor = () => {}; |
| 88 let invalid_name = 'annotation-xml'; | 88 let invalid_name = 'annotation-xml'; |
| 89 w.customElements.define(invalid_name, not_a_constructor); | 89 w.customElements.define(invalid_name, not_a_constructor); |
| 90 }, 'defining an element with an invalid name and invalid constructor ' + | 90 }, 'Defining an element with an invalid name and invalid constructor ' + |
| 91 'should throw a TypeError for the constructor and not a SyntaxError'); | 91 'should throw a TypeError for the constructor and not a SyntaxError'); |
| 92 | 92 |
| 93 class C extends w.HTMLElement {} | 93 class C extends w.HTMLElement {} |
| 94 w.customElements.define('a-a', C); | 94 w.customElements.define('a-a', C); |
| 95 assert_throws('SYNTAX_ERR', () => { | 95 assert_throws('SYNTAX_ERR', () => { |
| 96 let invalid_name = 'annotation-xml'; | 96 let invalid_name = 'annotation-xml'; |
| 97 let reused_constructor = C; | 97 let reused_constructor = C; |
| 98 w.customElements.define(invalid_name, reused_constructor); | 98 w.customElements.define(invalid_name, reused_constructor); |
| 99 }, 'defining an element with an invalid name and a reused constructor ' + | 99 }, 'Defining an element with an invalid name and a reused constructor ' + |
| 100 'should throw a SyntaxError for the name and not a NotSupportedError'); | 100 'should throw a SyntaxError for the name and not a NotSupportedError'); |
| 101 }, 'Order of checks'); | 101 }, 'Order of checks'); |
| 102 | |
| 103 test_with_window((w) => { | |
| 104 let doc = w.document; | |
| 105 doc.body.innerHTML = ` | |
| 106 <a-a id="a"> | |
| 107 <p> | |
| 108 <a-a id="b"></a-a> | |
| 109 <a-a id="c"></a-a> | |
| 110 </p> | |
| 111 <a-a id="d"></a-a> | |
| 112 </a-a>`; | |
| 113 let invocations = []; | |
| 114 class C extends w.HTMLElement { | |
| 115 constructor() { | |
| 116 super(); | |
| 117 console.log(this.getAttribute('id')); | |
| 118 invocations.push(this); | |
| 119 } | |
| 120 } | |
| 121 w.customElements.define('a-a', C); | |
| 122 assert_array_equals(['a', 'b', 'c', 'd'], invocations.map((e) => e.id), | |
| 123 'four elements should have been upgraded in doc order'); | |
| 124 }, 'Upgrade: existing elements'); | |
| 125 | |
| 126 test_with_window((w) => { | |
| 127 let doc = w.document; | |
| 128 let a = doc.createElement('a-a'); | |
| 129 doc.body.appendChild(a); | |
| 130 assert_equals(w.HTMLElement.prototype, Object.getPrototypeOf(a), | |
| 131 'the undefined autonomous element should be a HTMLElement'); | |
| 132 let invocations = []; | |
| 133 class C extends w.HTMLElement { | |
| 134 constructor() { | |
| 135 super(); | |
| 136 assert_equals(C.prototype, Object.getPrototypeOf(a), | |
| 137 'the HTMLElement constructor should set the prototype ' + | |
| 138 'to the defined prototype'); | |
| 139 invocations.push(this); | |
| 140 } | |
| 141 } | |
| 142 w.customElements.define('a-a', C); | |
| 143 assert_array_equals([a], invocations, | |
| 144 'the constructor should have been invoked for the in-' + | |
| 145 'document element'); | |
| 146 }, 'Upgrade: sets prototype of existing elements'); | |
| 147 | |
| 148 test_with_window((w) => { | |
| 149 let doc = w.document; | |
| 150 var shadow = doc.body.attachShadow({mode: 'open'}); | |
| 151 let a = doc.createElement('a-a'); | |
| 152 shadow.appendChild(a); | |
| 153 let invocations = []; | |
| 154 class C extends w.HTMLElement { | |
| 155 constructor() { | |
| 156 super(); | |
| 157 invocations.push(this); | |
| 158 } | |
| 159 } | |
| 160 w.customElements.define('a-a', C); | |
| 161 assert_array_equals([a], invocations, | |
| 162 'the constructor should have been invoked once for the ' + | |
| 163 'elements in the shadow tree'); | |
| 164 }, 'Upgrade: shadow tree'); | |
| 165 </script> | 102 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2032373002:
Revert of Implement the script parts of custom element upgrade steps. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@ce-upgrade-in-document-dom-merge2