minerva/Tests/LibWeb/Text/input/WebAnimations/animation-methods/persist.html at 1d53ae1d6f7d460e411d0c3e9ba48f0e7b6160b9

ErisCyan / minerva

Find file

Newer

Older

minerva / Tests / LibWeb / Text / input / WebAnimations / animation-methods / persist.html

minerva on 13 Jul 1 KB Initial commit

Raw Blame History

<!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>