Bug 1658577 [wpt PR 24954] - PointerEvent WPT for compat mouse events…

…: fix timeout in FF and Safari, a=testonly

Automatic update from web-platform-tests
PointerEvent WPT for compat mouse events: fix timeout in FF and Safari

Different browsers fire different number of events for this test. Stop
the test when the done button is clicked instead of when a certain
number of events are fired.

There are significant differences in how browsers fire pointer events
and compatible mouse events when an element is removed from the DOM.
There is a discussion here: w3c/pointerevents#285
about the order of pointerenter events and compatible mouseenter events when an
element is removed from the DOM. Once the discussion is finalized and
there is consensus this test might have to be adjusted.

Change-Id: I5202eb7a1fcc557985279a978596c9446105f417
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2348530
Commit-Queue: Liviu Tinta <[email protected]>
Reviewed-by: Mustaq Ahmed <[email protected]>
Cr-Commit-Position: refs/heads/master@{#796943}

--

wpt-commits: fa18831077b7c6bd67d6b0c30c718b39c143299e
wpt-pr: 24954

testing/web-platform/tests/pointerevents/compat/pointerevent_compat-mouse-events-when-removing-nodes.html

@@ -5,12 +5,17 @@
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
 <script type="text/javascript" src="../pointerevent_support.js"></script>
-
+<!-- There are significant differences in how browsers fire pointer events and
+compat mouse events when elements are removed from the dom.
+There is a discussion about the order of pointer events and mouse compat events
+for this scenario in the pointer event working group (See link below)-->
+<link rel="help" href="https://github.com/w3c/pointerevents/issues/285">
 <style>
 div.box {
   margin: 5px;
   padding: 20px;
   float: left;
+  background-color:green;
 }
 #grey {
   width: 50px;
@@ -22,12 +27,14 @@ <h1>Verifies the compatibility mouse events are sent correctly when the node is
 
 <div id="grey" class="box" style="background-color:grey">
 </div>
+<button id="done">Done</button>
 
 <div id="console"></div>
 
 <script>
 
 var receivedEvents = [];
+var done_clicked = false;
 
 var eventList = ["mousedown", "mouseup", "mousemove",
                  "pointerdown", "pointerup", "pointermove"];
@@ -62,6 +69,9 @@ <h1>Verifies the compatibility mouse events are sent correctly when the node is
   });
 }
 
+var done_button = document.getElementById("done");
+done_button.addEventListener("click",()=>done_clicked=true);
+
 function performActions() {
   var rect = document.getElementById("green").getBoundingClientRect();
   var x1 = Math.ceil(rect.left + 5);
@@ -73,13 +83,13 @@ <h1>Verifies the compatibility mouse events are sent correctly when the node is
               .pointerDown()
               .pointerUp()
               .send()
-              .then( () => resolveWhen( () => receivedEvents.length == 6 ) );
+              .then(()=> test_driver.click(done_button));
 }
 
 function testScenario(targetEvent, expectedEvents, description) {
   promise_test(async () => {
-    removeNodeEvent = targetEvent;
     receivedEvents = [];
+    removeNodeEvent = targetEvent;
     createGreenBoxAndAddListeners();
 
     await performActions();