Bug 1275718 - Part 2: Check the new transition position with KeyframeEffectReadOnly.getProperties(). r=birtles, a=test-only
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Tue, 07 Jun 2016 15:56:07 +0900
changeset 339683 184867bc86ef1f841e0879b6e2635308d3e79e73
parent 339682 cc3c9a349ba128aa6664ca987595f9fa3415e293
child 339684 5d89998e40c6e58ccc12045276e88aa7f67db3e4
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles, test-only
bugs1275718
milestone49.0a2
Bug 1275718 - Part 2: Check the new transition position with KeyframeEffectReadOnly.getProperties(). r=birtles, a=test-only 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
layout/style/test/file_transitions_replacement_on_busy_frame.html
--- a/layout/style/test/file_transitions_replacement_on_busy_frame.html
+++ b/layout/style/test/file_transitions_replacement_on_busy_frame.html
@@ -2,33 +2,32 @@
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=1167519
 -->
 <head>
   <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;
       width: 100px;
       background: green;
       transition: transform 100s linear;
     }
   </style>
 </head>
 <body>
 <div id="target"></div>
 <script>
 '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;
   self.close();
   o.SimpleTest.finish();
 }
 
 var OMTAPrefKey = "layers.offmainthreadcomposition.async-animations";
@@ -44,49 +43,46 @@ window.addEventListener("load", function
   var div = document.getElementById("target");
   // Start first transition
   div.style.transform = "translateX(300px)";
   getComputedStyle(div);
 
   // 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() {
       // Tie up main thread for 300ms. In the meantime, the first transition
       // will continue running on the compositor. If we don't update the start
       // point of the second transition, it will appear to jump when it starts.
       var startTime = performance.now();
       while (performance.now() - startTime < 300);
 
       // Ensure that our paint process has been done.
       // Note that requestAnimationFrame is not suitable here since on Android
       // there is a case where the paint process has not completed even when the
       // 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();
       });
     });
   });
 });
 
 </script>
 </body>
 </html>