mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-05-17 16:42:54 +00:00
38 lines
1.8 KiB
HTML
38 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
|
|
anim1 = foo.animate({ opacity: 0 }, { duration: 1, fill: 'forwards' });
|
|
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}`);
|
|
|
|
const timeline = internals.createInternalAnimationTimeline();
|
|
let anim1 = foo.animate({ opacity: 0 }, { duration: 1000, fill: "forwards", timeline });
|
|
let anim2 = foo.animate({ opacity: 0 }, { duration: 500, fill: "forwards", timeline });
|
|
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>
|