1 files changed, 152 insertions, 0 deletions
diff --git a/testing/web-platform/tests/uievents/mouse/mouse_boundary_events_after_reappending_last_over_target.tentative.html b/testing/web-platform/tests/uievents/mouse/mouse_boundary_events_after_reappending_last_over_target.tentative.html
new file mode 100644
index 0000000000..f75404ad78
--- /dev/null
+++ b/testing/web-platform/tests/uievents/mouse/mouse_boundary_events_after_reappending_last_over_target.tentative.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Temporary removal of "mouseover" target should not be considered as the last over element is changed</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/resources/testdriver.js></script>
+<script src=/resources/testdriver-actions.js></script>
+<script src=/resources/testdriver-vendor.js></script>
+<script>
+"use strict";
+
+function stringifyEvents(eventArray) {
+  if (!eventArray.length) {
+    return "[]";
+  }
+  let result = "";
+  eventArray.forEach(event => {
+    if (result != "") {
+      result += ", ";
+    }
+    result += `${event.type}@${
+      event.target?.nodeType == Node.ELEMENT_NODE
+        ? `${event.target.localName}${
+            event.target.id ? `#${event.target.id}` : ""
+          }`
+        : event.target?.localName
+    }`;
+  });
+  return result;
+}
+
+addEventListener("load", () => {
+  function promiseTick() {
+    return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+  }
+
+  function append3NestedDivElementsToBody() {
+    const div1 = document.createElement("div");
+    div1.setAttribute("id", "grandparent");
+    div1.setAttribute("style", "width: 32px; height: 32px; margin: 32px");
+    const div2 = document.createElement("div");
+    div2.setAttribute("id", "parent");
+    div2.setAttribute("style", "width: 32px; height: 32px");
+    const div3 = document.createElement("div");
+    div3.setAttribute("id", "child");
+    div3.setAttribute("style", "width: 32px; height: 32px");
+    div1.appendChild(div2);
+    div2.appendChild(div3);
+    document.body.appendChild(div1);
+    return { div1, div2, div3 };
+  }
+
+  promise_test(async () => {
+    const {div1, div2, div3} = append3NestedDivElementsToBody();
+    const bodyRect = document.body.getBoundingClientRect();
+    const div3Rect = div3.getBoundingClientRect();
+    let events = [];
+    for (const type of ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemove"]) {
+      for (const node of [document.body, div1, div2, div3]) {
+        node.addEventListener(type, event => {
+          if (event.target == node) {
+            events.push({type: event.type, target: event.target});
+          }
+        }, {capture: true});
+      }
+    }
+    let firstMouseOver = true;
+    div3.addEventListener("mouseover", event => {
+      // Temporarily remove div3 from div2, but append to the same position.
+      div2.appendChild(div3);
+      events = [];
+      events.push({type: event.type, target: event.target});
+    }, {once: true});
+    await new test_driver.Actions()
+      .pointerMove(1, 1, {})
+      .pointerMove(div3Rect.x + 10, div3Rect.y + 10, {})
+      .send();
+    const expectedEvents = [
+      { type: "mouseover", target: div3 },
+      { type: "mouseenter", target: document.body },
+      { type: "mouseenter", target: div1 },
+      { type: "mouseenter", target: div2 },
+      { type: "mouseenter", target: div3 },
+      { type: "mousemove", target: div3 },
+      // Removing the node temporarily should not cause mouse boundary events.
+    ];
+    assert_equals(
+      stringifyEvents(events),
+      stringifyEvents(expectedEvents),
+    );
+    div1.remove();
+    await new test_driver.Actions()
+      .pointerMove(1, 1, {})
+      .send();
+  },
+  "After re-appending the last over element at mouseover, " +
+  "mouse boundary events should be fired as just over on the target");
+
+  promise_test(async () => {
+    const {div1, div2, div3} = append3NestedDivElementsToBody();
+    const bodyRect = document.body.getBoundingClientRect();
+    const div3Rect = div3.getBoundingClientRect();
+    let events = [];
+    for (const type of ["mouseenter", "mouseleave", "mouseover", "mouseout", "mousemove"]) {
+      for (const node of [document.body, div1, div2, div3]) {
+        node.addEventListener(type, event => {
+          if (event.target == node) {
+            events.push({type: event.type, target: event.target});
+          }
+        }, {capture: true});
+      }
+    }
+    div3.addEventListener("mouseover", event => {
+      div3.addEventListener("mouseenter", () => {
+        // Temporarily remove div3 from div2, but append to the same position.
+        div2.appendChild(div3);
+      }, {once: true});
+      events = [];
+      events.push({type: event.type, target: event.target});
+    }, {once: true});
+    await new test_driver.Actions()
+      .pointerMove(1, 1, {})
+      .pointerMove(div3Rect.x + 10, div3Rect.y + 10, {})
+      .send();
+    const expectedEvents = [
+      { type: "mouseover", target: div3 },
+      { type: "mouseenter", target: document.body },
+      { type: "mouseenter", target: div1 },
+      { type: "mouseenter", target: div2 },
+      { type: "mouseenter", target: div3 },
+      { type: "mousemove", target: div3 },
+      // Removing the node temporarily should not cause mouse boundary events.
+    ];
+    assert_equals(
+      stringifyEvents(events),
+      stringifyEvents(expectedEvents),
+    );
+    div1.remove();
+    await new test_driver.Actions()
+      .pointerMove(1, 1, {})
+      .send();
+  },
+  "After re-appending the last over element at mouseenter, " +
+  "mouse boundary events should not be fired");
+}, {once: true});
+</script>
+</head>
+<body style="padding-top: 32px"></body>
+</html>