1 files changed, 97 insertions, 0 deletions
diff --git a/dom/events/test/test_slotted_mouse_event.html b/dom/events/test/test_slotted_mouse_event.html
new file mode 100644
index 0000000000..9be751e95e
--- /dev/null
+++ b/dom/events/test/test_slotted_mouse_event.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Bug 1481500: mouse enter / leave events in slotted content</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css">
+<script>
+// We move the mouse from the #host to #target, then to #child-target.
+//
+// By the time we get to #child-target, we shouldn't have fired any mouseleave.
+function runTests() {
+  let iframe = document.createElement('iframe');
+  iframe.style.width = "600px";
+  iframe.style.height = "600px";
+  document.body.appendChild(iframe);
+  iframe.onload = () => frameLoaded(iframe);
+  iframe.srcdoc = `
+    <style>
+      #child-target {
+        width: 80px;
+        height: 80px;
+        background: yellow;
+      }
+    </style>
+    <div id="host"><div id="target"><div id="child-target"></div></div></div>
+  `;
+}
+
+function frameLoaded(iframe) {
+  let host = iframe.contentDocument.getElementById('host');
+  let target = iframe.contentDocument.getElementById('target');
+  let childTarget = iframe.contentDocument.getElementById('child-target');
+  let sawHost = false;
+  let sawTarget = false;
+  let finished = false;
+
+  host.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        width: 500px;
+        height: 500px;
+        background: purple;
+      }
+      ::slotted(div) {
+        width: 200px;
+        height: 200px;
+        background: green;
+      }
+    </style>
+    <slot></slot>
+  `;
+
+  host.addEventListener("mouseenter", e => {
+    if (finished)
+      return;
+    sawHost = true;
+    ok(true, "Should fire mouseenter on the host.");
+  });
+
+  host.addEventListener("mouseleave", e => {
+    if (finished)
+      return;
+    ok(false, "Should not fire mouseleave when moving the cursor to the slotted target");
+  });
+
+  target.addEventListener("mouseenter", () => {
+    if (finished)
+      return;
+    ok(sawHost, "Should've seen the hostmouseenter already");
+    sawTarget = true;
+    ok(true, "Moving the mouse into the target should trigger a mouseenter there");
+  });
+
+  target.addEventListener("mouseleave", () => {
+    if (finished)
+      return;
+    ok(false, "Should not fire mouseleave when moving the cursor to the slotted target's child");
+  });
+
+  childTarget.addEventListener("mouseenter", () => {
+    if (finished)
+      return;
+    ok(sawTarget, "Should've seen the target mouseenter already");
+    finished = true;
+    SimpleTest.finish();
+  });
+
+  synthesizeMouseAtCenter(host, { type: "mousemove" });
+  synthesizeMouseAtCenter(target, { type: "mousemove" });
+  synthesizeMouseAtCenter(childTarget, { type: "mousemove" });
+}
+
+SimpleTest.waitForExplicitFinish();
+window.onload = () => {
+  SimpleTest.waitForFocus(runTests);
+};
+</script>