<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="resources/lifecycle-utilities.js"></script>
<style>
div#target {
    color: red;
    opacity: 0;

}
div#target.active {
    color: blue;
    opacity: 1;

    transition-property: opacity;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.4);
    transition-delay: 100ms;
}
</style>
<script>
function test()
{
    let suite = InspectorTest.createAsyncSuite("Animation.Lifecycle");

    suite.addTestCase({
        name: "Animation.Lifecycle.CSSTransition",
        description: "Check that Web Inspector is notified whenever CSS transitions 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.CSSTransition),
                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>