Bug 1223249 - Use step-end with reverse direction to avoid intermittent failures. r?dbaron draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Thu, 18 Feb 2016 10:17:43 +0900
changeset 331717 e2a0c23b3b4451eab13d57c9e24bcb069399707f
parent 331663 0629918a09ae87808efdda432d7852371ba37db6
child 514448 e642bca614dff4218ebd6dc8d904505bc25265bb
push id11058
push userbmo:hiikezoe@mozilla-japan.org
push dateThu, 18 Feb 2016 01:29:43 +0000
reviewersdbaron
bugs1223249
milestone47.0a1
Bug 1223249 - Use step-end with reverse direction to avoid intermittent failures. r?dbaron 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>