Make CSSTransition startTime test timeout when waiting for transition…

… events after a fixed number of frames

See bug 1467344 comment 34.

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

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1484148
gecko-commit: dfac768978de71ff96351842189f4f242f0d99fc
gecko-integration-branch: mozilla-inbound
gecko-reviewers: hiro

css/css-transitions/CSSTransition-startTime.tentative.html

@@ -107,10 +107,18 @@
   const timelineTime = animation.timeline.currentTime;
 
   animation.startTime = timelineTime - 100 * MS_PER_SEC;
-  await eventWatcher.wait_for('transitionstart');
+  await frameTimeout(
+    eventWatcher.wait_for('transitionstart'),
+    2,
+    'transitionstart'
+  );
 
   animation.startTime = timelineTime - 200 * MS_PER_SEC;
-  await eventWatcher.wait_for('transitionend');
+  await frameTimeout(
+    eventWatcher.wait_for('transitionend'),
+    2,
+    'transitionend'
+  );
 }, 'Seeking a transition using start time dispatches transition events');
 
 </script>

css/css-transitions/support/helper.js

@@ -275,4 +275,45 @@ root.waitForAnimationFrames = (frameCount, onFrame) => {
 root.waitForAllAnimations = animations =>
   Promise.all(animations.map(animation => animation.ready));
 
+/**
+ * Utility that takes a Promise and a maximum number of frames to wait and
+ * returns a new Promise that behaves as follows:
+ *
+ * - If the provided Promise resolves _before_ the specified number of frames
+ *   have passed, resolves with the result of the provided Promise.
+ * - If the provided Promise rejects _before_ the specified number of frames
+ *   have passed, rejects with the error result of the provided Promise.
+ * - Otherwise, rejects with a 'Timed out' error message. If |message| is
+ *   provided, it will be appended to the error message.
+ */
+root.frameTimeout = (promiseToWaitOn, framesToWait, message) => {
+  let framesRemaining = framesToWait;
+  let aborted = false;
+
+  const timeoutPromise = new Promise(function waitAFrame(resolve, reject) {
+    if (aborted) {
+      resolve();
+      return;
+    }
+    if (framesRemaining-- > 0) {
+      requestAnimationFrame(() => {
+        waitAFrame(resolve, reject);
+      });
+      return;
+    }
+    let errorMessage = 'Timed out waiting for Promise to resolve';
+    if (message) {
+      errorMessage += `: ${message}`;
+    }
+    reject(new Error(errorMessage));
+  });
+
+  const wrappedPromiseToWaitOn = promiseToWaitOn.then(result => {
+    aborted = true;
+    return result;
+  });
+
+  return Promise.race([timeoutPromise, wrappedPromiseToWaitOn]);
+};
+
 })(window);