mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
1bad8e5a78
There are times that we want to update an animation regardless of whether it's timelines time has changed, for example if an animation associated with a scroll timeline has a pending task we should run that on the next update regardless of whether the user has scrolled
36 lines
1.2 KiB
HTML
36 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<div id="foo"></div>
|
|
<script src="../../include.js"></script>
|
|
<script>
|
|
promiseTest(async () => {
|
|
const foo = document.getElementById("foo");
|
|
const timeline = internals.createInternalAnimationTimeline();
|
|
const animation = foo.animate({ opacity: [0, 1] }, { duration: 1000, timeline });
|
|
|
|
// Wait for the pending play task
|
|
await animationFrame();
|
|
|
|
animation.playbackRate = 2;
|
|
|
|
timeline.setTime(100);
|
|
if (animation.currentTime === 200)
|
|
println("Animation has expected currentTime value after 100ms");
|
|
|
|
animation.playbackRate = 0.5;
|
|
timeline.setTime(200);
|
|
if (animation.currentTime === 250)
|
|
println("Animation has expected currentTime value after 200ms");
|
|
|
|
animation.playbackRate = -1;
|
|
timeline.setTime(300);
|
|
if (animation.currentTime === 150)
|
|
println("Animation has expected currentTime value after 300ms");
|
|
|
|
animation.playbackRate = 0;
|
|
const originalTime = animation.currentTime;
|
|
timeline.setTime(400);
|
|
if (animation.currentTime === originalTime)
|
|
println("Animation has expected currentTime value after 400ms");
|
|
});
|
|
</script>
|