mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 17:55:07 +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
41 lines
1.8 KiB
HTML
41 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<div id="foo"></div>
|
|
<script src="../../include.js"></script>
|
|
<script>
|
|
promiseTest(async () => {
|
|
const foo = document.getElementById("foo");
|
|
|
|
let anim = foo.animate({}, {});
|
|
const prevReplaceState = anim.replaceState;
|
|
anim.persist();
|
|
if (prevReplaceState === "active" && anim.replaceState === "persisted")
|
|
println("persist() sets animation's replaceState to persist");
|
|
anim.cancel();
|
|
|
|
// "Undo" the removal of an animation by the Document
|
|
let anim1 = foo.animate({ opacity: 0 }, { duration: 1, fill: "forwards" });
|
|
let anim2 = foo.animate({ opacity: 0 }, { duration: 1, fill: "forwards" });
|
|
await anim1.finished;
|
|
anim1.persist();
|
|
println(`persist() undoes the Document removal effects: ${foo.getAnimations().length === 2}`);
|
|
await animationFrame();
|
|
|
|
const timeline = internals.createInternalAnimationTimeline();
|
|
anim1 = foo.animate({ opacity: 0 }, { duration: 1000, fill: "forwards", timeline });
|
|
anim2 = foo.animate({ opacity: 0 }, { duration: 500, fill: "forwards", timeline });
|
|
await animationFrame();
|
|
timeline.setTime(1500);
|
|
await animationFrame();
|
|
if (anim1.replaceState === "removed" && anim2.replaceState === "active")
|
|
println("Animations are properly replaced when covered by another animation");
|
|
|
|
anim1 = foo.animate({ opacity: 0 }, { duration: 1000, fill: "forwards", timeline });
|
|
anim2 = foo.animate({ opacity: 0 }, { duration: 500, fill: "forwards", timeline });
|
|
anim1.persist();
|
|
timeline.setTime(1500);
|
|
await animationFrame();
|
|
if (anim1.replaceState === "persisted" && anim2.replaceState === "active")
|
|
println("persist() keeps an animation from being replaced");
|
|
});
|
|
</script>
|