summaryrefslogtreecommitdiffstats
path: root/dom/tests/mochitest/webcomponents/test_event_retarget.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
commit2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
treeb80bf8bf13c3766139fbacc530efd0dd9d54394c /dom/tests/mochitest/webcomponents/test_event_retarget.html
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'dom/tests/mochitest/webcomponents/test_event_retarget.html')
-rw-r--r--dom/tests/mochitest/webcomponents/test_event_retarget.html153
1 files changed, 153 insertions, 0 deletions
diff --git a/dom/tests/mochitest/webcomponents/test_event_retarget.html b/dom/tests/mochitest/webcomponents/test_event_retarget.html
new file mode 100644
index 0000000000..05b4fa3ebe
--- /dev/null
+++ b/dom/tests/mochitest/webcomponents/test_event_retarget.html
@@ -0,0 +1,153 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=887541
+-->
+<head>
+ <title>Test for event retargeting in web components</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=887541">Bug 887541</a>
+<script>
+
+SimpleTest.waitForExplicitFinish();
+createIframe()
+ .then((aDocument) => {
+ /*
+ * Creates an event listener with an expected event target.
+ */
+ function createEventListener(expectedTarget, msg) {
+ return function(e) {
+ is(e.target, expectedTarget, msg);
+ };
+ }
+
+ /*
+ * Test of event retargeting through a basic ShadowRoot with a content insertion point.
+ *
+ * <div elemThree> ---- <shadow-root shadowOne>
+ * | |
+ * <div elemOne> <content elemTwo>
+ *
+ * Dispatch event on elemOne
+ */
+
+ var elemOne = aDocument.createElement("div");
+ var elemTwo = aDocument.createElement("content");
+ var elemThree = aDocument.createElement("div");
+ var shadowOne = elemThree.attachShadow({mode: "open"});
+
+ elemThree.appendChild(elemOne);
+ shadowOne.appendChild(elemTwo);
+
+ elemOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemOne."));
+ elemTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemTwo."));
+ elemThree.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemThree."));
+ shadowOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowOne."));
+
+ var customEvent = new CustomEvent("custom", { "bubbles" : true });
+ elemOne.dispatchEvent(customEvent);
+
+ /*
+ * Test of event retargeting through a basic ShadowRoot with a content insertion point.
+ *
+ * <div elemThree> ---- <shadow-root shadowOne>
+ * | |
+ * <div elemOne> <content elemTwo>
+ *
+ * Dispatch event on elemTwo
+ */
+
+ elemOne = aDocument.createElement("div");
+ elemTwo = aDocument.createElement("content");
+ elemThree = aDocument.createElement("div");
+ shadowOne = elemThree.attachShadow({mode: "open"});
+
+ elemThree.appendChild(elemOne);
+ shadowOne.appendChild(elemTwo);
+
+ elemTwo.addEventListener("custom", createEventListener(elemTwo, "elemTwo is in common ancestor tree of elemTwo."));
+ elemThree.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of elemThree."));
+ shadowOne.addEventListener("custom", createEventListener(elemTwo, "elemTwo is in common ancestor tree of shadowOne."));
+
+ customEvent = new CustomEvent("custom", { "bubbles" : true });
+ elemTwo.dispatchEvent(customEvent);
+
+ /*
+ * Test of event retargeting through a nested ShadowRoots with content insertion points.
+ *
+ * <div elemFive> --- <shadow-root shadowTwo>
+ * | |
+ * <div elemOne> <div elemFour> ----- <shadow-root shadowOne>
+ * | |
+ * <content elemTwo> <content elemThree>
+ *
+ * Dispatch custom event on elemOne.
+ */
+
+ elemOne = aDocument.createElement("div");
+ elemTwo = aDocument.createElement("content");
+ elemThree = aDocument.createElement("content");
+ var elemFour = aDocument.createElement("div");
+ var elemFive = aDocument.createElement("div");
+ var shadowTwo = elemFive.attachShadow({mode: "open"});
+ shadowOne = elemFour.attachShadow({mode: "open"});
+
+ elemFive.appendChild(elemOne);
+ shadowTwo.appendChild(elemFour);
+ elemFour.appendChild(elemTwo);
+ shadowOne.appendChild(elemThree);
+
+ elemOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemOne."));
+ elemTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemTwo."));
+ elemThree.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemThree."));
+ elemFour.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemFour."));
+ elemFive.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemFive."));
+ shadowOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowOne."));
+ shadowTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowTwo."));
+
+ customEvent = new CustomEvent("custom", { "bubbles" : true });
+ elemOne.dispatchEvent(customEvent);
+
+ /*
+ * Test of event retargeting through a nested ShadowRoots with content insertion points.
+ *
+ * <div elemFive> --- <shadow-root shadowTwo>
+ * | |
+ * <div elemOne> <div elemFour> ----- <shadow-root shadowOne>
+ * | |
+ * <content elemTwo> <content elemThree>
+ *
+ * Dispatch custom event on elemThree.
+ */
+
+ elemOne = aDocument.createElement("div");
+ elemTwo = aDocument.createElement("content");
+ elemThree = aDocument.createElement("content");
+ elemFour = aDocument.createElement("div");
+ elemFive = aDocument.createElement("div");
+ shadowTwo = elemFive.attachShadow({mode: "open"});
+ shadowOne = elemFour.attachShadow({mode: "open"});
+
+ elemFive.appendChild(elemOne);
+ shadowTwo.appendChild(elemFour);
+ elemFour.appendChild(elemTwo);
+ shadowOne.appendChild(elemThree);
+
+ elemThree.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of elemThree."));
+ elemFour.addEventListener("custom", createEventListener(elemFour, "elemFour is in common ancestor tree of elemFour."));
+ elemFive.addEventListener("custom", createEventListener(elemFive, "elemFive is in common ancestor tree of elemFive."));
+ shadowOne.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of shadowOne."));
+ shadowTwo.addEventListener("custom", createEventListener(elemFour, "elemFour is in common ancestor tree of shadowTwo."));
+
+ customEvent = new CustomEvent("custom", { "bubbles" : true });
+ elemThree.dispatchEvent(customEvent);
+
+ SimpleTest.finish();
+ });
+</script>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-02 13:41:23 +0000