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>
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.
