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> | |
7 <script src="../../resources/testharnessreport.js"></script> | 6 <script src="../../resources/testharnessreport.js"></script> |
8 <script src="resources/custom-elements-helpers.js"></script> | 7 <script src="resources/custom-elements-helpers.js"></script> |
9 <body> | 8 <body> |
10 <script> | 9 <script> |
11 // TODO(dominicc): Merge these tests with | 10 // TODO(dominicc): Merge these tests with |
12 // https://github.com/w3c/web-platform-tests/pull/2940 | 11 // https://github.com/w3c/web-platform-tests/pull/2940 |
13 | 12 |
14 'use strict'; | 13 'use strict'; |
15 | 14 |
15 // Since both DOMException syntax error and JavaScript SyntaxError have | |
16 // name property set to 'SyntaxError', assert_throws cannot distinguish them. | |
17 function assert_dom_exception_syntax_error(e, global_context) { | |
18 assert_throws('SYNTAX_ERR', function () { throw e; }); | |
19 assert_true(e instanceof (global_context ? global_context.DOMException : DOMEx ception)); | |
20 } | |
21 | |
16 test_with_window((w) => { | 22 test_with_window((w) => { |
17 assert_throws(TypeError.prototype, () => { | 23 assert_throws(TypeError.prototype, () => { |
18 w.customElements.define('a-a', 42); | 24 w.customElements.define('a-a', 42); |
19 }, 'defining a number "constructor" should throw a TypeError'); | 25 }, 'defining a number "constructor" should throw a TypeError'); |
20 assert_throws(TypeError.prototype, () => { | 26 assert_throws(TypeError.prototype, () => { |
21 w.customElements.define('a-a', () => {}); | 27 w.customElements.define('a-a', () => {}); |
22 }, 'defining an arrow function "constructor" should throw a TypeError'); | 28 }, 'defining an arrow function "constructor" should throw a TypeError'); |
23 assert_throws(TypeError.prototype, () => { | 29 assert_throws(TypeError.prototype, () => { |
24 w.customElements.define('a-a', { m() {} }.m); | 30 w.customElements.define('a-a', { m() {} }.m); |
25 }, 'defining a concise method "constructor" should throw a TypeError'); | 31 }, 'defining a concise method "constructor" should throw a TypeError'); |
(...skipping 15 matching lines...) Expand all Loading... | |
41 '-not-initial-a-z', '0not-initial-a-z', 'Not-initial-a-z', | 47 '-not-initial-a-z', '0not-initial-a-z', 'Not-initial-a-z', |
42 'intermediate-UPPERCASE-letters', | 48 'intermediate-UPPERCASE-letters', |
43 'bad-\u00b6', 'bad-\u00b8', 'bad-\u00bf', 'bad-\u00d7', 'bad-\u00f7', | 49 'bad-\u00b6', 'bad-\u00b8', 'bad-\u00bf', 'bad-\u00d7', 'bad-\u00f7', |
44 'bad-\u037e', 'bad-\u037e', 'bad-\u2000', 'bad-\u200e', 'bad-\u203e', | 50 'bad-\u037e', 'bad-\u037e', 'bad-\u2000', 'bad-\u200e', 'bad-\u203e', |
45 'bad-\u2041', 'bad-\u206f', 'bad-\u2190', 'bad-\u2bff', 'bad-\u2ff0', | 51 'bad-\u2041', 'bad-\u206f', 'bad-\u2190', 'bad-\u2bff', 'bad-\u2ff0', |
46 'bad-\u3000', 'bad-\ud800', 'bad-\uf8ff', 'bad-\ufdd0', 'bad-\ufdef', | 52 'bad-\u3000', 'bad-\ud800', 'bad-\uf8ff', 'bad-\ufdd0', 'bad-\ufdef', |
47 'bad-\ufffe', 'bad-\uffff', 'bad-' + String.fromCodePoint(0xf0000) | 53 'bad-\ufffe', 'bad-\uffff', 'bad-' + String.fromCodePoint(0xf0000) |
48 ]; | 54 ]; |
49 class X extends w.HTMLElement {} | 55 class X extends w.HTMLElement {} |
50 invalid_names.forEach((name) => { | 56 invalid_names.forEach((name) => { |
51 assert_throws('SYNTAX_ERR', () => { | 57 try { |
dominicc (has gone to gerrit)
2016/06/29 07:07:04
I think you should do assert_dom_exception_syntax_
| |
52 w.customElements.define(name, X); | 58 w.customElements.define(name, X); |
53 }, `defining an element named "${name}" should throw a SyntaxError`); | 59 } catch (e) { |
60 assert_dom_exception_syntax_error(e, w); | |
61 } | |
54 }); | 62 }); |
55 }, 'Invalid names'); | 63 }, 'Invalid names'); |
56 | 64 |
57 test_with_window((w) => { | 65 test_with_window((w) => { |
58 class X extends w.HTMLElement {} | 66 class X extends w.HTMLElement {} |
59 class Y extends w.HTMLElement {} | 67 class Y extends w.HTMLElement {} |
60 w.customElements.define('a-a', X); | 68 w.customElements.define('a-a', X); |
61 assert_throws('NotSupportedError', () => { | 69 assert_throws('NotSupportedError', () => { |
62 w.customElements.define('a-a', Y); | 70 w.customElements.define('a-a', Y); |
63 }, 'defining an element with a name that is already defined should throw ' + | 71 }, 'defining an element with a name that is already defined should throw ' + |
64 'a NotSupportedError'); | 72 'a NotSupportedError'); |
65 }, 'Duplicate name'); | 73 }, 'Duplicate name'); |
66 | 74 |
67 // TODO(dominicc): Update this (perhaps by removing this comment) when | |
68 // https://github.com/whatwg/html/pull/1333 lands/issue | |
69 // https://github.com/whatwg/html/issues/1329 is closed. | |
70 test_with_window((w) => { | 75 test_with_window((w) => { |
71 class Y extends w.HTMLElement {} | 76 class Y extends w.HTMLElement {} |
72 let X = (function () {}).bind({}); | 77 let X = (function () {}).bind({}); |
73 Object.defineProperty(X, 'prototype', { | 78 Object.defineProperty(X, 'prototype', { |
74 get() { | 79 get() { |
75 assert_throws('NotSupportedError', () => { | 80 assert_throws('NotSupportedError', () => { |
76 w.customElements.define('a-a', Y); | 81 w.customElements.define('a-a', Y); |
77 }, 'defining an element with a name that is being defined should ' + | 82 }, 'defining an element with a name that is being defined should ' + |
78 'throw a NotSupportedError'); | 83 'throw a NotSupportedError'); |
79 return new Object(); | 84 return new Object(); |
80 } | 85 } |
81 }); | 86 }); |
82 // TODO(dominicc): When callback retrieval is implemented, change this | |
83 // to pass a valid constructor and recursively call define when retrieving | |
84 // callbacks instead; then it is possible to assert the first definition | |
85 // worked: | |
86 // let element = Reflect.construct(HTMLElement, [], X); | |
87 // assert_equals(element.localName, 'a-a'); | |
88 w.customElements.define('a-a', X); | 87 w.customElements.define('a-a', X); |
88 assert_equals(w.customElements.get('a-a'), X, 'the first definition should hav e worked'); | |
89 }, 'Duplicate name defined recursively'); | 89 }, 'Duplicate name defined recursively'); |
90 | 90 |
91 test_with_window((w) => { | 91 test_with_window((w) => { |
92 class X extends w.HTMLElement {} | 92 class X extends w.HTMLElement {} |
93 w.customElements.define('a-a', X); | 93 w.customElements.define('a-a', X); |
94 assert_throws('NotSupportedError', () => { | 94 assert_throws('NotSupportedError', () => { |
95 w.customElements.define('a-b', X); | 95 w.customElements.define('a-b', X); |
96 }, 'defining an element with a constructor that is already in the ' + | 96 }, 'defining an element with a constructor that is already in the ' + |
97 'registry should throw a NotSupportedError'); | 97 'registry should throw a NotSupportedError'); |
98 }, 'Reused constructor'); | 98 }, 'Reused constructor'); |
99 | 99 |
100 // TODO(dominicc): Update this (perhaps by removing this comment) when | |
101 // https://github.com/whatwg/html/pull/1333 lands/issue | |
102 // https://github.com/whatwg/html/issues/1329 is closed. | |
103 test_with_window((w) => { | 100 test_with_window((w) => { |
104 let X = (function () {}).bind({}); | 101 let X = (function () {}).bind({}); |
105 Object.defineProperty(X, 'prototype', { | 102 Object.defineProperty(X, 'prototype', { |
106 get() { | 103 get() { |
107 assert_throws('NotSupportedError', () => { | 104 assert_throws('NotSupportedError', () => { |
108 w.customElements.define('second-name', X); | 105 w.customElements.define('second-name', X); |
109 }, 'defining an element with a constructor that is being defined ' + | 106 }, 'defining an element with a constructor that is being defined ' + |
110 'should throw a NotSupportedError'); | 107 'should throw a NotSupportedError'); |
111 return new Object(); | 108 return new Object(); |
112 } | 109 } |
113 }); | 110 }); |
114 // TODO(dominicc): When callback retrieval is implemented, change this | |
115 // to pass a valid constructor and recursively call define when retrieving | |
116 // callbacks instead; then it is possible to assert the first definition | |
117 // worked: | |
118 // let element = Reflect.construct(HTMLElement, [], X); | |
119 // assert_equals(element.localName, 'a-a'); | |
120 w.customElements.define('first-name', X); | 111 w.customElements.define('first-name', X); |
112 assert_equals(w.customElements.get('first-name'), X, 'the first definition sho uld have worked'); | |
121 }, 'Reused constructor recursively'); | 113 }, 'Reused constructor recursively'); |
122 | 114 |
123 test_with_window((w) => { | 115 test_with_window((w) => { |
124 function F() {} | |
125 F.prototype = 42; | |
126 assert_throws(TypeError.prototype, () => { | |
127 w.customElements.define('a-a', F); | |
128 }, 'defining an element with a constructor with a prototype that is not an ' + | |
129 'object should throw a TypeError'); | |
130 }, 'Retrieved prototype is a non-object'); | |
131 | |
132 test_with_window((w) => { | |
133 assert_throws(TypeError.prototype, () => { | 116 assert_throws(TypeError.prototype, () => { |
134 let not_a_constructor = () => {}; | 117 let not_a_constructor = () => {}; |
135 let invalid_name = 'annotation-xml'; | 118 let invalid_name = 'annotation-xml'; |
136 w.customElements.define(invalid_name, not_a_constructor); | 119 w.customElements.define(invalid_name, not_a_constructor); |
137 }, 'defining an element with an invalid name and invalid constructor ' + | 120 }, 'defining an element with an invalid name and invalid constructor ' + |
138 'should throw a TypeError for the constructor and not a SyntaxError'); | 121 'should throw a TypeError for the constructor and not a SyntaxError'); |
139 | 122 |
140 class C extends w.HTMLElement {} | 123 class C extends w.HTMLElement {} |
141 w.customElements.define('a-a', C); | 124 w.customElements.define('a-a', C); |
142 assert_throws('SYNTAX_ERR', () => { | 125 assert_throws('SYNTAX_ERR', () => { |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
202 constructor() { | 185 constructor() { |
203 super(); | 186 super(); |
204 invocations.push(this); | 187 invocations.push(this); |
205 } | 188 } |
206 } | 189 } |
207 w.customElements.define('a-a', C); | 190 w.customElements.define('a-a', C); |
208 assert_array_equals([a], invocations, | 191 assert_array_equals([a], invocations, |
209 'the constructor should have been invoked once for the ' + | 192 'the constructor should have been invoked once for the ' + |
210 'elements in the shadow tree'); | 193 'elements in the shadow tree'); |
211 }, 'Upgrade: shadow tree'); | 194 }, 'Upgrade: shadow tree'); |
195 | |
196 // Final step in Step 14 | |
197 // 14. Finally, if the first set of steps threw an exception, then rethrow that exception, | |
198 // and terminate this algorithm. | |
199 test_with_window((w) => { | |
200 class Y extends w.HTMLElement {} | |
201 let X = (function () {}).bind({}); | |
202 Object.defineProperty(X, 'prototype', { | |
203 get() { throw { name: 42 }; } | |
204 }); | |
205 assert_throws({ name: 42 }, () => { | |
206 w.customElements.define('a-a', X); | |
207 }, 'should rethrow constructor exception'); | |
208 w.customElements.define('a-a', Y); | |
209 assert_equals(w.customElements.get('a-a'), Y, 'the same name can be registered after failure'); | |
210 }, 'If an exception is thrown, rethrow that exception and terminate the algorith m'); | |
211 | |
212 // 14.1 Let prototype be Get(constructor, "prototype"). Rethrow any exceptions. | |
213 test_with_window((w) => { | |
214 let X = (function () {}).bind({}); | |
215 Object.defineProperty(X, 'prototype', { | |
216 get() { throw { name: 'prototype throws' }; } | |
217 }); | |
218 assert_throws({ name: 'prototype throws' }, () => { | |
219 w.customElements.define('a-a', X); | |
220 }, 'Get(constructor, prototype) should throw'); | |
dominicc (has gone to gerrit)
2016/06/29 07:07:04
Maybe make this description a bit more specific--i
| |
221 }, 'Rethrow any exceptions thrown while getting prototype'); | |
222 | |
223 // 14.2 If Type(prototype) is not Object, then throw a TypeError exception. | |
224 test_with_window((w) => { | |
225 function F() {} | |
226 F.prototype = 42; | |
227 assert_throws(TypeError.prototype, () => { | |
228 w.customElements.define('a-a', F); | |
229 }, 'defining an element with a constructor with a prototype that is not an ' + | |
230 'object should throw a TypeError'); | |
231 }, 'Retrieved prototype is a non-object'); | |
232 | |
233 // 14.3 Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow an y exceptions. | |
234 // 14.5 Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Reth row any exceptions. | |
235 // 14.7 Let attributeChangedCallback be Get(prototype, "attributeChangedCallback "). Rethrow any exceptions. | |
236 // Note that this test implicitly tests order of callback retrievals. | |
237 // Callbacks are defined in reverse order. | |
238 let callbacks_in_reverse = ['attributeChangedCallback', 'disconnectedCallback', 'connectedCallback']; | |
239 function F_for_callbacks_in_reverse() {}; | |
240 callbacks_in_reverse.forEach((callback) => { | |
241 test_with_window((w) => { | |
242 Object.defineProperty(F_for_callbacks_in_reverse.prototype, callback, { | |
243 get() { throw { name: callback }; } | |
244 }); | |
245 assert_throws({ name: callback }, () => { | |
246 w.customElements.define('a-a', F_for_callbacks_in_reverse); | |
247 }, 'Get(prototype, callback) should throw'); | |
248 }, 'Rethrow any exceptions thrown while retrieving ' + callback); | |
249 }); | |
250 | |
251 // 14.4 If connectedCallback is not undefined, and IsCallable(connectedCallback) is false, | |
252 // then throw a TypeError exception. | |
253 // 14.6 If disconnectedCallback is not undefined, and IsCallable(disconnectedCal lback) is false, | |
254 // then throw a TypeError exception. | |
255 // 14.9. If attributeChangedCallback is not undefined, then | |
256 // 1. If IsCallable(attributeChangedCallback) is false, then throw a TypeE rror exception. | |
257 callbacks_in_reverse.forEach((callback) => { | |
258 test_with_window((w) => { | |
259 function F() {} | |
260 Object.defineProperty(F.prototype, callback, { | |
261 get() { return new Object(); } | |
262 }); | |
263 assert_throws(TypeError.prototype, () => { | |
264 w.customElements.define('a-a', F); | |
265 }, 'defining an element with a constructor with a callback that is ' + | |
266 'not undefined and not callable should throw a TypeError'); | |
267 }, 'If retrieved callback '+ callback + ' is not undefined and not callable, t hrow TypeError'); | |
268 }); | |
269 | |
270 // 14.9.2 Let observedAttributesIterable be Get(constructor, "observedAttributes "). | |
271 // Rethrow any exceptions. | |
272 test_with_window((w) => { | |
273 class X extends w.HTMLElement{ | |
274 constructor() { super(); } | |
275 attributeChangedCallback() {} | |
276 static get observedAttributes() { throw { name: 'observedAttributes throws' }; } | |
277 } | |
278 assert_throws({ name: 'observedAttributes throws' }, () => { | |
279 w.customElements.define('a-a', X); | |
280 }, 'Get(constructor, observedAttributes) should throw'); | |
281 }, 'Rethrow any exceptions thrown while getting observedAttributes'); | |
282 | |
283 // 14.9.3 If observedAttributesIterable is not undefined, then set observedAttri butes | |
284 // to the result of converting observedAttributesIterable to a sequence<D OMString>. | |
285 // Rethrow any exceptions. | |
286 test_with_window((w) => { | |
287 class X extends w.HTMLElement{ | |
288 constructor() { super(); } | |
289 attributeChangedCallback() {} | |
290 static get observedAttributes() { return new RegExp(); } | |
291 } | |
292 assert_throws(TypeError.prototype, () => { | |
293 w.customElements.define('a-a', X); | |
294 }, 'converting RegExp to sequence<DOMString> should throw TypeError'); | |
295 }, 'exception thrown while coverting observedAttributes to sequence<DOMString> ' + | |
davaajav
2016/07/05 02:46:40
type coverting
| |
296 'should be rethrown'); | |
297 | |
298 // 14.9.2 test Get(constructor, observedAttributes) does not throw if | |
299 // attributeChangedCallback is undefined. | |
300 test_with_window((w) => { | |
301 let observedAttributes_invoked = false; | |
302 let X = (function () {}).bind({}); | |
303 Object.defineProperty(X, 'observedAttributes', { | |
304 get() { observedAttributes_invoked = true; } | |
305 }); | |
306 assert_false( observedAttributes_invoked, 'Get(constructor, observedAttributes ) should not be invoked'); | |
307 }, 'Get(constructor, observedAttributes)' + | |
308 'should not execute if attributeChangedCallback is undefined'); | |
309 | |
310 // step 2 | |
311 // 2. If constructor is an interface object whose corresponding interface either is | |
312 // HTMLElement or has HTMLElement in its set of inherited interfaces, throw | |
313 // a TypeError and abort these steps. | |
314 // 3. If name is not a valid custom element name, then throw a "SyntaxError" DOM Exception | |
315 // and abort these steps. | |
316 test_with_window((w) => { | |
317 let invalid_name = 'annotation-xml'; | |
318 assert_throws('SYNTAX_ERR', () => { | |
davaajav
2016/07/05 02:46:40
TODO(davaajav): change this to TypeError, when we
| |
319 w.customElements.define(invalid_name, HTMLElement); | |
320 }, 'defining a constructor that is an interface object whose interface is HT MLElement' + | |
321 'should throw TypeError not SyntaxError'); | |
322 }, 'Invalid constructor'); | |
323 | |
324 // step 2 | |
325 test_with_window((w) => { | |
326 let invalid_name = 'annotation-xml'; | |
327 assert_throws('SYNTAX_ERR', () => { | |
328 w.customElements.define(invalid_name, HTMLButtonElement); | |
329 }, 'defining a constructor that is an interface object who has HTMLElement' + | |
330 'in its set of inhertied interfaces should throw TypeError not SyntaxErro r'); | |
331 }, 'Invalid constructor'); | |
332 | |
333 // step 2 | |
334 test_with_window((w) => { | |
335 let invalid_name = 'annotation-xml'; | |
336 assert_throws('SYNTAX_ERR', () => { | |
dominicc (has gone to gerrit)
2016/06/29 07:07:04
This could be another place to use assert_throws_d
| |
337 w.customElements.define(invalid_name, class extends HTMLElement {}); | |
dominicc (has gone to gerrit)
2016/06/29 07:07:04
Check the indentation here. Above too.
| |
338 }, 'defining author-defined custom element constructor' + | |
339 'should pass this step without throwing TypeError'); | |
340 }, 'Invalid constructor'); | |
212 </script> | 341 </script> |
342 </body> | |
OLD | NEW |