<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="resources/lifecycle-utilities.js"></script>
<style>
@keyframes fade-in {
    from {
        color: red;
        opacity: 0;
    }
    50% {
        color: green;
        opacity: 0.5;
    }
    to {
        color: blue;
        opacity: 1;
    }
}
div#target.active {
    animation-name: fade-in;
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.4);
    animation-delay: 100ms;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-fill-mode: both;
}
</style>
<script>
function test()
{
    let suite = InspectorTest.createAsyncSuite("Animation.Lifecycle");

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

            let [animation] = await Promise.all([
                InspectorTest.AnimationLifecycleUtilities.awaitAnimationCreated(WI.Animation.Type.CSSAnimation),
                InspectorTest.evaluateInPage(`document.getElementById("target").classList.add("active")`),
            ]);

            await Promise.all([
                InspectorTest.AnimationLifecycleUtilities.awaitAnimationDestroyed(animation.animationId),
                InspectorTest.AnimationLifecycleUtilities.destroyAnimations(),
                InspectorTest.evaluateInPage(`document.getElementById("target").classList.remove("active")`),
            ]);
        },
    });

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