2015-06-30 02:46:17 +03:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html class="reftest-wait">
|
|
|
|
|
<title>Testcase, bug 1122526</title>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
#outer, #inner {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background: white;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
2016-02-18 04:17:43 +03:00
|
|
|
/*
|
|
|
|
|
* 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 }
|
2015-06-30 02:46:17 +03:00
|
|
|
#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
|
2016-02-18 04:17:43 +03:00
|
|
|
* bug at all
|
|
|
|
|
* NOTE: These keyframes will be used reverse direction.
|
|
|
|
|
*/
|
|
|
|
|
0% { transform: none }
|
|
|
|
|
100% { transform: scale(0.2) }
|
2015-06-30 02:46:17 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div id="outer">
|
|
|
|
|
<div id="inner">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
2017-01-17 13:50:25 +03:00
|
|
|
document.getElementById("inner").addEventListener("animationstart", StartListener);
|
2015-06-30 02:46:17 +03:00
|
|
|
|
|
|
|
|
function StartListener(event) {
|
2016-02-18 04:17:43 +03:00
|
|
|
// Animation should be zoomed to transform:none after the first frame.
|
|
|
|
|
requestAnimationFrame(RemoveReftestWait);
|
2015-06-30 02:46:17 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function RemoveReftestWait() {
|
|
|
|
|
document.documentElement.classList.remove("reftest-wait");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
