diff options
Diffstat (limited to '')
-rw-r--r-- | dom/tests/mochitest/webcomponents/test_custom_element_in_shadow.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_in_shadow.html b/dom/tests/mochitest/webcomponents/test_custom_element_in_shadow.html new file mode 100644 index 0000000000..4371d296ce --- /dev/null +++ b/dom/tests/mochitest/webcomponents/test_custom_element_in_shadow.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1087460 +--> +<head> + <title>Test for custom element callbacks in shadow DOM.</title> + <script type="text/javascript" src="head.js"></script> + <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=1087460">Bug 1087460</a> + +<script> + +SimpleTest.waitForExplicitFinish(); + +var content = '<div id="container"></div>'; +createIframe(content) + .then((aDocument) => { + + // Test callback for custom element when used after registration. + + var iframeWin = aDocument.defaultView; + var connectedCallbackCount = 0; + var disconnectedCallbackCount = 0; + var attributeChangedCallbackCount = 0; + + class Foo extends iframeWin.HTMLElement + { + connectedCallback() { + connectedCallbackCount++; + } + + disconnectedCallback() { + disconnectedCallbackCount++; + } + + attributeChangedCallback(aName, aOldValue, aNewValue) { + attributeChangedCallbackCount++; + } + + static get observedAttributes() { + return ["data-foo"]; + } + } + + iframeWin.customElements.define("x-foo", Foo); + + var container = aDocument.getElementById("container"); + var shadow = container.attachShadow({mode: "open"}); + var customElem = aDocument.createElement("x-foo"); + + is(attributeChangedCallbackCount, 0, "attributeChangedCallback should not be called after just creating an element."); + customElem.setAttribute("data-foo", "bar"); + is(attributeChangedCallbackCount, 1, "attributeChangedCallback should be called after setting an attribute."); + + is(connectedCallbackCount, 0, "connectedCallback should not be called on an element that is not in a document/composed document."); + shadow.appendChild(customElem); + is(connectedCallbackCount, 1, "connectedCallback should be called after attaching custom element to the composed document."); + + is(disconnectedCallbackCount, 0, "disconnectedCallback should not be called without detaching custom element."); + shadow.removeChild(customElem); + is(disconnectedCallbackCount, 1, "disconnectedCallback should be called after detaching custom element from the composed document."); + + // Test callback for custom element already in the composed doc when created. + + connectedCallbackCount = 0; + disconnectedCallbackCount = 0; + attributeChangedCallbackCount = 0; + + shadow.innerHTML = "<x-foo></x-foo>"; + is(connectedCallbackCount, 1, "connectedCallback should be called after creating an element in the composed document."); + + shadow.innerHTML = ""; + is(disconnectedCallbackCount, 1, "disconnectedCallback should be called after detaching custom element from the composed document."); + + // Test callback for custom element in shadow DOM when host attached/detached to/from document. + + connectedCallbackCount = 0; + disconnectedCallbackCount = 0; + attributeChangedCallbackCount = 0; + + var host = aDocument.createElement("div"); + shadow = host.attachShadow({mode: "open"}); + customElem = aDocument.createElement("x-foo"); + + is(connectedCallbackCount, 0, "connectedCallback should not be called on newly created element."); + shadow.appendChild(customElem); + is(connectedCallbackCount, 0, "connectedCallback should not be called on attaching to a tree that is not in the composed document."); + + is(disconnectedCallbackCount, 0, "disconnectedCallback should not be called."); + shadow.removeChild(customElem); + is(disconnectedCallbackCount, 0, "disconnectedCallback should not be called when detaching from a tree that is not in the composed document."); + + shadow.appendChild(customElem); + is(connectedCallbackCount, 0, "connectedCallback should still not be called after reattaching to a shadow tree that is not in the composed document."); + + container.appendChild(host); + is(connectedCallbackCount, 1, "connectedCallback should be called after host is inserted into document."); + + container.removeChild(host); + is(disconnectedCallbackCount, 1, "disconnectedCallback should be called after host is removed from document."); + + // Test callback for custom element for upgraded element. + + connectedCallbackCount = 0; + disconnectedCallbackCount = 0; + attributeChangedCallbackCount = 0; + + shadow = container.shadowRoot; + shadow.innerHTML = "<x-bar></x-bar>"; + + class Bar extends iframeWin.HTMLElement { + connectedCallback() { + connectedCallbackCount++; + } + }; + + iframeWin.customElements.define("x-bar", Bar); + is(connectedCallbackCount, 1, "connectedCallback should be called after upgrading element in composed document."); + + SimpleTest.finish(); + }); +</script> + +</body> +</html> |