| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>Custom Elements: Element definition</title> |
| 3 <script src="../../../../resources/testharness.js"></script> |
| 4 <script src="../../../../resources/testharnessreport.js"></script> |
| 5 <body> |
| 6 <div id="log"></div> |
| 7 <iframe id="iframe"></iframe> |
| 8 <script> |
| 9 'use strict'; |
| 10 (() => { |
| 11 // Element definition |
| 12 // https://html.spec.whatwg.org/multipage/scripting.html#element-definition |
| 13 |
| 14 // Use window from iframe to isolate the test. |
| 15 const testWindow = iframe.contentDocument.defaultView; |
| 16 const customElements = testWindow.customElements; |
| 17 |
| 18 let testable = false; |
| 19 test(() => { |
| 20 assert_true('customElements' in testWindow, '"window.customElements" exists'
); |
| 21 assert_true('define' in customElements, '"window.customElements.define" exis
ts'); |
| 22 testable = true; |
| 23 }, '"window.customElements.define" should exists'); |
| 24 if (!testable) |
| 25 return; |
| 26 |
| 27 const expectTypeError = TypeError.prototype; |
| 28 // Following errors are DOMException, not JavaScript errors. |
| 29 const expectSyntaxError = 'SYNTAX_ERR'; |
| 30 const expectNotSupportedError = 'NOT_SUPPORTED_ERR'; |
| 31 |
| 32 // 1. If IsConstructor(constructor) is false, |
| 33 // then throw a TypeError and abort these steps. |
| 34 test(() => { |
| 35 assert_throws(expectTypeError, () => { |
| 36 customElements.define(); |
| 37 }); |
| 38 }, 'If no arguments, should throw a TypeError'); |
| 39 test(() => { |
| 40 assert_throws(expectTypeError, () => { |
| 41 customElements.define('test-define-one-arg'); |
| 42 }); |
| 43 }, 'If one argument, should throw a TypeError'); |
| 44 [ |
| 45 [ 'undefined', undefined ], |
| 46 [ 'null', null ], |
| 47 [ 'object', {} ], |
| 48 [ 'string', 'string' ], |
| 49 [ 'arrow function', () => {} ], // IsConstructor returns false for arrow fun
ctions |
| 50 [ 'method', ({ m() { } }).m ], // IsConstructor returns false for methods |
| 51 ].forEach(t => { |
| 52 test(() => { |
| 53 assert_throws(expectTypeError, () => { |
| 54 customElements.define(`test-define-constructor-${t[0]}`, t[1]); |
| 55 }); |
| 56 }, `If constructor is ${t[0]}, should throw a TypeError`); |
| 57 }); |
| 58 |
| 59 // 2. If name is not a valid custom element name, |
| 60 // then throw a SyntaxError and abort these steps. |
| 61 let validCustomElementNames = [ |
| 62 // [a-z] (PCENChar)* '-' (PCENChar)* |
| 63 // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-elemen
t-name |
| 64 'a-', |
| 65 'a-a', |
| 66 'aa-', |
| 67 'aa-a', |
| 68 'a-.-_', |
| 69 'a-0123456789', |
| 70 'a-\u6F22\u5B57', // Two CJK Unified Ideographs |
| 71 'a-\uD840\uDC0B', // Surrogate pair U+2000B |
| 72 ]; |
| 73 let invalidCustomElementNames = [ |
| 74 undefined, |
| 75 null, |
| 76 '', |
| 77 '-', |
| 78 'a', |
| 79 'input', |
| 80 'mycustomelement', |
| 81 'A', |
| 82 'A-', |
| 83 '0-', |
| 84 'a-A', |
| 85 'a-Z', |
| 86 'A-a', |
| 87 'a-a\u00D7', |
| 88 'a-a\u3000', |
| 89 'a-a\uDB80\uDC00', // Surrogate pair U+F0000 |
| 90 // name must not be any of the hyphen-containing element names. |
| 91 'annotation-xml', |
| 92 'color-profile', |
| 93 'font-face', |
| 94 'font-face-src', |
| 95 'font-face-uri', |
| 96 'font-face-format', |
| 97 'font-face-name', |
| 98 'missing-glyph', |
| 99 ]; |
| 100 validCustomElementNames.forEach(name => { |
| 101 test(() => { |
| 102 customElements.define(name, class {}); |
| 103 }, `Element names: defining an element named ${name} should succeed`); |
| 104 }); |
| 105 invalidCustomElementNames.forEach(name => { |
| 106 test(() => { |
| 107 assert_throws(expectSyntaxError, () => { |
| 108 customElements.define(name, class {}); |
| 109 }); |
| 110 }, `Element names: defining an element named ${name} should throw a SyntaxEr
ror`); |
| 111 }); |
| 112 |
| 113 // 3. If this CustomElementsRegistry contains an entry with name name, |
| 114 // then throw a NotSupportedError and abort these steps. |
| 115 test(() => { |
| 116 customElements.define('test-define-dup-name', class {}); |
| 117 assert_throws(expectNotSupportedError, () => { |
| 118 customElements.define('test-define-dup-name', class {}); |
| 119 }); |
| 120 }, 'If the name is already defined, should throw a NotSupportedError'); |
| 121 |
| 122 // 4. If this CustomElementsRegistry contains an entry with constructor constr
uctor, |
| 123 // then throw a NotSupportedError and abort these steps. |
| 124 test(() => { |
| 125 class TestDupConstructor {}; |
| 126 customElements.define('test-define-dup-constructor', TestDupConstructor); |
| 127 assert_throws(expectNotSupportedError, () => { |
| 128 customElements.define('test-define-dup-ctor2', TestDupConstructor); |
| 129 }); |
| 130 }, 'If the constructor is already defined, should throw a NotSupportedError'); |
| 131 |
| 132 // 7.1. If extends is a valid custom element name, |
| 133 // then throw a NotSupportedError. |
| 134 validCustomElementNames.forEach(name => { |
| 135 test(() => { |
| 136 assert_throws(expectNotSupportedError, () => { |
| 137 customElements.define('test-define-extend-valid-name', class {}, { exten
ds: name }); |
| 138 }); |
| 139 }, `If extends is ${name}, should throw a NotSupportedError`); |
| 140 }); |
| 141 |
| 142 // 7.2. If the element interface for extends and the HTML namespace is HTMLUnk
nownElement |
| 143 // (e.g., if extends does not indicate an element definition in this specifica
tion), |
| 144 // then throw a NotSupportedError. |
| 145 [ |
| 146 // https://html.spec.whatwg.org/multipage/dom.html#elements-in-the-dom:htmlu
nknownelement |
| 147 'bgsound', |
| 148 'blink', |
| 149 'isindex', |
| 150 'multicol', |
| 151 'nextid', |
| 152 'spacer', |
| 153 'elementnametobeunknownelement', |
| 154 ].forEach(name => { |
| 155 test(() => { |
| 156 assert_throws(expectNotSupportedError, () => { |
| 157 customElements.define('test-define-extend-' + name, class {}, { extends:
name }); |
| 158 }); |
| 159 }, `If extends is ${name}, should throw a NotSupportedError`); |
| 160 }); |
| 161 |
| 162 // 8. Let observedAttributesIterable be Get(constructor, "observedAttributes")
. |
| 163 // Rethrow any exceptions. |
| 164 // See step 12 for rethrow tests. |
| 165 |
| 166 // 10. Let prototype be Get(constructor, "prototype"). Rethrow any exceptions. |
| 167 function assert_rethrown(func, description) { |
| 168 assert_throws({ name: 'rethrown' }, func, description); |
| 169 } |
| 170 function throw_rethrown_error() { |
| 171 const e = new Error('check this is rethrown'); |
| 172 e.name = 'rethrown'; |
| 173 throw e; |
| 174 } |
| 175 test(() => { |
| 176 // Hack for prototype to throw while IsConstructor is true. |
| 177 const BadConstructor = (function () { }).bind({}); |
| 178 Object.defineProperty(BadConstructor, 'prototype', { |
| 179 get() { throw_rethrown_error(); } |
| 180 }); |
| 181 assert_rethrown(() => { |
| 182 customElements.define('test-define-constructor-prototype-rethrow', BadCons
tructor); |
| 183 }); |
| 184 }, 'If constructor.prototype throws, should rethrow'); |
| 185 // 11. If Type(prototype) is not Object, |
| 186 // then throw a TypeError exception. |
| 187 test(() => { |
| 188 const c = (function () { }).bind({}); // prototype is undefined. |
| 189 assert_throws(expectTypeError, () => { |
| 190 customElements.define('test-define-constructor-prototype-undefined', c); |
| 191 }); |
| 192 }, 'If Type(constructor.prototype) is undefined, should throw a TypeError'); |
| 193 test(() => { |
| 194 function c() {}; |
| 195 c.prototype = 'string'; |
| 196 assert_throws(expectTypeError, () => { |
| 197 customElements.define('test-define-constructor-prototype-string', c); |
| 198 }); |
| 199 }, 'If Type(constructor.prototype) is string, should throw a TypeError'); |
| 200 |
| 201 // 12. Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow a
ny exceptions. |
| 202 // 13. If connectedCallback is not undefined, and IsCallable(connectedCallback
) is false, |
| 203 // then throw a TypeError exception. |
| 204 // 14. Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Ret
hrow any exceptions. |
| 205 // 15. If disconnectedCallback is not undefined, and IsCallable(disconnectedCa
llback) is false, |
| 206 // then throw a TypeError exception. |
| 207 // 16. Let attributeChangedCallback be Get(prototype, "attributeChangedCallbac
k"). Rethrow any exceptions. |
| 208 // 17. If attributeChangedCallback is not undefined, and IsCallable(attributeC
hangedCallback) is false, |
| 209 // then throw a TypeError exception. |
| 210 [ |
| 211 'observedAttributes', // See step 8 above. |
| 212 'connectedCallback', |
| 213 'disconnectedCallback', |
| 214 'attributeChangedCallback', |
| 215 ].forEach(name => { |
| 216 test(() => { |
| 217 class C { |
| 218 get [name]() { throw_rethrown_error(); } |
| 219 } |
| 220 assert_rethrown(() => { |
| 221 customElements.define('test-define-constructor-rethrow-prototype-' + nam
e, C); |
| 222 }); |
| 223 }, `If constructor.prototype.${name} throws, should rethrow`); |
| 224 }); |
| 225 [ |
| 226 'connectedCallback', |
| 227 'disconnectedCallback', |
| 228 'attributeChangedCallback', |
| 229 ].forEach(name => { |
| 230 test(() => { |
| 231 class c {}; |
| 232 c.prototype[name] = undefined; |
| 233 customElements.define('test-define-constructor-prototype-' + name, c); |
| 234 }, `If constructor.prototype.${name} is undefined, should success`); |
| 235 [ |
| 236 [ 'null', null ], |
| 237 [ 'object', {} ], |
| 238 ].forEach(value => { |
| 239 test(() => { |
| 240 class c {}; |
| 241 c.prototype[name] = value[1]; |
| 242 assert_throws(expectTypeError, () => { |
| 243 customElements.define('test-define-constructor-prototype-' + name, c); |
| 244 }); |
| 245 }, `If constructor.prototype.${name} is ${value[0]}, should throw a TypeEr
ror`); |
| 246 }) |
| 247 }); |
| 248 })(); |
| 249 </script> |
| 250 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1999243002:
Import wpt@5df9b57edb3307a87d5187804b29c8ddd2aa14e1 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master