blob: b7e4b34f81d1e888a71b19682b10bacbf0d3de74 [file] [log] [blame]
<style>
body {
background-color: green;
}
div {
position: absolute;
top: 0;
height: 100px;
}
#test {
left: 0;
width: 100px;
background-color: red;
}
#reference {
left: -1px;
width: 102px;
background-color: green;
}
</style>
<div id="test"></div>
<div id="reference"></div>
<script src="../resources/ui-helper.js"></script>
<script>
(async () => {
if (window.testRunner)
testRunner.waitUntilDone();
const keyframes = { "transform": "translateX(700px)" };
const easing = "cubic-bezier(0,1,0,1)";
const duration = 24 * 60 * 60 * 1000;
// Create two animations, a test which will change easing during playback and a reference which
// will use the test animation's changed playback throughout its entire duration. The two animations
// should be in sync and the animated elements overlap, ensuring no red is visible after the update.
const test = document.getElementById("test").animate(keyframes, { easing: "linear", duration });
document.getElementById("reference").animate(keyframes, { easing, duration });
// Wait for the animations to be ready and then a frame before pausing them.
await Promise.all(document.getAnimations().map(animation => animation.ready));
await UIHelper.ensurePresentationUpdate();
await UIHelper.renderingUpdate();
for (let animation of document.getAnimations())
animation.pause();
// Update the easing on the test animation to match the reference animation.
test.effect.updateTiming({ easing });
// Wait a frame and resume the animations.
await UIHelper.ensurePresentationUpdate();
await UIHelper.renderingUpdate();
for (let animation of document.getAnimations())
animation.play();
// Wait a frame and compare the rendering.
await UIHelper.ensurePresentationUpdate();
await UIHelper.renderingUpdate();
if (window.testRunner)
testRunner.notifyDone();
})();
</script>