@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
413 lines (383 loc) • 16.5 kB
HTML
<title>Custom Elements: defineElement</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#customelementsregistry">
<meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<body>
<script>
// TODO(dominicc): Merge these tests with
// https://github.com/w3c/web-platform-tests/pull/2940
;
test_with_window((w) => {
assert_throws(TypeError.prototype, () => {
w.customElements.define('a-a', 42);
}, 'defining a number "constructor" should throw a TypeError');
assert_throws(TypeError.prototype, () => {
w.customElements.define('a-a', () => {});
}, 'defining an arrow function "constructor" should throw a TypeError');
assert_throws(TypeError.prototype, () => {
w.customElements.define('a-a', { m() {} }.m);
}, 'defining a concise method "constructor" should throw a TypeError');
}, 'A "constructor" that is not a constructor');
test_with_window((w) => {
// https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name
let invalid_names = [
'annotation-xml',
'color-profile',
'font-face',
'font-face-src',
'font-face-uri',
'font-face-format',
'font-face-name',
'missing-glyph',
'div', 'p',
'nothtmlbutnohyphen',
'-not-initial-a-z', '0not-initial-a-z', 'Not-initial-a-z',
'intermediate-UPPERCASE-letters',
'bad-\u00b6', 'bad-\u00b8', 'bad-\u00bf', 'bad-\u00d7', 'bad-\u00f7',
'bad-\u037e', 'bad-\u037e', 'bad-\u2000', 'bad-\u200e', 'bad-\u203e',
'bad-\u2041', 'bad-\u206f', 'bad-\u2190', 'bad-\u2bff', 'bad-\u2ff0',
'bad-\u3000', 'bad-\ud800', 'bad-\uf8ff', 'bad-\ufdd0', 'bad-\ufdef',
'bad-\ufffe', 'bad-\uffff', 'bad-' + String.fromCodePoint(0xf0000)
];
class X extends w.HTMLElement {}
invalid_names.forEach((name) => {
assert_throws_dom_exception(w, 'SYNTAX_ERR', () => {
w.customElements.define(name, X);
})
});
}, 'Invalid names');
test_with_window((w) => {
class X extends w.HTMLElement {}
class Y extends w.HTMLElement {}
w.customElements.define('a-a', X);
assert_throws_dom_exception(w, 'NotSupportedError', () => {
w.customElements.define('a-a', Y);
}, 'defining an element with a name that is already defined should throw ' +
'a NotSupportedError');
}, 'Duplicate name');
test_with_window((w) => {
class Y extends w.HTMLElement {}
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() {
assert_throws_dom_exception(w, 'NotSupportedError', () => {
w.customElements.define('a-a', Y);
}, 'defining an element with a name that is being defined should ' +
'throw a NotSupportedError');
return {};
}
});
w.customElements.define('a-a', X);
assert_equals(w.customElements.get('a-a'), X, 'the first definition should have worked');
}, 'Duplicate name defined recursively');
test_with_window((w) => {
class X extends w.HTMLElement {}
w.customElements.define('a-a', X);
assert_throws_dom_exception(w, 'NotSupportedError', () => {
w.customElements.define('a-b', X);
}, 'defining an element with a constructor that is already in the ' +
'registry should throw a NotSupportedError');
}, 'Reused constructor');
promise_test((t) => {
return Promise.all([create_window_in_test(t), create_window_in_test(t)])
.then(([w1, w2]) => {
class X extends w2.HTMLElement { };
w1.customElements.define('first-name', X);
w2.customElements.define('second-name', X);
assert_equals(
new X().localName, 'second-name',
'the current global object should determine which definition is ' +
'operative; because X extends w2.HTMLElement, w2 is operative');
});
}, 'HTMLElement constructor looks up definitions in the current global-' +
'reused constructor');
promise_test((t) => {
return Promise.all([create_window_in_test(t), create_window_in_test(t)])
.then(([w1, w2]) => {
class X extends w2.HTMLElement { };
w1.customElements.define('x-x', X);
assert_throws(
TypeError.prototype, () => new X(),
'the current global object (w2) should not find the definition in w1');
});
}, 'HTMLElement constructor looks up definitions in the current global');
test_with_window((w) => {
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() {
assert_throws_dom_exception(w, 'NotSupportedError', () => {
w.customElements.define('second-name', X);
}, 'defining an element with a constructor that is being defined ' +
'should throw a NotSupportedError');
return {};
}
});
w.customElements.define('first-name', X);
assert_equals(w.customElements.get('first-name'), X, 'the first definition should have worked');
}, 'Reused constructor recursively');
test_with_window((w) => {
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() {
assert_throws_dom_exception(w, 'NotSupportedError', () => {
w.customElements.define('second-name', class extends HTMLElement { });
}, 'defining an element while element definition is running should ' +
'throw a NotSupportedError');
return {};
}
});
w.customElements.define('first-name', X);
assert_equals(w.customElements.get('first-name'), X,
'the first definition should have worked');
}, 'Define while element definition is running');
promise_test((t) => {
return Promise.all([create_window_in_test(t), create_window_in_test(t)])
.then(([w1, w2]) => {
let X = (function () {}).bind({});
class Y extends w2.HTMLElement { };
Object.defineProperty(X, 'prototype', {
get() {
w2.customElements.define('second-name', Y);
return {};
}
});
w1.customElements.define('first-name', X);
assert_equals(w1.customElements.get('first-name'), X,
'the first definition should have worked');
assert_equals(w2.customElements.get('second-name'), Y,
'the second definition should have worked, too');
});
}, 'Define while element definition is running in a separate registry');
test_with_window((w) => {
class Y extends w.HTMLElement { };
class X extends w.HTMLElement {
constructor() {
super();
w.customElements.define('second-name', Y);
}
};
// the element definition flag while first-name is processed should
// be reset before doing upgrades
w.customElements.define('first-name', X);
assert_equals(w.customElements.get('second-name'), Y,
'the second definition should have worked');
}, 'Element definition flag resets before upgrades',
'<first-name></first-name>');
test_with_window((w) => {
assert_throws(TypeError.prototype, () => {
let not_a_constructor = () => {};
let invalid_name = 'annotation-xml';
w.customElements.define(invalid_name, not_a_constructor);
}, 'defining an element with an invalid name and invalid constructor ' +
'should throw a TypeError for the constructor and not a SyntaxError');
class C extends w.HTMLElement {}
w.customElements.define('a-a', C);
assert_throws_dom_exception(w, 'SYNTAX_ERR', () => {
let invalid_name = 'annotation-xml';
let reused_constructor = C;
w.customElements.define(invalid_name, reused_constructor);
}, 'defining an element with an invalid name and a reused constructor ' +
'should throw a SyntaxError for the name and not a NotSupportedError');
}, 'Order of checks');
test_with_window((w) => {
let doc = w.document;
doc.body.innerHTML = `
<a-a id="a">
<p>
<a-a id="b"></a-a>
<a-a id="c"></a-a>
</p>
<a-a id="d"></a-a>
</a-a>`;
let invocations = [];
class C extends w.HTMLElement {
constructor() {
super();
invocations.push(this);
}
}
w.customElements.define('a-a', C);
assert_array_equals(['a', 'b', 'c', 'd'], invocations.map((e) => e.id),
'four elements should have been upgraded in doc order');
}, 'Upgrade: existing elements');
test_with_window((w) => {
let doc = w.document;
let a = doc.createElement('a-a');
doc.body.appendChild(a);
assert_equals(w.HTMLElement.prototype, Object.getPrototypeOf(a),
'the undefined autonomous element should be a HTMLElement');
let invocations = [];
class C extends w.HTMLElement {
constructor() {
super();
assert_equals(C.prototype, Object.getPrototypeOf(a),
'the HTMLElement constructor should set the prototype ' +
'to the defined prototype');
invocations.push(this);
}
}
w.customElements.define('a-a', C);
assert_array_equals([a], invocations,
'the constructor should have been invoked for the in-' +
'document element');
}, 'Upgrade: sets prototype of existing elements');
test_with_window((w) => {
let doc = w.document;
var shadow = doc.body.attachShadow({mode: 'open'});
let a = doc.createElement('a-a');
shadow.appendChild(a);
let invocations = [];
class C extends w.HTMLElement {
constructor() {
super();
invocations.push(this);
}
}
w.customElements.define('a-a', C);
assert_array_equals([a], invocations,
'the constructor should have been invoked once for the ' +
'elements in the shadow tree');
}, 'Upgrade: shadow tree');
// Final step in Step 14
// 14. Finally, if the first set of steps threw an exception, then rethrow that exception,
// and terminate this algorithm.
test_with_window((w) => {
class Y extends w.HTMLElement {}
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() { throw { name: 42 }; }
});
assert_throws({ name: 42 }, () => {
w.customElements.define('a-a', X);
}, 'should rethrow constructor exception');
w.customElements.define('a-a', Y);
assert_equals(w.customElements.get('a-a'), Y, 'the same name can be registered after failure');
}, 'If an exception is thrown, rethrow that exception and terminate the algorithm');
// 14.1 Let prototype be Get(constructor, "prototype"). Rethrow any exceptions.
test_with_window((w) => {
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() { throw { name: 'prototype throws' }; }
});
assert_throws({ name: 'prototype throws' }, () => {
w.customElements.define('a-a', X);
}, 'Exception from Get(constructor, prototype) should be rethrown');
}, 'Rethrow any exceptions thrown while getting prototype');
// 14.2 If Type(prototype) is not Object, then throw a TypeError exception.
test_with_window((w) => {
function F() {}
F.prototype = 42;
assert_throws(TypeError.prototype, () => {
w.customElements.define('a-a', F);
}, 'defining an element with a constructor with a prototype that is not an ' +
'object should throw a TypeError');
}, 'Retrieved prototype is a non-object');
// 14.3 Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow any exceptions.
// 14.5 Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Rethrow any exceptions.
// 14.7 Let attributeChangedCallback be Get(prototype, "attributeChangedCallback"). Rethrow any exceptions.
// Note that this test implicitly tests order of callback retrievals.
// Callbacks are defined in reverse order.
let callbacks_in_reverse = ['attributeChangedCallback', 'disconnectedCallback', 'connectedCallback'];
function F_for_callbacks_in_reverse() {};
callbacks_in_reverse.forEach((callback) => {
test_with_window((w) => {
Object.defineProperty(F_for_callbacks_in_reverse.prototype, callback, {
get() { throw { name: callback }; }
});
assert_throws({ name: callback }, () => {
w.customElements.define('a-a', F_for_callbacks_in_reverse);
}, 'Exception from Get(prototype, callback) should be rethrown');
}, 'Rethrow any exceptions thrown while retrieving ' + callback);
});
// 14.4 If connectedCallback is not undefined, and IsCallable(connectedCallback) is false,
// then throw a TypeError exception.
// 14.6 If disconnectedCallback is not undefined, and IsCallable(disconnectedCallback) is false,
// then throw a TypeError exception.
// 14.9. If attributeChangedCallback is not undefined, then
// 1. If IsCallable(attributeChangedCallback) is false, then throw a TypeError exception.
callbacks_in_reverse.forEach((callback) => {
test_with_window((w) => {
function F() {}
Object.defineProperty(F.prototype, callback, {
get() { return {}; }
});
assert_throws(TypeError.prototype, () => {
w.customElements.define('a-a', F);
}, 'defining an element with a constructor with a callback that is ' +
'not undefined and not callable should throw a TypeError');
}, 'If retrieved callback '+ callback + ' is not undefined and not callable, throw TypeError');
});
// 14.9.2 Let observedAttributesIterable be Get(constructor, "observedAttributes").
// Rethrow any exceptions.
test_with_window((w) => {
class X extends w.HTMLElement{
constructor() { super(); }
attributeChangedCallback() {}
static get observedAttributes() { throw { name: 'observedAttributes throws' }; }
}
assert_throws({ name: 'observedAttributes throws' }, () => {
w.customElements.define('a-a', X);
}, 'Exception from Get(constructor, observedAttributes) should be rethrown');
}, 'Rethrow any exceptions thrown while getting observedAttributes');
// 14.9.3 If observedAttributesIterable is not undefined, then set observedAttributes
// to the result of converting observedAttributesIterable to a sequence<DOMString>.
// Rethrow any exceptions.
test_with_window((w) => {
class X extends w.HTMLElement{
constructor() { super(); }
attributeChangedCallback() {}
static get observedAttributes() { return new RegExp(); }
}
assert_throws(TypeError.prototype, () => {
w.customElements.define('a-a', X);
}, 'converting RegExp to sequence<DOMString> should throw TypeError');
}, 'exception thrown while converting observedAttributes to ' +
'sequence<DOMString> should be rethrown');
// 14.9.2 test Get(constructor, observedAttributes) does not throw if
// attributeChangedCallback is undefined.
test_with_window((w) => {
let observedAttributes_invoked = false;
let X = (function () {}).bind({});
Object.defineProperty(X, 'observedAttributes', {
get() { observedAttributes_invoked = true; }
});
assert_false( observedAttributes_invoked, 'Get(constructor, observedAttributes) should not be invoked');
}, 'Get(constructor, observedAttributes) should not execute if ' +
'attributeChangedCallback is undefined');
// TODO(dominicc): I think the order and timing of checks the tests
// below exercise has changed. Update these tests. crbug.com/643052
// step 2
// 2. If constructor is an interface object whose corresponding interface either is
// HTMLElement or has HTMLElement in its set of inherited interfaces, throw
// a TypeError and abort these steps.
// 3. If name is not a valid custom element name, then throw a "SyntaxError" DOMException
// and abort these steps.
test_with_window((w) => {
let invalid_name = 'annotation-xml';
// TODO(davaajav): change this to TypeError, when we add a failure expectation to this file
assert_throws_dom_exception(w, 'SYNTAX_ERR', () => {
w.customElements.define(invalid_name, HTMLElement);
}, 'defining a constructor that is an interface object whose interface is HTMLElement' +
'should throw TypeError not SyntaxError');
}, 'Invalid constructor');
// step 2
test_with_window((w) => {
let invalid_name = 'annotation-xml';
assert_throws_dom_exception(w, 'SYNTAX_ERR', () => {
w.customElements.define(invalid_name, HTMLButtonElement);
}, 'defining a constructor that is an interface object who has HTMLElement' +
'in its set of inhertied interfaces should throw TypeError not SyntaxError');
}, 'Invalid constructor');
// step 2
test_with_window((w) => {
let invalid_name = 'annotation-xml';
assert_throws_dom_exception(w, 'SYNTAX_ERR', () => {
w.customElements.define(invalid_name, class extends HTMLElement {});
}, 'defining author-defined custom element constructor should pass this ' +
'step without throwing TypeError');
}, 'Invalid constructor');
</script>
</body>