diff options
Diffstat (limited to 'testing/web-platform/tests/custom-elements/custom-element-registry')
4 files changed, 473 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/custom-element-registry/define-customized-builtins.html b/testing/web-platform/tests/custom-elements/custom-element-registry/define-customized-builtins.html new file mode 100644 index 0000000000..b691033871 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/custom-element-registry/define-customized-builtins.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<title>Custom Elements: Element Definition Customized Builtins</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id="log"></div> +<iframe id="iframe"></iframe> +<script> +'use strict'; +(() => { + // 2. If name is not a valid custom element name, + // then throw a SyntaxError and abort these steps. + let validCustomElementNames = [ + // [a-z] (PCENChar)* '-' (PCENChar)* + // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name + 'a-', + 'a-a', + 'aa-', + 'aa-a', + 'a-.-_', + 'a-0123456789', + 'a-\u6F22\u5B57', // Two CJK Unified Ideographs + 'a-\uD840\uDC0B', // Surrogate pair U+2000B + ]; + let invalidCustomElementNames = [ + undefined, + null, + '', + '-', + 'a', + 'input', + 'mycustomelement', + 'A', + 'A-', + '0-', + 'a-A', + 'a-Z', + 'A-a', + 'a-a\u00D7', + 'a-a\u3000', + 'a-a\uDB80\uDC00', // Surrogate pair U+F0000 + // name must not be any of the hyphen-containing element names. + 'annotation-xml', + 'color-profile', + 'font-face', + 'font-face-src', + 'font-face-uri', + 'font-face-format', + 'font-face-name', + 'missing-glyph', + ]; + + const iframe = document.getElementById("iframe"); + const testWindow = iframe.contentDocument.defaultView; + const customElements = testWindow.customElements; + + // 9.1. If extends is a valid custom element name, + // then throw a NotSupportedError. + validCustomElementNames.forEach(name => { + test(() => { + assert_throws_dom('NOT_SUPPORTED_ERR', testWindow.DOMException, () => { + customElements.define('test-define-extend-valid-name', class {}, { extends: name }); + }); + }, `If extends is ${name}, should throw a NotSupportedError`); + }); + + // 9.2. If the element interface for extends and the HTML namespace is HTMLUnknownElement + // (e.g., if extends does not indicate an element definition in this specification), + // then throw a NotSupportedError. + [ + // https://html.spec.whatwg.org/multipage/dom.html#elements-in-the-dom:htmlunknownelement + 'bgsound', + 'blink', + 'isindex', + 'multicol', + 'nextid', + 'spacer', + 'elementnametobeunknownelement', + ].forEach(name => { + test(() => { + assert_throws_dom('NOT_SUPPORTED_ERR', testWindow.DOMException, () => { + customElements.define('test-define-extend-' + name, class {}, { extends: name }); + }); + }, `If extends is ${name}, should throw a NotSupportedError`); + }); +})(); +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/custom-element-registry/define.html b/testing/web-platform/tests/custom-elements/custom-element-registry/define.html new file mode 100644 index 0000000000..d3d923bd91 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/custom-element-registry/define.html @@ -0,0 +1,214 @@ +<!DOCTYPE html> +<title>Custom Elements: Element definition</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id="log"></div> +<iframe id="iframe"></iframe> +<script> +'use strict'; +(() => { + // Element definition + // https://html.spec.whatwg.org/multipage/scripting.html#element-definition + + // Use window from iframe to isolate the test. + const iframe = document.getElementById("iframe"); + const testWindow = iframe.contentDocument.defaultView; + const customElements = testWindow.customElements; + + let testable = false; + test(() => { + assert_true('customElements' in testWindow, '"window.customElements" exists'); + assert_true('define' in customElements, '"window.customElements.define" exists'); + testable = true; + }, '"window.customElements.define" should exists'); + if (!testable) + return; + + const expectTypeError = testWindow.TypeError; + // Following errors are DOMException, not JavaScript errors. + const expectSyntaxError = 'SYNTAX_ERR'; + const expectNotSupportedError = 'NOT_SUPPORTED_ERR'; + + // 1. If IsConstructor(constructor) is false, + // then throw a TypeError and abort these steps. + test(() => { + assert_throws_js(expectTypeError, () => { + customElements.define(); + }); + }, 'If no arguments, should throw a TypeError'); + test(() => { + assert_throws_js(expectTypeError, () => { + customElements.define('test-define-one-arg'); + }); + }, 'If one argument, should throw a TypeError'); + [ + [ 'undefined', undefined ], + [ 'null', null ], + [ 'object', {} ], + [ 'string', 'string' ], + [ 'arrow function', () => {} ], // IsConstructor returns false for arrow functions + [ 'method', ({ m() { } }).m ], // IsConstructor returns false for methods + ].forEach(t => { + test(() => { + assert_throws_js(expectTypeError, () => { + customElements.define(`test-define-constructor-${t[0]}`, t[1]); + }); + }, `If constructor is ${t[0]}, should throw a TypeError`); + }); + + // 2. If name is not a valid custom element name, + // then throw a SyntaxError and abort these steps. + let validCustomElementNames = [ + // [a-z] (PCENChar)* '-' (PCENChar)* + // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name + 'a-', + 'a-a', + 'aa-', + 'aa-a', + 'a-.-_', + 'a-0123456789', + 'a-\u6F22\u5B57', // Two CJK Unified Ideographs + 'a-\uD840\uDC0B', // Surrogate pair U+2000B + ]; + let invalidCustomElementNames = [ + undefined, + null, + '', + '-', + 'a', + 'input', + 'mycustomelement', + 'A', + 'A-', + '0-', + 'a-A', + 'a-Z', + 'A-a', + 'a-a\u00D7', + 'a-a\u3000', + 'a-a\uDB80\uDC00', // Surrogate pair U+F0000 + // name must not be any of the hyphen-containing element names. + 'annotation-xml', + 'color-profile', + 'font-face', + 'font-face-src', + 'font-face-uri', + 'font-face-format', + 'font-face-name', + 'missing-glyph', + ]; + validCustomElementNames.forEach(name => { + test(() => { + customElements.define(name, class {}); + }, `Element names: defining an element named ${name} should succeed`); + }); + invalidCustomElementNames.forEach(name => { + test(() => { + assert_throws_dom(expectSyntaxError, testWindow.DOMException, () => { + customElements.define(name, class {}); + }); + }, `Element names: defining an element named ${name} should throw a SyntaxError`); + }); + + // 3. If this CustomElementRegistry contains an entry with name name, + // then throw a NotSupportedError and abort these steps. + test(() => { + customElements.define('test-define-dup-name', class {}); + assert_throws_dom(expectNotSupportedError, testWindow.DOMException, () => { + customElements.define('test-define-dup-name', class {}); + }); + }, 'If the name is already defined, should throw a NotSupportedError'); + + // 5. If this CustomElementRegistry contains an entry with constructor constructor, + // then throw a NotSupportedError and abort these steps. + test(() => { + class TestDupConstructor {}; + customElements.define('test-define-dup-constructor', TestDupConstructor); + assert_throws_dom(expectNotSupportedError, testWindow.DOMException, () => { + customElements.define('test-define-dup-ctor2', TestDupConstructor); + }); + }, 'If the constructor is already defined, should throw a NotSupportedError'); + + // 12.1. Let prototype be Get(constructor, "prototype"). Rethrow any exceptions. + const err = new Error('check this is rethrown'); + err.name = 'rethrown'; + function assert_rethrown(func, description) { + assert_throws_exactly(err, func, description); + } + function throw_rethrown_error() { + throw err; + } + test(() => { + // Hack for prototype to throw while IsConstructor is true. + const BadConstructor = (function () { }).bind({}); + Object.defineProperty(BadConstructor, 'prototype', { + get() { throw_rethrown_error(); } + }); + assert_rethrown(() => { + customElements.define('test-define-constructor-prototype-rethrow', BadConstructor); + }); + }, 'If constructor.prototype throws, should rethrow'); + + // 12.2. If Type(prototype) is not Object, + // then throw a TypeError exception. + test(() => { + const c = (function () { }).bind({}); // prototype is undefined. + assert_throws_js(expectTypeError, () => { + customElements.define('test-define-constructor-prototype-undefined', c); + }); + }, 'If Type(constructor.prototype) is undefined, should throw a TypeError'); + test(() => { + function c() {}; + c.prototype = 'string'; + assert_throws_js(expectTypeError, () => { + customElements.define('test-define-constructor-prototype-string', c); + }); + }, 'If Type(constructor.prototype) is string, should throw a TypeError'); + + // 12.3. Let lifecycleCallbacks be a map with the four keys "connectedCallback", + // "disconnectedCallback", "adoptedCallback", and "attributeChangedCallback", + // each of which belongs to an entry whose value is null. + // 12.4. For each of the four keys callbackName in lifecycleCallbacks: + // 12.4.1. Let callbackValue be Get(prototype, callbackName). Rethrow any exceptions. + // 12.4.2. If callbackValue is not undefined, then set the value of the entry in + // lifecycleCallbacks with key callbackName to the result of converting callbackValue + // to the Web IDL Function callback type. Rethrow any exceptions from the conversion. + [ + 'connectedCallback', + 'disconnectedCallback', + 'adoptedCallback', + 'attributeChangedCallback', + ].forEach(name => { + test(() => { + class C { + get [name]() { throw_rethrown_error(); } + } + assert_rethrown(() => { + customElements.define(`test-define-${name.toLowerCase()}-rethrow`, C); + }); + }, `If constructor.prototype.${name} throws, should rethrow`); + + [ + { name: 'undefined', value: undefined, success: true }, + { name: 'function', value: function () { }, success: true }, + { name: 'null', value: null, success: false }, + { name: 'object', value: {}, success: false }, + { name: 'integer', value: 1, success: false }, + ].forEach(data => { + test(() => { + class C { }; + C.prototype[name] = data.value; + if (data.success) { + customElements.define(`test-define-${name.toLowerCase()}-${data.name}`, C); + } else { + assert_throws_js(expectTypeError, () => { + customElements.define(`test-define-${name.toLowerCase()}-${data.name}`, C); + }); + } + }, `If constructor.prototype.${name} is ${data.name}, should ${data.success ? 'succeed' : 'throw a TypeError'}`); + }); + }); +})(); +</script> +</body> diff --git a/testing/web-platform/tests/custom-elements/custom-element-registry/per-global.html b/testing/web-platform/tests/custom-elements/custom-element-registry/per-global.html new file mode 100644 index 0000000000..3570dcf811 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/custom-element-registry/per-global.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Custom Elements: CustomElementRegistry is per global</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#custom-elements-api"> +<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> +<script src="/common/object-association.js"></script> + +<body> +<script> +"use strict"; +testIsPerWindow("customElements"); +</script> diff --git a/testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html b/testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html new file mode 100644 index 0000000000..e020d95a57 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html @@ -0,0 +1,157 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>customElements.upgrade()</title> +<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-customelementregistry-upgrade"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +"use strict"; + +test(() => { + const el = document.createElement("spider-man"); + + class SpiderMan extends HTMLElement {} + customElements.define("spider-man", SpiderMan); + + assert_false(el instanceof SpiderMan, "The element must not yet be upgraded"); + + customElements.upgrade(el); + assert_true(el instanceof SpiderMan, "The element must now be upgraded"); +}, "Upgrading an element directly (example from the spec)"); + +test(() => { + const el1 = document.createElement("element-a-1"); + const el2 = document.createElement("element-a-2"); + const container = document.createElement("div"); + container.appendChild(el1); + container.appendChild(el2); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + customElements.define("element-a-1", Element1); + customElements.define("element-a-2", Element2); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + + customElements.upgrade(container); + assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); + assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); +}, "Two elements as children of the upgraded node"); + +test(() => { + const el1 = document.createElement("element-b-1"); + const el2 = document.createElement("element-b-2"); + const container = document.createElement("div"); + const subContainer = document.createElement("span"); + const subSubContainer = document.createElement("span"); + container.appendChild(subContainer); + subContainer.appendChild(el1); + subContainer.appendChild(subSubContainer); + subSubContainer.appendChild(el2); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + customElements.define("element-b-1", Element1); + customElements.define("element-b-2", Element2); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + + customElements.upgrade(container); + assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); + assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); +}, "Two elements as descendants of the upgraded node"); + +test(() => { + const el1 = document.createElement("element-d-1"); + const el2 = document.createElement("element-d-2"); + + const container = document.createElement("div"); + const subContainer = document.createElement("span"); + subContainer.attachShadow({ mode: "open" }); + const subSubContainer = document.createElement("span"); + subSubContainer.attachShadow({ mode: "open" }); + + container.appendChild(subContainer); + subContainer.shadowRoot.appendChild(el1); + subContainer.shadowRoot.appendChild(subSubContainer); + subSubContainer.shadowRoot.appendChild(el2); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + customElements.define("element-d-1", Element1); + customElements.define("element-d-2", Element2); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + + customElements.upgrade(container); + assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); + assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); +}, "Two elements as shadow-including descendants (and not descendants) of the upgraded node"); + +test(() => { + const template = document.createElement("template"); + template.innerHTML = ` + <div> + <element-c-1></element-c-1> + <element-c-2> + <element-c-3></element-c-3> + <span> + <element-c-4></element-c-4> + </span> + </element-c-2> + </div> + <element-c-5></element-c-5> + `; + + // This code feels repetitive but I tried to make it use loops and it became harder to see the correctness. + + const el1 = template.content.querySelector("element-c-1"); + const el2 = template.content.querySelector("element-c-2"); + const el3 = template.content.querySelector("element-c-3"); + const el4 = template.content.querySelector("element-c-4"); + const el5 = template.content.querySelector("element-c-5"); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + class Element3 extends HTMLElement {} + class Element4 extends HTMLElement {} + class Element5 extends HTMLElement {} + + customElements.define("element-c-1", Element1); + customElements.define("element-c-2", Element2); + customElements.define("element-c-3", Element3); + customElements.define("element-c-4", Element4); + customElements.define("element-c-5", Element5); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded"); + assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded"); + assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded"); + + customElements.upgrade(template); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded despite upgrading the template"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded despite upgrading the template"); + assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded despite upgrading the template"); + assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded despite upgrading the template"); + assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded despite upgrading the template"); + + customElements.upgrade(template.content); + + // Template contents owner documents don't have a browsing context, so + // https://html.spec.whatwg.org/multipage/custom-elements.html#look-up-a-custom-element-definition does not find any + // custom element definition. + assert_false(el1 instanceof Element1, "element 1 must still not be upgraded after upgrading the template contents"); + assert_false(el2 instanceof Element2, "element 2 must still not be upgraded after upgrading the template contents"); + assert_false(el3 instanceof Element3, "element 3 must still not be upgraded after upgrading the template contents"); + assert_false(el4 instanceof Element4, "element 4 must still not be upgraded after upgrading the template contents"); + assert_false(el5 instanceof Element5, "element 5 must still not be upgraded after upgrading the template contents"); +}, "Elements inside a template contents DocumentFragment node"); +</script> |