Bug 1223249 - Use step-end with reverse direction to avoid intermittent failures. r?dbaron
MozReview-Commit-ID: Db9G4lJfl5z
--- 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>