<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="resources/recording-utilities.js"></script>
<script src="resources/recording-2d.js"></script>
<script>
function test() {
    let suite = InspectorTest.createAsyncSuite("Canvas.recording2D");

    suite.addTestCase({
        name: "Canvas.recording2D.ExistingSaves",
        description: "Check that existing save calls are sent to the frontend.",
        test(resolve, reject) {
            let canvas = getCanvas(WI.Canvas.ContextType.Canvas2D);
            if (!canvas) {
                reject("Missing 2D canvas.");
                return;
            }

            async function logStates(recording) {
                function check(index, state, name, expected) {
                    InspectorTest.expectEqual("" + state.get(name), "" + expected, `State ${index} ${name} value should be ${expected}.`)
                }
                async function compare(index, transform, globalAlpha, globalCompositeOperation, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, lineDash, lineDashOffset, font, textAlign, textBaseline, direction, strokeStyle, fillStyle, imageSmoothingEnabled, imageSmoothingQuality, path) {
                    let state = await WI.RecordingState.swizzleInitialState(recording, recording.initialState.states[index]);
                    check(index, state, "setTransform", transform)
                    check(index, state, "globalAlpha", globalAlpha)
                    check(index, state, "globalCompositeOperation", globalCompositeOperation)
                    check(index, state, "lineWidth", lineWidth)
                    check(index, state, "lineCap", lineCap)
                    check(index, state, "lineJoin", lineJoin)
                    check(index, state, "miterLimit", miterLimit)
                    check(index, state, "shadowOffsetX", shadowOffsetX)
                    check(index, state, "shadowOffsetY", shadowOffsetY)
                    check(index, state, "shadowBlur", shadowBlur)
                    check(index, state, "shadowColor", shadowColor)
                    check(index, state, "setLineDash", lineDash)
                    check(index, state, "lineDashOffset", lineDashOffset)
                    check(index, state, "font", font)
                    check(index, state, "textAlign", textAlign)
                    check(index, state, "textBaseline", textBaseline)
                    check(index, state, "direction", direction)
                    check(index, state, "strokeStyle", strokeStyle) // FIXME: Might want to do a better job at stringifying gradients and patterns for a better test.
                    check(index, state, "fillStyle", fillStyle) // FIXME: Might want to do a better job at stringifying gradients and patterns for a better test.
                    check(index, state, "imageSmoothingEnabled", imageSmoothingEnabled)
                    check(index, state, "imageSmoothingQuality", imageSmoothingQuality)
                    check(index, state, "setPath", path) // FIXME: Need to do a better job at stringifying a path for a useful test.
                }

                await compare(0, "matrix(1, 0, 0, 1, 0, 0)", 1, "source-over", 1, "butt", "miter", 10, 0, 0, 0, "rgba(0, 0, 0, 0)", "", 0, "10px sans-serif", "start", "alphabetic", "inherit", "#000000", "#000000", true, "low", "[object Path2D]")
                await compare(1, "matrix(1, 0, 0, 1, 1, 0)", 0.5, "source-in", 0.5, "round", "bevel", 20, 2, 3, 4, "#100000", "1,2", 10, "20px sans-serif", "left", "top", "ltr", "[object CanvasPattern]", "[object CanvasGradient]", false, "medium", "[object Path2D]")
                await compare(2, "matrix(1, 0, 0, 1, 1, 1)", 0, "difference", 2, "square", "round", 30, 4, 5, 6, "#001000", "3,4", 11, "30px cursive", "right", "hanging", "inherit", "[object CanvasGradient]", "[object CanvasPattern]", true, "high", "[object Path2D]")
                await compare(3, "matrix(1, 0, 0, 1, 0, -1)", 0.75, "source-over", 3, "round", "bevel", 40, 6, 7, 8, "#000010", "5,6", 12, "40px fantasy", "center", "ideographic", "rtl", "#200000", "#300000", false, "medium", "[object Path2D]")
            }

            canvas.awaitEvent(WI.Canvas.Event.RecordingStopped)
            .then((event) => {
                let {recording} = event.data;

                InspectorTest.expectEqual(recording.initialState.states.length, 4, "There should be 4 existing states.");

                logStates(recording)
                .then(resolve, reject);
            });

            canvas.awaitEvent(WI.Canvas.Event.RecordingStarted)
            .then((event) => {
                InspectorTest.evaluateInPage(`performSavePostActions()`).catch(reject);
            });

            InspectorTest.evaluateInPage(`performSavePreActions()`)
            .then(() => {
                const frameCount = 1;
                CanvasAgent.startRecording(canvas.identifier, frameCount).catch(reject);
            }, reject);
        },
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="load()">
    <p>Test that CanvasManager is able to record actions made to 2D canvas contexts.</p>
</body>
</html>