Bug 1275718 - Part 2: Check the new transition position with KeyframeEffectReadOnly.getProperties(). r=birtles

We should just check the from value of the new transition instead of
checking computed style.  That's because the new transition moves back
to the original position while we are waiting for the callback of paints.
For example, on Android, thumbnail creation is sometimes processed between
paints and callbacks. (Gecko's main loop spins after paints process, most
of callbacks are processed there)

MozReview-Commit-ID: JyJsmEuIiKn

--HG--
extra : rebase_source : 80d1f6500ae2ba93ea034c622e59576ef60d09bb

layout/style/test/file_transitions_replacement_on_busy_frame.html

@@ -7,7 +7,6 @@ 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 type="application/javascript" src="animation_utils.js"></script>
   <style>
     #target {
       height: 100px;
@@ -23,7 +22,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1167519
 'use strict';
 
 var ok = opener.ok.bind(opener);
-var info = opener.info.bind(opener);
+var isnot = opener.isnot.bind(opener);
 
 function finish() {
   var o = opener;
@@ -49,11 +48,15 @@ window.addEventListener("load", function() {
   // Wait for a paint to ensure that the first transition has started.
   waitForAllPaints(function() {
     var previousMatrix;
+    var anim;
     requestAnimationFrame(function() {
       // Start second transition
       div.style.transform = "translateX(0px)";
-      previousMatrix =
-        convertTo3dMatrix(getComputedStyle(div).transform);
+      getComputedStyle(div).transform;
+
+      anim = div.getAnimations()[0];
+      var properties = SpecialPowers.wrap(anim.effect).getProperties();
+      previousMatrix = properties[0].values[0].value;
     });
 
     requestAnimationFrame(function() {
@@ -69,19 +72,12 @@ 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 anim = div.getAnimations()[0];
-        anim.pause();
-
-        // Wait for being animated style updated by animation.pause().
-        anim.ready.then(function() {
-          var currentMatrix =
-            convertTo3dMatrix(getComputedStyle(div).transform);
-          // Now the position on x-axis should be at least 300ms ahead.
-          var difference = 0.9; // 300px / (100s / 300ms)
-          ok(currentMatrix[3][0] - previousMatrix[3][0] >= difference,
-             currentMatrix + " should be advanced ahead of " + previousMatrix);
-          finish();
-        });
+        var properties = SpecialPowers.wrap(anim.effect).getProperties();
+        var currentMatrix = properties[0].values[0].value;
+        isnot(currentMatrix, previousMatrix,
+              "From value of transition is updated since the moment when " +
+              "it was generated");
+        finish();
       });
     });
   });