Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html class="reftest-wait reftest-no-flush">
<head>
<meta charset=utf-8>
<style>
#target {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
var target = document.getElementById("target");
var anim = target.animate(
{ marginLeft: [ "0px", "10px" ] },
{ duration: 500000 /* 500s */, easing: "steps(2, start)" });
anim.ready.then(function() {
// Set currentTime in before phase, i.e., GetComputedTimingAt() returns
// null progress in the phase so that we can skip ComposeStyle().
// This currentTime value should be far from zero in order to skip
// restyles requested by setting currentTime or frames in a next tick.
// If this value is near by zero, say -1, the restyles will be processed in
// the next tick and current time in the next tick must be greater than
// zero at that point, that means the animation with new frame values will
// be painted. As a result, this test will be useless.
anim.currentTime = -500;
// Setting another frame does not cause any visual changes because
// the animation is still in the before phase.
anim.effect.setKeyframes({ marginLeft: [ "0px", "400px" ] });
var beforePhaseFrames = 0;
window.requestAnimationFrame(function handleFrame() {
if (anim.effect.getComputedTiming().progress === null) {
beforePhaseFrames++;
}
if (anim.effect.getComputedTiming().progress !== null) {
if (beforePhaseFrames == 0) {
console.log("WARNING: We never got frames in the before phase. " +
"This test is going to be passed accidentally. " +
"Consider setting smaller current time, e.g. -1000ms.");
}
// After starting the animation, progress should be 0.5, that means
// margin-left is 200px.
document.documentElement.classList.remove("reftest-wait");
return;
}
window.requestAnimationFrame(handleFrame);
});
});
</script>
</body>
</html>