<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/protocol-test.js"></script>
<style>
@keyframes test {
    to { opacity: 0; }
}
.test {
    animation: test 1s linear;
}
</style>
<script>
function startCSSAnimation() {
    let element = document.body.appendChild(document.createElement("div"));
    element.className = "test";
}

function test()
{
    let suite = ProtocolTest.createAsyncSuite("Animation.Tracking");

    InspectorProtocol.sendCommand("DOM.getDocument");

    suite.addTestCase({
        name: "Animation.Tracking.StartAndStopTrackingWithEvent",
        test(resolve, reject) {
            InspectorProtocol.awaitEvent({event: "Animation.trackingStart"}).then((messageObject) => {
                ProtocolTest.log("Animation.trackingStart");
                ProtocolTest.expectEqual(typeof messageObject.params.timestamp, "number", "Should have a timestamp when starting.");

                ProtocolTest.evaluateInPage("startCSSAnimation()");
            });

            InspectorProtocol.awaitEvent({event: "Animation.trackingUpdate"}).then((messageObject) => {
                ProtocolTest.log("Animation.trackingUpdate");
                ProtocolTest.expectEqual(typeof messageObject.params.timestamp, "number", "Should should have a timestamp number.");
                ProtocolTest.expectEqual(typeof messageObject.params.event, "object", "Should have an event object.");
                ProtocolTest.expectEqual(typeof messageObject.params.event.trackingAnimationId, "string", "Event should have an animation tracking ID.");
                ProtocolTest.expectEqual(typeof messageObject.params.event.animationState, "string", "Event should have an animation state.");
                ProtocolTest.expectEqual(typeof messageObject.params.event.nodeId, "number", "Event should have a node ID.");
                ProtocolTest.expectEqual(messageObject.params.event.animationName, "test", "Event should have the related CSS animation's name.");

                ProtocolTest.assert(typeof messageObject.params.event.transitionProperty === "undefined", "Event should not have a `transitionProperty` if it has an `animationName`.");

                InspectorProtocol.sendCommand("Animation.stopTracking", {});
            });

            InspectorProtocol.awaitEvent({event: "Animation.trackingComplete"}).then((messageObject) => {
                ProtocolTest.log("Animation.trackingComplete");
                resolve();
            });

            InspectorProtocol.sendCommand("Animation.startTracking", {});
        }
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
<p>Tests that Animation.startTracking and Animation.stopTracking trigger Animation.trackingStart, Animation.trackingUpdate, and Animation.trackingComplete events with expected data.</p>
</body>
</html>