Updated pointerevents/mouse-pointer-boundary-events-for-shadowdom.htm…

…l to not fail when pointer and mouse events are interleaved (web-platform-tests#47395)
cookiecrook · Aug 21, 2024 · dcb5b17 · dcb5b17
1 parent e9e8354
commit dcb5b17
Showing 1 changed file with 61 additions and 49 deletions.
diff --git a/pointerevents/mouse-pointer-boundary-events-for-shadowdom.html b/pointerevents/mouse-pointer-boundary-events-for-shadowdom.html
@@ -12,63 +12,75 @@ <h1>PointerEvent: Verifies that mouse boundary events don't point to shadow-dom<
 <input id="target" style="margin: 20px">
 
 <script>
-function name(node) {
-  return node? node.tagName : "(null)";
-}
+  function name(node) {
+    return node? node.tagName : "(null)";
+  }
 
-promise_test(async () => {
-  var targetEvents = ["mouseout", "pointerout", "mouseover", "pointerover"];
-  var receivedEvents = [];
-  var moveReceived = false;
+  function get_event_details(e) {
+      return e.type + " target=" + name(e.target) + " relatedTarget=" + name(e.relatedTarget);
+  }
 
+  function events_match_expected(actualEvents, expectedEventDetails) {
+      if (actualEvents.length != expectedEventDetails.length)
+        return false;
 
-  targetEvents.forEach(function(eventName) {
-    window.addEventListener(eventName, function(e) {
-      var eventDetails = e.type +
-                         " target=" + name(e.target) +
-                         " relatedTarget=" + name(e.relatedTarget);
-      receivedEvents.push(eventDetails);
+      let actualEventDetails = actualEvents.map(e => get_event_details(e));
+      return (expectedEventDetails.every(expected => actualEventDetails.includes(expected)) &&
+              arePointerEventsBeforeCompatMouseEvents(actualEvents) &&
+              actualEventDetails[0] == expectedEventDetails[0]);
+  }
+
+  promise_test(async () => {
+    let rect = document.getElementById("target").getBoundingClientRect();
+    let targetEvents = ["mouseout", "pointerout", "mouseover", "pointerover"];
+    let receivedEvents = [];
+    var moveReceived = false;
+
+    targetEvents.forEach(function(eventName) {
+      window.addEventListener(eventName, function(e) {
+        receivedEvents.push(e);
+      });
     });
-  });
-  window.addEventListener('pointermove', () => { moveReceived = true; });
-  var rect = document.getElementById("target").getBoundingClientRect();
 
-  await new test_driver.Actions()
-             .addPointer("default-mouse")
-             .pointerMove(Math.ceil(rect.left - 10), Math.ceil(rect.top - 10))
-             .send()
-  await resolveWhen(() => { return moveReceived == true });
-  receivedEvents = [];
-  moveReceived = false;
+    window.addEventListener('pointermove', () => { moveReceived = true; });
 
-  await new test_driver.Actions()
-             .addPointer("default-mouse")
-             .pointerMove(Math.ceil(rect.left + 10), Math.ceil(rect.top + 10))
-             .send()
-  await resolveWhen(() => { return moveReceived == true });
+    await new test_driver.Actions()
+               .addPointer("default-mouse")
+               .pointerMove(Math.ceil(rect.left - 10), Math.ceil(rect.top - 10))
+               .send()
+    await resolveWhen(() => { return moveReceived == true });
 
-  assert_array_equals(receivedEvents, [
-    "pointerout target=BODY relatedTarget=INPUT",
-    "pointerover target=INPUT relatedTarget=BODY",
-    "mouseout target=BODY relatedTarget=INPUT",
-    "mouseover target=INPUT relatedTarget=BODY",
-  ], "Moved into <input>");
+    moveReceived = false;
+    receivedEvents.length = 0;
+    await new test_driver.Actions()
+               .addPointer("default-mouse")
+               .pointerMove(Math.ceil(rect.left + 10), Math.ceil(rect.top + 10))
+               .send()
+    await resolveWhen(() => { return moveReceived == true });
 
+    let intoInputExpected = [
+      "pointerout target=BODY relatedTarget=INPUT",
+      "pointerover target=INPUT relatedTarget=BODY",
+      "mouseout target=BODY relatedTarget=INPUT",
+      "mouseover target=INPUT relatedTarget=BODY",
+    ];
+    assert_true(events_match_expected(receivedEvents, intoInputExpected), "Moved into <input>");
 
-  receivedEvents = [];
-  moveReceived = false;
 
-  await new test_driver.Actions()
-             .addPointer("default-mouse")
-             .pointerMove(Math.ceil(rect.left - 10), Math.ceil(rect.top - 10))
-             .send()
-  await resolveWhen(() => { return moveReceived == true });
+    moveReceived = false;
+    receivedEvents.length = 0;
+    await new test_driver.Actions()
+               .addPointer("default-mouse")
+               .pointerMove(Math.ceil(rect.left - 10), Math.ceil(rect.top - 10))
+               .send()
+    await resolveWhen(() => { return moveReceived == true });
 
-  assert_array_equals(receivedEvents, [
-    "pointerout target=INPUT relatedTarget=BODY",
-    "pointerover target=BODY relatedTarget=INPUT",
-    "mouseout target=INPUT relatedTarget=BODY",
-    "mouseover target=BODY relatedTarget=INPUT",
-  ], "Moved out of <input>");
-}, "PointerEvent: Verifies that mouse boundary events don't point to shadow-dom");
-</script>
+    let outOfInputExpected = [
+      "pointerout target=INPUT relatedTarget=BODY",
+      "pointerover target=BODY relatedTarget=INPUT",
+      "mouseout target=INPUT relatedTarget=BODY",
+      "mouseover target=BODY relatedTarget=INPUT",
+    ];
+    assert_true(events_match_expected(receivedEvents, outOfInputExpected), "Moved out of <input>");
+  }, "PointerEvent: Verifies that mouse boundary events don't point to shadow-dom");
+</script>