blob: c18623cf29dd794cbdee7de66793b6cbb4e4c6d3 [file] [log] [blame]
<!DOCTYPE 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/testharness-helpers.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
'use strict';
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('SYNTAX_ERR', () => {
w.customElements.define(name, X);
}, `defining an element named "${name}" should throw a SyntaxError`);
});
}, 'Invalid names');
test_with_window((w) => {
class X extends w.HTMLElement {}
class Y extends w.HTMLElement {}
w.customElements.define('a-a', X);
assert_throws('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 X extends w.HTMLElement {}
w.customElements.define('a-a', X);
assert_throws('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');
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');
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('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();
console.log(this.getAttribute('id'));
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');
</script>