Bug 1339648 - Fix flaky file_transitions_replacement_on_busy_frame.html test; r=hiro

There are two issues with this test:

(a) It fails to flush style when it intends to trigger the first transition.

    Specifically, `getComputedStyle(div)` alone does not flush style. Instead we
    need `getComputedStyle(div).transform`.

    This patch replaces that line with a call to `div.getAnimations()` which
    *does* flush style ensuring the first transition is triggered.

(b) It fails to ensure that the first transition has progressed past the first
    frame on the main thread before triggering the second transition.

    If the first transition is still on its first frame, the computed value of
    'transform' will be 'matrix(1, 0, 0, 1, 0, 0)'. If we then update the
    specified value of 'transform' to 'translateX(0px)', no transition will be
    generated (although the first transition will be canceled) since there is no
    change.

    This patch fixes that by making the end point of the second transition NOT
    match the start point of the first transition (and not be somewhere inside
    the range of the first transition).

As an extra precautionary measure, to be sure that the animation has started
progressing on both the main thread and compositor, this patch alters the
initial wait condition for the first transition to also wait on the first
transition's ready promise.

MozReview-Commit-ID: E1OJuHBSMfr

--HG--
extra : rebase_source : aede0fa00f261e1c7d1be61857b6fd0537a0f7e7

layout/style/test/file_transitions_replacement_on_busy_frame.html

@@ -7,6 +7,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1167519
   <meta charset=utf-8>
   <script type="application/javascript"
     src="/tests/SimpleTest/paint_listener.js"></script>
+  <script src="animation_utils.js"></script>
   <style>
     #target {
       height: 100px;
@@ -41,24 +42,28 @@ window.addEventListener("load", function() {
   }
 
   var div = document.getElementById("target");
+
   // Start first transition
   div.style.transform = "translateX(300px)";
-  getComputedStyle(div);
+  const firstTransition = div.getAnimations()[0];
 
-  // Wait for a paint to ensure that the first transition has started.
-  waitForAllPaints(function() {
+  // Wait for first transition to start running on the main thread and
+  // compositor.
+  firstTransition.ready.then(waitForPaints).then(() => {
     var previousPropertyValue;
     var previousKeyframeValue;
-    var anim;
+    var secondTransition;
+
     requestAnimationFrame(function() {
       // Start second transition
-      div.style.transform = "translateX(0px)";
-      getComputedStyle(div).transform;
+      div.style.transform = "translateX(600px)";
+      secondTransition = div.getAnimations()[0];
 
-      anim = div.getAnimations()[0];
-      var properties = SpecialPowers.wrap(anim.effect).getProperties();
+      var properties =
+        SpecialPowers.wrap(secondTransition.effect).getProperties();
       previousPropertyValue = properties[0].values[0].value;
-      previousKeyframeValue = anim.effect.getKeyframes()[0].transform;
+      previousKeyframeValue =
+        secondTransition.effect.getKeyframes()[0].transform;
     });
 
     requestAnimationFrame(function() {
@@ -74,12 +79,14 @@ window.addEventListener("load", function() {
       // requestAnimationFrame callback is run (and it is during the paint
       // process that we update the transition start point).
       waitForAllPaints(function() {
-        var properties = SpecialPowers.wrap(anim.effect).getProperties();
+        var properties =
+          SpecialPowers.wrap(secondTransition.effect).getProperties();
         var currentPropertyValue = properties[0].values[0].value;
         isnot(currentPropertyValue, previousPropertyValue,
               "From value of transition is updated since the moment when " +
               "it was generated");
-        isnot(anim.effect.getKeyframes()[0].transform, previousKeyframeValue,
+        isnot(secondTransition.effect.getKeyframes()[0].transform,
+              previousKeyframeValue,
               "Keyframe value of transition is updated since the moment when " +
               "it was generated");
         finish();