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 constructor is an interface object or named constructor whose corresp
onding | 59 // 2. If name is not a valid custom element name, |
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, | |
79 // then throw a SyntaxError and abort these steps. | 60 // then throw a SyntaxError and abort these steps. |
80 let validCustomElementNames = [ | 61 let validCustomElementNames = [ |
81 // [a-z] (PCENChar)* '-' (PCENChar)* | 62 // [a-z] (PCENChar)* '-' (PCENChar)* |
82 // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-elemen
t-name | 63 // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-elemen
t-name |
83 'a-', | 64 'a-', |
84 'a-a', | 65 'a-a', |
85 'aa-', | 66 'aa-', |
86 'aa-a', | 67 'aa-a', |
87 'a-.-_', | 68 'a-.-_', |
88 'a-0123456789', | 69 'a-0123456789', |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
122 }, `Element names: defining an element named ${name} should succeed`); | 103 }, `Element names: defining an element named ${name} should succeed`); |
123 }); | 104 }); |
124 invalidCustomElementNames.forEach(name => { | 105 invalidCustomElementNames.forEach(name => { |
125 test(() => { | 106 test(() => { |
126 assert_throws(expectSyntaxError, () => { | 107 assert_throws(expectSyntaxError, () => { |
127 customElements.define(name, class {}); | 108 customElements.define(name, class {}); |
128 }); | 109 }); |
129 }, `Element names: defining an element named ${name} should throw a SyntaxEr
ror`); | 110 }, `Element names: defining an element named ${name} should throw a SyntaxEr
ror`); |
130 }); | 111 }); |
131 | 112 |
132 // 4. If this CustomElementsRegistry contains an entry with name name, | 113 // 3. If this CustomElementsRegistry contains an entry with name name, |
133 // then throw a NotSupportedError and abort these steps. | 114 // then throw a NotSupportedError and abort these steps. |
134 test(() => { | 115 test(() => { |
135 customElements.define('test-define-dup-name', class {}); | 116 customElements.define('test-define-dup-name', class {}); |
136 assert_throws(expectNotSupportedError, () => { | 117 assert_throws(expectNotSupportedError, () => { |
137 customElements.define('test-define-dup-name', class {}); | 118 customElements.define('test-define-dup-name', class {}); |
138 }); | 119 }); |
139 }, 'If the name is already defined, should throw a NotSupportedError'); | 120 }, 'If the name is already defined, should throw a NotSupportedError'); |
140 | 121 |
141 // 6. If this CustomElementsRegistry contains an entry with constructor constr
uctor, | 122 // 5. If this CustomElementsRegistry contains an entry with constructor constr
uctor, |
142 // then throw a NotSupportedError and abort these steps. | 123 // then throw a NotSupportedError and abort these steps. |
143 test(() => { | 124 test(() => { |
144 class TestDupConstructor {}; | 125 class TestDupConstructor {}; |
145 customElements.define('test-define-dup-constructor', TestDupConstructor); | 126 customElements.define('test-define-dup-constructor', TestDupConstructor); |
146 assert_throws(expectNotSupportedError, () => { | 127 assert_throws(expectNotSupportedError, () => { |
147 customElements.define('test-define-dup-ctor2', TestDupConstructor); | 128 customElements.define('test-define-dup-ctor2', TestDupConstructor); |
148 }); | 129 }); |
149 }, 'If the constructor is already defined, should throw a NotSupportedError'); | 130 }, 'If the constructor is already defined, should throw a NotSupportedError'); |
150 | 131 |
151 // 10.1. If extends is a valid custom element name, | 132 // 9.1. If extends is a valid custom element name, |
152 // then throw a NotSupportedError. | 133 // then throw a NotSupportedError. |
153 validCustomElementNames.forEach(name => { | 134 validCustomElementNames.forEach(name => { |
154 test(() => { | 135 test(() => { |
155 assert_throws(expectNotSupportedError, () => { | 136 assert_throws(expectNotSupportedError, () => { |
156 customElements.define('test-define-extend-valid-name', class {}, { exten
ds: name }); | 137 customElements.define('test-define-extend-valid-name', class {}, { exten
ds: name }); |
157 }); | 138 }); |
158 }, `If extends is ${name}, should throw a NotSupportedError`); | 139 }, `If extends is ${name}, should throw a NotSupportedError`); |
159 }); | 140 }); |
160 | 141 |
161 // 10.2. If the element interface for extends and the HTML namespace is HTMLUn
knownElement | 142 // 9.2. If the element interface for extends and the HTML namespace is HTMLUnk
nownElement |
162 // (e.g., if extends does not indicate an element definition in this specifica
tion), | 143 // (e.g., if extends does not indicate an element definition in this specifica
tion), |
163 // then throw a NotSupportedError. | 144 // then throw a NotSupportedError. |
164 [ | 145 [ |
165 // https://html.spec.whatwg.org/multipage/dom.html#elements-in-the-dom:htmlu
nknownelement | 146 // https://html.spec.whatwg.org/multipage/dom.html#elements-in-the-dom:htmlu
nknownelement |
166 'bgsound', | 147 'bgsound', |
167 'blink', | 148 'blink', |
168 'isindex', | 149 'isindex', |
169 'multicol', | 150 'multicol', |
170 'nextid', | 151 'nextid', |
171 'spacer', | 152 'spacer', |
172 'elementnametobeunknownelement', | 153 'elementnametobeunknownelement', |
173 ].forEach(name => { | 154 ].forEach(name => { |
174 test(() => { | 155 test(() => { |
175 assert_throws(expectNotSupportedError, () => { | 156 assert_throws(expectNotSupportedError, () => { |
176 customElements.define('test-define-extend-' + name, class {}, { extends:
name }); | 157 customElements.define('test-define-extend-' + name, class {}, { extends:
name }); |
177 }); | 158 }); |
178 }, `If extends is ${name}, should throw a NotSupportedError`); | 159 }, `If extends is ${name}, should throw a NotSupportedError`); |
179 }); | 160 }); |
180 | 161 |
181 // 13.1. Let prototype be Get(constructor, "prototype"). Rethrow any exception
s. | 162 // 12.1. Let prototype be Get(constructor, "prototype"). Rethrow any exception
s. |
182 function assert_rethrown(func, description) { | 163 function assert_rethrown(func, description) { |
183 assert_throws({ name: 'rethrown' }, func, description); | 164 assert_throws({ name: 'rethrown' }, func, description); |
184 } | 165 } |
185 function throw_rethrown_error() { | 166 function throw_rethrown_error() { |
186 const e = new Error('check this is rethrown'); | 167 const e = new Error('check this is rethrown'); |
187 e.name = 'rethrown'; | 168 e.name = 'rethrown'; |
188 throw e; | 169 throw e; |
189 } | 170 } |
190 test(() => { | 171 test(() => { |
191 // Hack for prototype to throw while IsConstructor is true. | 172 // Hack for prototype to throw while IsConstructor is true. |
192 const BadConstructor = (function () { }).bind({}); | 173 const BadConstructor = (function () { }).bind({}); |
193 Object.defineProperty(BadConstructor, 'prototype', { | 174 Object.defineProperty(BadConstructor, 'prototype', { |
194 get() { throw_rethrown_error(); } | 175 get() { throw_rethrown_error(); } |
195 }); | 176 }); |
196 assert_rethrown(() => { | 177 assert_rethrown(() => { |
197 customElements.define('test-define-constructor-prototype-rethrow', BadCons
tructor); | 178 customElements.define('test-define-constructor-prototype-rethrow', BadCons
tructor); |
198 }); | 179 }); |
199 }, 'If constructor.prototype throws, should rethrow'); | 180 }, 'If constructor.prototype throws, should rethrow'); |
200 | 181 |
201 // 13.2. If Type(prototype) is not Object, | 182 // 12.2. If Type(prototype) is not Object, |
202 // then throw a TypeError exception. | 183 // then throw a TypeError exception. |
203 test(() => { | 184 test(() => { |
204 const c = (function () { }).bind({}); // prototype is undefined. | 185 const c = (function () { }).bind({}); // prototype is undefined. |
205 assert_throws(expectTypeError, () => { | 186 assert_throws(expectTypeError, () => { |
206 customElements.define('test-define-constructor-prototype-undefined', c); | 187 customElements.define('test-define-constructor-prototype-undefined', c); |
207 }); | 188 }); |
208 }, 'If Type(constructor.prototype) is undefined, should throw a TypeError'); | 189 }, 'If Type(constructor.prototype) is undefined, should throw a TypeError'); |
209 test(() => { | 190 test(() => { |
210 function c() {}; | 191 function c() {}; |
211 c.prototype = 'string'; | 192 c.prototype = 'string'; |
212 assert_throws(expectTypeError, () => { | 193 assert_throws(expectTypeError, () => { |
213 customElements.define('test-define-constructor-prototype-string', c); | 194 customElements.define('test-define-constructor-prototype-string', c); |
214 }); | 195 }); |
215 }, 'If Type(constructor.prototype) is string, should throw a TypeError'); | 196 }, 'If Type(constructor.prototype) is string, should throw a TypeError'); |
216 | 197 |
217 // 13.4. Let connectedCallbackValue be Get(prototype, "connectedCallback"). | 198 // 12.3. Let lifecycleCallbacks be a map with the four keys "connectedCallback
", |
218 // Rethrow any exceptions. | 199 // "disconnectedCallback", "adoptedCallback", and "attributeChangedCallback", |
219 // 13.5. If connectedCallbackValue is not undefined, then set connectedCallbac
k | 200 // each of which belongs to an entry whose value is null. |
220 // to the result of converting connectedCallbackValue to the Web IDL Function
callback type. | 201 // 12.4. For each of the four keys callbackName in lifecycleCallbacks: |
221 // Rethrow any exceptions. | 202 // 12.4.1. Let callbackValue be Get(prototype, callbackName). Rethrow any exce
ptions. |
222 // 13.6. Let disconnectedCallbackValue be Get(prototype, "disconnectedCallback
"). | 203 // 12.4.2. If callbackValue is not undefined, then set the value of the entry
in |
223 // Rethrow any exceptions. | 204 // lifecycleCallbacks with key callbackName to the result of converting callba
ckValue |
224 // 13.7. If disconnectedCallbackValue is not undefined, then set disconnectedC
allback | 205 // to the Web IDL Function callback type. Rethrow any exceptions from the conv
ersion. |
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. | |
232 [ | 206 [ |
233 'connectedCallback', | 207 'connectedCallback', |
234 'disconnectedCallback', | 208 'disconnectedCallback', |
| 209 'adoptedCallback', |
235 'attributeChangedCallback', | 210 'attributeChangedCallback', |
236 ].forEach(name => { | 211 ].forEach(name => { |
237 test(() => { | 212 test(() => { |
238 class C { | 213 class C { |
239 get [name]() { throw_rethrown_error(); } | 214 get [name]() { throw_rethrown_error(); } |
240 } | 215 } |
241 assert_rethrown(() => { | 216 assert_rethrown(() => { |
242 customElements.define(`test-define-${name.toLowerCase()}-rethrow`, C); | 217 customElements.define(`test-define-${name.toLowerCase()}-rethrow`, C); |
243 }); | 218 }); |
244 }, `If constructor.prototype.${name} throws, should rethrow`); | 219 }, `If constructor.prototype.${name} throws, should rethrow`); |
(...skipping 14 matching lines...) Expand all Loading... |
259 assert_throws(expectTypeError, () => { | 234 assert_throws(expectTypeError, () => { |
260 customElements.define(`test-define-${name.toLowerCase()}-${data.name
}`, C); | 235 customElements.define(`test-define-${name.toLowerCase()}-${data.name
}`, C); |
261 }); | 236 }); |
262 } | 237 } |
263 }, `If constructor.prototype.${name} is ${data.name}, should ${data.succes
s ? 'succeed' : 'throw a TypeError'}`); | 238 }, `If constructor.prototype.${name} is ${data.name}, should ${data.succes
s ? 'succeed' : 'throw a TypeError'}`); |
264 }); | 239 }); |
265 }); | 240 }); |
266 })(); | 241 })(); |
267 </script> | 242 </script> |
268 </body> | 243 </body> |
OLD | NEW |