<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="./resources/timeline-event-utilities.js"></script>
<script>

function testRequestAnimationFrame() {
    let requestAnimationFrameIdentifier = requestAnimationFrame(() => {
        TestPage.addResult("FAIL: requestAnimationFrame fired");
    });

    savePageData({requestAnimationFrameIdentifier});

    cancelAnimationFrame(requestAnimationFrameIdentifier);
}

function test()
{
    let suite = InspectorTest.createAsyncSuite("TimelineEvent.CancelAnimationFrame");

    suite.addTestCase({
        name: "TimelineEvent.CancelAnimationFrame.requestAnimationFrame",
        async test() {
            let pageRecordingData = await InspectorTest.TimelineEvent.captureTimelineWithScript({
                expression: `testRequestAnimationFrame()`,
                eventType: WI.ScriptTimelineRecord.EventType.AnimationFrameCanceled,
            });

            InspectorTest.assert(typeof pageRecordingData.requestAnimationFrameIdentifier === "number");

            let recording = WI.timelineManager.activeRecording;
            let scriptTimeline = recording.timelines.get(WI.TimelineRecord.Type.Script);
            let records = scriptTimeline.records.filter((x) => x.eventType === WI.ScriptTimelineRecord.EventType.AnimationFrameCanceled);
            InspectorTest.expectEqual(records.length, 1, "Should be 1 AnimationFrameCanceled record.");
            for (let record of records) {
                InspectorTest.log("DETAILS: " + typeof record.details);
                InspectorTest.expectEqual(record.details, pageRecordingData.requestAnimationFrameIdentifier, "ScriptTimelineRecord details should be the requestAnimationFrame identifier.");
            }
        }
    });

    suite.runTestCasesAndFinish();
}

</script>
</head>
<body onload="runTest()">
    <p>Tests 'CancelAnimationFrame' Timeline event records.</p>
</body>
</html>