Bug 1667836 - Fix some bugs in PerformanceEventTiming related tests r=smaug

Differential Revision: https://phabricator.services.mozilla.com/D102038

dom/tests/mochitest/bugs/test_toJSON.html

@@ -26,6 +26,10 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=760851
   window.performance.onresourcetimingbufferfull = function() {};
 
   function checkAttributesMatch(obj, jsonObj) {
+    // EventCounts isn't going to converted to a JSON string
+    if (obj instanceof EventCounts) {
+      return;
+    }
     if (typeof(obj) !== "object") {
       throw "Expected obj to be of type \"object\". Test failed.";
     }

testing/web-platform/tests/event-timing/crossiframe.html

@@ -72,10 +72,13 @@
     });
     const childFrameEntriesPromise = new Promise(resolve => {
       window.addEventListener("message", (event) => {
-        t.step(() => {
-          validateChildFrameEntries(event.data);
-        });
-        resolve();
+        // testdriver-complete is a webdriver internal event
+        if (event.data.type != "testdriver-complete") {
+          t.step(() => {
+            validateChildFrameEntries(event.data);
+          });
+          resolve();
+        }
       }, false);
     });
     let iframe = document.getElementById('iframe');

testing/web-platform/tests/event-timing/mouseenter.html

@@ -12,7 +12,8 @@
 <div id='target'>Target</div>
 <script>
   promise_test(async t => {
-    return testEventType(t, 'mouseenter');
+    // PointerMove also creates mouseenter events on the body
+    return testEventType(t, 'mouseenter', true);
   })
 </script>
 </html>

testing/web-platform/tests/event-timing/mouseleave.html

@@ -12,7 +12,8 @@
 <div id='target'>Target</div>
 <script>
   promise_test(async t => {
-    return testEventType(t, 'mouseleave');
+    // Loose event because a mouseleave from html -> body also occurs
+    return testEventType(t, 'mouseleave', true);
   })
 </script>
 </html>

testing/web-platform/tests/event-timing/pointerenter.html

@@ -12,7 +12,9 @@
 <div id='target'>Target</div>
 <script>
   promise_test(async t => {
-    return testEventType(t, 'pointerenter');
+    // A looseCount because the first move of pointerenter causes a
+    // `pointerenter` on body
+    return testEventType(t, 'pointerenter', true);
   })
 </script>
 </html>

testing/web-platform/tests/event-timing/pointerleave.html

@@ -12,7 +12,8 @@
 <div id='target'>Target</div>
 <script>
   promise_test(async t => {
-    return testEventType(t, 'pointerleave');
+    // Loose event because a pointerleave from html -> body also occurs
+    return testEventType(t, 'pointerleave', true);
   })
 </script>
 </html>

testing/web-platform/tests/event-timing/resources/event-timing-test-utils.js

@@ -70,6 +70,13 @@ function clickAndBlockMain(id) {
   });
 }
 
+function waitForTick() {
+  return new Promise(resolve => {
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(resolve);
+    });
+  });
+}
   // Add a PerformanceObserver and observe with a durationThreshold of |dur|. This test will
   // attempt to check that the duration is appropriately checked by:
   // * Asserting that entries received have a duration which is the smallest multiple of 8
@@ -150,11 +157,12 @@ function applyAction(eventType, target) {
     // Reset by clicking outside of the target.
     .pointerMove(0, 0)
     .pointerDown()
-    .pointerUp();
   } else if (eventType === 'mouseenter' || eventType === 'mouseover'
       || eventType === 'pointerenter' || eventType === 'pointerover') {
     // Move outside of the target and then back inside.
-    actions.pointerMove(0, 0)
+    // Moving it to 0, 1 because 0, 0 doesn't cause the pointer to
+    // move in Firefox. See https://github.com/w3c/webdriver/issues/1545
+    actions.pointerMove(0, 1)
     .pointerMove(0, 0, {origin: target});
   } else if (eventType === 'mouseleave' || eventType === 'mouseout'
       || eventType === 'pointerleave' || eventType === 'pointerout') {
@@ -219,6 +227,7 @@ async function testEventType(t, eventType, looseCount=false) {
   // Trigger two 'fast' events of the type.
   await applyAction(eventType, target);
   await applyAction(eventType, target);
+  await waitForTick();
   await new Promise(t.step_func(resolve => {
     testCounts(t, resolve, looseCount, eventType, initialCount + 2);
   }));
@@ -260,6 +269,9 @@ async function testEventType(t, eventType, looseCount=false) {
     })).observe({type: 'event', durationThreshold: durationThreshold});
   });
   // Cause a slow event.
-  let actionPromise = applyAction(eventType, target);
-  return Promise.all([actionPromise, observerPromise]);
+  await applyAction(eventType, target);
+
+  await waitForTick();
+
+  await observerPromise;
 }