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

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"];
@@ -53,7 +60,9 @@ <h1>Verifies the compatibility mouse events are sent correctly when the node is
   eventList.forEach(function(eventName) {
     greenDiv.addEventListener(eventName, function(event) {
       if (event.eventPhase == Event.AT_TARGET) {
+
         receivedEvents.push(event.type+"@green");
+
         if (event.type == removeNodeEvent) {
           greenDiv.parentNode.removeChild(greenDiv);
         }
@@ -62,6 +71,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 +85,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();