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