зеркало из https://github.com/mozilla/gecko-dev.git
59 строки
2.0 KiB
HTML
59 строки
2.0 KiB
HTML
<!doctype html>
|
|
<html class="reftest-wait reftest-no-flush">
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>Bug 1267937</title>
|
|
<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>
|