mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 09:45:06 +02:00
781f961c07
It is not guaranteed that an animation is ready to run a pending task when it is scheduled just because it has a timeline, and even if it is, the current time when scheduling will not necessarily still be correct when the task is run (e.g. if the timeline changes in the interim). We had some tests which relied on the previous behavior which have been updated to await the pending play task Fixes a crash in the /web-animations/interfaces/Animatable/animate-no-browsing-context.html WPT test but it can't be imported since it relies on a python web server to be running
54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<div id="foo"></div>
|
|
<script src="../../include.js"></script>
|
|
<script>
|
|
const foo = document.getElementById("foo");
|
|
|
|
promiseTest(async () => {
|
|
const timeline = internals.createInternalAnimationTimeline();
|
|
let anim = foo.animate({}, {
|
|
delay: 10,
|
|
endDelay: 20,
|
|
fill: "forwards",
|
|
iterationStart: 30,
|
|
iterations: 40,
|
|
duration: 50,
|
|
direction: "normal",
|
|
easing: "linear",
|
|
timeline,
|
|
});
|
|
|
|
await animationFrame();
|
|
let timing = anim.effect.getComputedTiming();
|
|
println(`num properties: ${Object.getOwnPropertyNames(timing).length}`);
|
|
println(`delay: ${timing.delay}`);
|
|
println(`endDelay: ${timing.endDelay}`);
|
|
println(`fill: ${timing.fill}`);
|
|
println(`iterationStart: ${timing.iterationStart}`);
|
|
println(`iterations: ${timing.iterations}`);
|
|
println(`duration: ${timing.duration}`);
|
|
println(`direction: ${timing.direction}`);
|
|
println(`easing: ${timing.easing}`);
|
|
println(`endTime: ${timing.endTime}`);
|
|
println(`activeDuration: ${timing.activeDuration}`);
|
|
println(`localTime: ${timing.localTime}`);
|
|
println(`progress: ${timing.progress}`);
|
|
println(`currentIteration: ${timing.currentIteration}`);
|
|
|
|
// Test with some progress
|
|
anim = foo.animate({}, {
|
|
duration: 1000,
|
|
iterations: 3,
|
|
timeline,
|
|
});
|
|
await animationFrame();
|
|
timeline.setTime(1200);
|
|
await animationFrame();
|
|
timing = anim.effect.getComputedTiming();
|
|
println("");
|
|
println(`localTime: ${timing.localTime}`);
|
|
println(`progress: ${timing.progress.toFixed(2)}`);
|
|
println(`currentIteration: ${timing.currentIteration}`);
|
|
});
|
|
</script>
|