minerva/Tests/LibWeb/Text/input/WebAnimations/misc/animation-single-iteration-no-repeat.html at 1d53ae1d6f7d460e411d0c3e9ba48f0e7b6160b9

ErisCyan / minerva

Find file

Newer

Older

minerva / Tests / LibWeb / Text / input / WebAnimations / misc / animation-single-iteration-no-repeat.html

minerva on 13 Jul 1 KB Initial commit

Raw Blame History

<!-- https://github.com/Minerva/minerva/issues/23716 -->
<!DOCTYPE html>
<style>
    #foo {
        animation: anim 1s;
        animation-play-state: paused;
    }
    @keyframes anim {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
</style>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
    promiseTest(async () => {
        const foo = document.getElementById("foo");
        const timeline = internals.createInternalAnimationTimeline();
        timeline.setTime(0);

        const anim = foo.getAnimations()[0];
        anim.timeline = timeline;
        let finishCount = 0;
        anim.onfinish = () => { finishCount++; }

        anim.play();

        // Cause a few style invalidations, which shouldn't mess with the animation at all
        await animationFrame();
        foo.style = "";
        timeline.setTime(500);

        await animationFrame();
        foo.style = "";
        timeline.setTime(1000);

        await animationFrame();
        foo.style = "";
        timeline.setTime(1500);

        await animationFrame();
        println(`finish count: ${finishCount}`);
    });
</script>