Bug 1275718 - Part 2: Check the new transition position with KeyframeEffectReadOnly.getProperties(). r=birtles
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Tue, 07 Jun 2016 15:56:07 +0900
changeset 300858 38a91ae89a41046f918d286c931bd40dc0c7ac4b
parent 300857 fed8fa38d29dc8134fb93b827765fc83c240ce64
child 300859 f3446f35deed57d4a08edf706c725346bf240810
push id19599
push usercbook@mozilla.com
push dateWed, 08 Jun 2016 10:16:21 +0000
treeherderfx-team@81f4cc3f6f4c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1275718
milestone50.0a1
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
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>