Bug 1223249 - Use step-end with reverse direction to avoid intermittent failures. r=dbaron, a=test-only
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Thu, 18 Feb 2016 10:17:43 +0900
changeset 311770 43afd97b90631418b81769584ae355322e445cf6
parent 311769 42d52131092786f2da18052f778cb8ae1f69c0ce
child 311771 11bf5e91c8bce27f110d14152107b3f155e80d8b
push id8
push userryanvm@gmail.com
push dateWed, 02 Mar 2016 23:37:02 +0000
treeherdermozilla-esr45@f36639351baf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron, test-only
bugs1223249
milestone45.0
Bug 1223249 - Use step-end with reverse direction to avoid intermittent failures. r=dbaron, a=test-only MozReview-Commit-ID: Db9G4lJfl5z
layout/reftests/transform/animate-layer-scale-inherit-3.html
--- a/layout/reftests/transform/animate-layer-scale-inherit-3.html
+++ b/layout/reftests/transform/animate-layer-scale-inherit-3.html
@@ -3,44 +3,49 @@
 <title>Testcase, bug 1122526</title>
 <style>
 
 #outer, #inner {
   display: inline-block;
   background: white;
   color: black;
 }
-#inner { animation: HoldTransform linear 100s }
+/*
+ * We use step-end with reverse direction to paint the initial state
+ * on the first frame, and step to the last state on the next frame.
+ */
+#inner { animation: HoldTransform step-end 100s reverse }
 #inner {
   vertical-align: top;
   height: 100px;
   width: 100px;
   background: repeating-linear-gradient(to top left, yellow, blue 10px);
 }
 @keyframes HoldTransform {
   /* need to initially rasterize at non-identity transform to hit the
-     bug at all */
-  0% { transform: scale(0.2) }
-  0.01%, 100% { transform: none }
+   * bug at all
+   * NOTE: These keyframes will be used reverse direction.
+   */
+  0% { transform: none }
+  100% { transform: scale(0.2) }
 }
 
 </style>
 
 <div id="outer">
   <div id="inner">
   </div>
 </div>
 
 <script>
 
 document.getElementById("inner").addEventListener("animationstart", StartListener, false);
 
 function StartListener(event) {
-  // Animation should be zoomed to transform:none after 10ms; give it
-  // longer.
-  setTimeout(RemoveReftestWait, 100);
+  // Animation should be zoomed to transform:none after the first frame.
+  requestAnimationFrame(RemoveReftestWait);
 }
 
 function RemoveReftestWait() {
   document.documentElement.classList.remove("reftest-wait");
 }
 
 </script>