Bug 1223249 - Use step-end with reverse direction to avoid intermittent failures. r=dbaron
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Thu, 18 Feb 2016 10:17:43 +0900
changeset 284804 b635a8067101a7ea19edc0c25280ffe9c8b691e7
parent 284803 be60ff668afc9cdb1fc253b9f3f412c29e3af7e4
child 284805 c372f284cdd70ad987e15b1521113d33d1dac6ef
push id72126
push usercbook@mozilla.com
push dateFri, 19 Feb 2016 08:39:09 +0000
treeherdermozilla-inbound@c372f284cdd7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs1223249
milestone47.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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>