diff options
Diffstat (limited to 'dom/tests/mochitest/webcomponents/test_custom_element_set_element_creation_callback.html')
-rw-r--r-- | dom/tests/mochitest/webcomponents/test_custom_element_set_element_creation_callback.html | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_set_element_creation_callback.html b/dom/tests/mochitest/webcomponents/test_custom_element_set_element_creation_callback.html new file mode 100644 index 0000000000..6a8f127d93 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/test_custom_element_set_element_creation_callback.html @@ -0,0 +1,159 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1460815 +--> +<head> + <title>Test for customElements.setElementCreationCallback</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1460815">Bug 1460815</a> +<div> +</div> + +<script> + +let registry = SpecialPowers.wrap(customElements); + +function simpleTest() { + let callbackCalled = false; + class XObjElement extends HTMLElement {}; + registry.setElementCreationCallback("x-html-obj-elem", (type) => { + if (callbackCalled) { + ok(false, "Callback should not be invoked more than once."); + } + callbackCalled = true; + is(type, "x-html-obj-elem", "Type is passed to the callback."); + customElements.define("x-html-obj-elem", XObjElement); + }); + ok(!callbackCalled, "Callback should not be called."); + let el = document.createElement("x-html-obj-elem"); + ok(callbackCalled, "Callback should be called."); + is(Object.getPrototypeOf(el), XObjElement.prototype, "Created element should have the prototype of the custom type."); +} + +function multipleDefinitionTest() { + let callbackCalled = false; + class XObjElement1 extends HTMLElement {}; + class XObjElement2 extends HTMLElement {}; + let callback = (type) => { + if (callbackCalled) { + ok(false, "Callback should not be invoked more than once."); + } + callbackCalled = true; + is(type, "x-html-obj-elem1", "Type is passed to the callback."); + customElements.define("x-html-obj-elem1", XObjElement1); + customElements.define("x-html-obj-elem2", XObjElement2); + }; + registry.setElementCreationCallback("x-html-obj-elem1", callback); + registry.setElementCreationCallback("x-html-obj-elem2", callback); + ok(!callbackCalled, "Callback should not be called."); + let el1 = document.createElement("x-html-obj-elem1"); + ok(callbackCalled, "Callback should be called."); + is(Object.getPrototypeOf(el1), XObjElement1.prototype, "Created element should have the prototype of the custom type."); + let el2 = document.createElement("x-html-obj-elem2"); + is(Object.getPrototypeOf(el2), XObjElement2.prototype, "Created element should have the prototype of the custom type."); +} + +function throwIfDefined() { + let callbackCalled = false; + class XObjElement3 extends HTMLElement {}; + customElements.define("x-html-obj-elem3", XObjElement3); + try { + registry.setElementCreationCallback( + "x-html-obj-elem3", () => callbackCalled = true); + } catch (e) { + ok(true, "Set a callback on defined type should throw."); + } + ok(!callbackCalled, "Callback should not be called."); +} + +function throwIfSetTwice() { + let callbackCalled = false; + registry.setElementCreationCallback( + "x-html-obj-elem4", () => callbackCalled = true); + try { + registry.setElementCreationCallback( + "x-html-obj-elem4", () => callbackCalled = true); + } catch (e) { + ok(true, "Callack shouldn't be set twice on the same type."); + } + ok(!callbackCalled, "Callback should not be called."); +} + +function simpleExtendedTest() { + let callbackCalled = false; + class ExtendButton extends HTMLButtonElement {}; + registry.setElementCreationCallback("x-extended-button", (type) => { + if (callbackCalled) { + ok(false, "Callback should not be invoked more than once."); + } + callbackCalled = true; + customElements.define("x-extended-button", ExtendButton, { extends: "button" }); + is(type, "x-extended-button", "Type is passed to the callback."); + }); + ok(!callbackCalled, "Callback should not be called."); + let el = document.createElement("button", { is: "x-extended-button"}); + ok(callbackCalled, "Callback should be called."); + is(Object.getPrototypeOf(el), ExtendButton.prototype, "Created element should have the prototype of the extended type."); + is(el.getAttribute("is"), null, "The |is| attribute of the created element should not be the extended type."); +} + +function simpleInnerHTMLTest() { + let callbackCalled = false; + class XObjElement4 extends HTMLElement {}; + registry.setElementCreationCallback("x-html-obj-elem5", (type) => { + if (callbackCalled) { + ok(false, "Callback should not be invoked more than once."); + } + callbackCalled = true; + is(type, "x-html-obj-elem5", "Type is passed to the callback."); + customElements.define("x-html-obj-elem5", XObjElement4); + }); + ok(!callbackCalled, "Callback should not be called."); + let p = document.createElement("p"); + p.innerHTML = "<x-html-obj-elem5></x-html-obj-elem5>"; + let el = p.firstChild; + ok(callbackCalled, "Callback should be called."); + is(Object.getPrototypeOf(el), XObjElement4.prototype, "Created element should have the prototype of the custom type."); +} + +function twoElementInnerHTMLTest() { + let callbackCalled = false; + class XObjElement5 extends HTMLElement {}; + registry.setElementCreationCallback("x-html-obj-elem6", (type) => { + if (callbackCalled) { + ok(false, "Callback should not be invoked more than once."); + } + callbackCalled = true; + is(type, "x-html-obj-elem6", "Type is passed to the callback."); + customElements.define("x-html-obj-elem6", XObjElement5); + }); + ok(!callbackCalled, "Callback should not be called."); + let p = document.createElement("p"); + p.innerHTML = + "<x-html-obj-elem6></x-html-obj-elem6><x-html-obj-elem6></x-html-obj-elem6>"; + let el1 = p.firstChild; + let el2 = p.lastChild; + ok(callbackCalled, "Callback should be called."); + is(Object.getPrototypeOf(el1), XObjElement5.prototype, "Created element should have the prototype of the custom type."); + is(Object.getPrototypeOf(el2), XObjElement5.prototype, "Created element should have the prototype of the custom type."); +} + +function startTest() { + simpleTest(); + multipleDefinitionTest(); + throwIfDefined(); + throwIfSetTwice(); + simpleExtendedTest(); + simpleInnerHTMLTest(); + twoElementInnerHTMLTest(); +} + +startTest(); + +</script> +</body> +</html> |