OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Custom Elements: Element definition</title> | 2 <title>Custom Elements: Element definition</title> |
3 <script src="/resources/testharness.js"></script> | 3 <script src="/resources/testharness.js"></script> |
4 <script src="/resources/testharnessreport.js"></script> | 4 <script src="/resources/testharnessreport.js"></script> |
5 <body> | 5 <body> |
6 <div id="log"></div> | 6 <div id="log"></div> |
7 <iframe id="iframe"></iframe> | 7 <iframe id="iframe"></iframe> |
8 <script> | 8 <script> |
9 'use strict'; | 9 'use strict'; |
10 (() => { | 10 (() => { |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
49 [ 'arrow function', () => {} ], // IsConstructor returns false for arrow fun
ctions | 49 [ 'arrow function', () => {} ], // IsConstructor returns false for arrow fun
ctions |
50 [ 'method', ({ m() { } }).m ], // IsConstructor returns false for methods | 50 [ 'method', ({ m() { } }).m ], // IsConstructor returns false for methods |
51 ].forEach(t => { | 51 ].forEach(t => { |
52 test(() => { | 52 test(() => { |
53 assert_throws(expectTypeError, () => { | 53 assert_throws(expectTypeError, () => { |
54 customElements.define(`test-define-constructor-${t[0]}`, t[1]); | 54 customElements.define(`test-define-constructor-${t[0]}`, t[1]); |
55 }); | 55 }); |
56 }, `If constructor is ${t[0]}, should throw a TypeError`); | 56 }, `If constructor is ${t[0]}, should throw a TypeError`); |
57 }); | 57 }); |
58 | 58 |
59 // 2. If name is not a valid custom element name, | 59 // 2. If constructor is an interface object or named constructor whose corresp
onding |
| 60 // interface either is HTMLElement or has HTMLElement in its set of inherited
interfaces, |
| 61 // throw a TypeError and abort these steps. |
| 62 [ |
| 63 [ 'HTMLElement', HTMLElement ], |
| 64 [ 'HTMLButtonElement', HTMLButtonElement ], |
| 65 [ 'HTMLImageElement', HTMLImageElement ], |
| 66 [ 'HTMLMediaElement', HTMLMediaElement ], |
| 67 [ 'Image' , Image ], |
| 68 [ 'Audio' , Audio ], |
| 69 [ 'Option', Option ], |
| 70 ].forEach(t => { |
| 71 test(() => { |
| 72 assert_throws(expectTypeError, () => { |
| 73 customElements.define(`test-define-constructor-${t[0]}`, t[1]); |
| 74 }); |
| 75 }, `If constructor is ${t[0]}, should throw a TypeError`); |
| 76 }); |
| 77 |
| 78 // 3. If name is not a valid custom element name, |
60 // then throw a SyntaxError and abort these steps. | 79 // then throw a SyntaxError and abort these steps. |
61 let validCustomElementNames = [ | 80 let validCustomElementNames = [ |
62 // [a-z] (PCENChar)* '-' (PCENChar)* | 81 // [a-z] (PCENChar)* '-' (PCENChar)* |
63 // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-elemen
t-name | 82 // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-elemen
t-name |
64 'a-', | 83 'a-', |
65 'a-a', | 84 'a-a', |
66 'aa-', | 85 'aa-', |
67 'aa-a', | 86 'aa-a', |
68 'a-.-_', | 87 'a-.-_', |
69 'a-0123456789', | 88 'a-0123456789', |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
103 }, `Element names: defining an element named ${name} should succeed`); | 122 }, `Element names: defining an element named ${name} should succeed`); |
104 }); | 123 }); |
105 invalidCustomElementNames.forEach(name => { | 124 invalidCustomElementNames.forEach(name => { |
106 test(() => { | 125 test(() => { |
107 assert_throws(expectSyntaxError, () => { | 126 assert_throws(expectSyntaxError, () => { |
108 customElements.define(name, class {}); | 127 customElements.define(name, class {}); |
109 }); | 128 }); |
110 }, `Element names: defining an element named ${name} should throw a SyntaxEr
ror`); | 129 }, `Element names: defining an element named ${name} should throw a SyntaxEr
ror`); |
111 }); | 130 }); |
112 | 131 |
113 // 3. If this CustomElementsRegistry contains an entry with name name, | 132 // 4. If this CustomElementsRegistry contains an entry with name name, |
114 // then throw a NotSupportedError and abort these steps. | 133 // then throw a NotSupportedError and abort these steps. |
115 test(() => { | 134 test(() => { |
116 customElements.define('test-define-dup-name', class {}); | 135 customElements.define('test-define-dup-name', class {}); |
117 assert_throws(expectNotSupportedError, () => { | 136 assert_throws(expectNotSupportedError, () => { |
118 customElements.define('test-define-dup-name', class {}); | 137 customElements.define('test-define-dup-name', class {}); |
119 }); | 138 }); |
120 }, 'If the name is already defined, should throw a NotSupportedError'); | 139 }, 'If the name is already defined, should throw a NotSupportedError'); |
121 | 140 |
122 // 4. If this CustomElementsRegistry contains an entry with constructor constr
uctor, | 141 // 6. If this CustomElementsRegistry contains an entry with constructor constr
uctor, |
123 // then throw a NotSupportedError and abort these steps. | 142 // then throw a NotSupportedError and abort these steps. |
124 test(() => { | 143 test(() => { |
125 class TestDupConstructor {}; | 144 class TestDupConstructor {}; |
126 customElements.define('test-define-dup-constructor', TestDupConstructor); | 145 customElements.define('test-define-dup-constructor', TestDupConstructor); |
127 assert_throws(expectNotSupportedError, () => { | 146 assert_throws(expectNotSupportedError, () => { |
128 customElements.define('test-define-dup-ctor2', TestDupConstructor); | 147 customElements.define('test-define-dup-ctor2', TestDupConstructor); |
129 }); | 148 }); |
130 }, 'If the constructor is already defined, should throw a NotSupportedError'); | 149 }, 'If the constructor is already defined, should throw a NotSupportedError'); |
131 | 150 |
132 // 7.1. If extends is a valid custom element name, | 151 // 10.1. If extends is a valid custom element name, |
133 // then throw a NotSupportedError. | 152 // then throw a NotSupportedError. |
134 validCustomElementNames.forEach(name => { | 153 validCustomElementNames.forEach(name => { |
135 test(() => { | 154 test(() => { |
136 assert_throws(expectNotSupportedError, () => { | 155 assert_throws(expectNotSupportedError, () => { |
137 customElements.define('test-define-extend-valid-name', class {}, { exten
ds: name }); | 156 customElements.define('test-define-extend-valid-name', class {}, { exten
ds: name }); |
138 }); | 157 }); |
139 }, `If extends is ${name}, should throw a NotSupportedError`); | 158 }, `If extends is ${name}, should throw a NotSupportedError`); |
140 }); | 159 }); |
141 | 160 |
142 // 7.2. If the element interface for extends and the HTML namespace is HTMLUnk
nownElement | 161 // 10.2. If the element interface for extends and the HTML namespace is HTMLUn
knownElement |
143 // (e.g., if extends does not indicate an element definition in this specifica
tion), | 162 // (e.g., if extends does not indicate an element definition in this specifica
tion), |
144 // then throw a NotSupportedError. | 163 // then throw a NotSupportedError. |
145 [ | 164 [ |
146 // https://html.spec.whatwg.org/multipage/dom.html#elements-in-the-dom:htmlu
nknownelement | 165 // https://html.spec.whatwg.org/multipage/dom.html#elements-in-the-dom:htmlu
nknownelement |
147 'bgsound', | 166 'bgsound', |
148 'blink', | 167 'blink', |
149 'isindex', | 168 'isindex', |
150 'multicol', | 169 'multicol', |
151 'nextid', | 170 'nextid', |
152 'spacer', | 171 'spacer', |
153 'elementnametobeunknownelement', | 172 'elementnametobeunknownelement', |
154 ].forEach(name => { | 173 ].forEach(name => { |
155 test(() => { | 174 test(() => { |
156 assert_throws(expectNotSupportedError, () => { | 175 assert_throws(expectNotSupportedError, () => { |
157 customElements.define('test-define-extend-' + name, class {}, { extends:
name }); | 176 customElements.define('test-define-extend-' + name, class {}, { extends:
name }); |
158 }); | 177 }); |
159 }, `If extends is ${name}, should throw a NotSupportedError`); | 178 }, `If extends is ${name}, should throw a NotSupportedError`); |
160 }); | 179 }); |
161 | 180 |
162 // 8. Let observedAttributesIterable be Get(constructor, "observedAttributes")
. | 181 // 13.1. Let prototype be Get(constructor, "prototype"). Rethrow any exception
s. |
163 // Rethrow any exceptions. | |
164 test(() => { | |
165 class C { | |
166 static get observedAttributes() { throw_rethrown_error(); } | |
167 attributeChangedCallback() {} | |
168 } | |
169 assert_rethrown(() => { | |
170 customElements.define('test-define-observedattributes-rethrow', C); | |
171 }); | |
172 }, 'If constructor.observedAttributes throws, should rethrow'); | |
173 | |
174 // 10. Let prototype be Get(constructor, "prototype"). Rethrow any exceptions. | |
175 function assert_rethrown(func, description) { | 182 function assert_rethrown(func, description) { |
176 assert_throws({ name: 'rethrown' }, func, description); | 183 assert_throws({ name: 'rethrown' }, func, description); |
177 } | 184 } |
178 function throw_rethrown_error() { | 185 function throw_rethrown_error() { |
179 const e = new Error('check this is rethrown'); | 186 const e = new Error('check this is rethrown'); |
180 e.name = 'rethrown'; | 187 e.name = 'rethrown'; |
181 throw e; | 188 throw e; |
182 } | 189 } |
183 test(() => { | 190 test(() => { |
184 // Hack for prototype to throw while IsConstructor is true. | 191 // Hack for prototype to throw while IsConstructor is true. |
185 const BadConstructor = (function () { }).bind({}); | 192 const BadConstructor = (function () { }).bind({}); |
186 Object.defineProperty(BadConstructor, 'prototype', { | 193 Object.defineProperty(BadConstructor, 'prototype', { |
187 get() { throw_rethrown_error(); } | 194 get() { throw_rethrown_error(); } |
188 }); | 195 }); |
189 assert_rethrown(() => { | 196 assert_rethrown(() => { |
190 customElements.define('test-define-constructor-prototype-rethrow', BadCons
tructor); | 197 customElements.define('test-define-constructor-prototype-rethrow', BadCons
tructor); |
191 }); | 198 }); |
192 }, 'If constructor.prototype throws, should rethrow'); | 199 }, 'If constructor.prototype throws, should rethrow'); |
193 // 11. If Type(prototype) is not Object, | 200 |
| 201 // 13.2. If Type(prototype) is not Object, |
194 // then throw a TypeError exception. | 202 // then throw a TypeError exception. |
195 test(() => { | 203 test(() => { |
196 const c = (function () { }).bind({}); // prototype is undefined. | 204 const c = (function () { }).bind({}); // prototype is undefined. |
197 assert_throws(expectTypeError, () => { | 205 assert_throws(expectTypeError, () => { |
198 customElements.define('test-define-constructor-prototype-undefined', c); | 206 customElements.define('test-define-constructor-prototype-undefined', c); |
199 }); | 207 }); |
200 }, 'If Type(constructor.prototype) is undefined, should throw a TypeError'); | 208 }, 'If Type(constructor.prototype) is undefined, should throw a TypeError'); |
201 test(() => { | 209 test(() => { |
202 function c() {}; | 210 function c() {}; |
203 c.prototype = 'string'; | 211 c.prototype = 'string'; |
204 assert_throws(expectTypeError, () => { | 212 assert_throws(expectTypeError, () => { |
205 customElements.define('test-define-constructor-prototype-string', c); | 213 customElements.define('test-define-constructor-prototype-string', c); |
206 }); | 214 }); |
207 }, 'If Type(constructor.prototype) is string, should throw a TypeError'); | 215 }, 'If Type(constructor.prototype) is string, should throw a TypeError'); |
208 | 216 |
209 // 12. Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow a
ny exceptions. | 217 // 13.4. Let connectedCallbackValue be Get(prototype, "connectedCallback"). |
210 // 13. If connectedCallback is not undefined, and IsCallable(connectedCallback
) is false, | 218 // Rethrow any exceptions. |
211 // then throw a TypeError exception. | 219 // 13.5. If connectedCallbackValue is not undefined, then set connectedCallbac
k |
212 // 14. Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Ret
hrow any exceptions. | 220 // to the result of converting connectedCallbackValue to the Web IDL Function
callback type. |
213 // 15. If disconnectedCallback is not undefined, and IsCallable(disconnectedCa
llback) is false, | 221 // Rethrow any exceptions. |
214 // then throw a TypeError exception. | 222 // 13.6. Let disconnectedCallbackValue be Get(prototype, "disconnectedCallback
"). |
215 // 16. Let attributeChangedCallback be Get(prototype, "attributeChangedCallbac
k"). Rethrow any exceptions. | 223 // Rethrow any exceptions. |
216 // 17. If attributeChangedCallback is not undefined, and IsCallable(attributeC
hangedCallback) is false, | 224 // 13.7. If disconnectedCallbackValue is not undefined, then set disconnectedC
allback |
217 // then throw a TypeError exception. | 225 // to the result of converting disconnectedCallbackValue to the Web IDL Functi
on callback type. |
| 226 // Rethrow any exceptions. |
| 227 // 13.8. Let attributeChangedCallbackValue be Get(prototype, "attributeChanged
Callback"). |
| 228 // Rethrow any exceptions. |
| 229 // 13.9. If attributeChangedCallbackValue is not undefined, then set attribute
ChangedCallback |
| 230 // to the result of converting attributeChangedCallbackValue to the Web IDL Fu
nction callback type. |
| 231 // Rethrow any exceptions. |
218 [ | 232 [ |
219 'connectedCallback', | 233 'connectedCallback', |
220 'disconnectedCallback', | 234 'disconnectedCallback', |
221 'attributeChangedCallback', | 235 'attributeChangedCallback', |
222 ].forEach(name => { | 236 ].forEach(name => { |
223 test(() => { | 237 test(() => { |
224 class C { | 238 class C { |
225 get [name]() { throw_rethrown_error(); } | 239 get [name]() { throw_rethrown_error(); } |
226 } | 240 } |
227 assert_rethrown(() => { | 241 assert_rethrown(() => { |
(...skipping 17 matching lines...) Expand all Loading... |
245 assert_throws(expectTypeError, () => { | 259 assert_throws(expectTypeError, () => { |
246 customElements.define(`test-define-${name.toLowerCase()}-${data.name
}`, C); | 260 customElements.define(`test-define-${name.toLowerCase()}-${data.name
}`, C); |
247 }); | 261 }); |
248 } | 262 } |
249 }, `If constructor.prototype.${name} is ${data.name}, should ${data.succes
s ? 'succeed' : 'throw a TypeError'}`); | 263 }, `If constructor.prototype.${name} is ${data.name}, should ${data.succes
s ? 'succeed' : 'throw a TypeError'}`); |
250 }); | 264 }); |
251 }); | 265 }); |
252 })(); | 266 })(); |
253 </script> | 267 </script> |
254 </body> | 268 </body> |
OLD | NEW |