<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="resources/lifecycle-utilities.js"></script>
<script>
function test()
{
    let suite = InspectorTest.createAsyncSuite("Animation.Lifecycle");

    suite.addTestCase({
        name: "Animation.Lifecycle.WebAnimation",
        description: "Check that Web Inspector is notified whenever web animations are created/destroyed.",
        async test() {
            InspectorTest.expectEqual(WI.animationManager.animationCollection.size, 0, "There should not be any animations.");

            let animation = await InspectorTest.AnimationLifecycleUtilities.createAnimation(WI.Animation.Type.WebAnimation, {
                selector: "body",
                keyframes: [
                    {
                        offset: 0.25,
                        easing: "cubic-bezier(0.1, 0.2, 0.3, 0.4)",
                        color: "red",
                        opacity: 0,
                    },
                    {
                        offset: 0.75,
                        easing: "steps(5, jump-end)",
                        color: "blue",
                        opacity: 1,
                    },
                ],
                options: {
                    id: "web-animation-test",
                    delay: 100,
                    endDelay: 200,
                    duration: 300,
                    easing: "ease-in-out",
                    direction: "alternate",
                    fill: "both",
                    iterations: 10,
                    iterationStart: 5,
                },
            });
        },
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
    <p>Tests for the Animation.animationCreated and Animation.animationDestroyed events.</p>
</body>
</html>