<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="resources/recording-utilities.js"></script>
<script>
let context = null;

let canvas = document.createElement("canvas");
canvas.width = 2;
canvas.height = 2;

// 2x2 red square
let image = document.createElement("img");
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=";

let linearGradient = null;

let radialGradient = null;

let conicGradient = null;

let pattern = null;

let path2D = new Path2D("M 1 2");

let imageData = new ImageData(1, 2);

let imageBitmap = null;

async function load() {
    context = canvas.getContext("2d");

    linearGradient = context.createLinearGradient(1, 2, 3, 4);
    linearGradient.addColorStop(1, "red");

    radialGradient = context.createRadialGradient(1, 2, 3, 4, 5, 6);
    linearGradient.addColorStop(1, "blue");

    conicGradient = context.createConicGradient(1, 2, 3);
    conicGradient.addColorStop(1, "green");

    pattern = context.createPattern(image, "no-repeat");

    imageBitmap = await createImageBitmap(image);

    cancelActions();

    context.strokeStyle = "red";
    context.save();
    context.strokeStyle = "blue";
    context.save();
    context.strokeStyle = "green";

    runTest();
}

function ignoreException(func){
    try {
        func();
    } catch (e) { }
}

let requestAnimationFrameId = NaN;

function cancelActions() {
    cancelAnimationFrame(requestAnimationFrameId);
    requestAnimationFrameId = NaN;

    context.resetTransform();
    context.beginPath();
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
}

function performActions() {
    let frames = [
        () => {
            context.fillStyle;
            context.fillStyle = "test";
            context.fillStyle = linearGradient;
            context.fillStyle = radialGradient;
            context.fillStyle = conicGradient;
            context.fillStyle = pattern;
        },
        () => {
            context.beginPath();
        },
        () => {
            ignoreException(() => context.moveTo(1, 2));
        },
        () => {
            ignoreException(() => context.drawImage(image, 11, 12));
        },
        () => {
            ignoreException(() => context.createImageData(imageData));
        },
        () => {
            ignoreException(() => context.drawImage(imageBitmap, 11, 12));
        },
        () => {
            ignoreException(() => context.setTransform(new DOMMatrix([1, 2, 3, 4, 5, 6])));
        },
        () => {
            context.drawFocusIfNeeded(path2D, document.body);
        },
        () => {
            TestPage.dispatchEventToFrontend("LastFrame");
        },
    ];
    let index = 0;
    function executeFrameFunction() {
        frames[index++]();
        if (index < frames.length)
            requestAnimationFrameId = requestAnimationFrame(executeFrameFunction);
    };
    executeFrameFunction();
}

function test() {
    let suite = InspectorTest.createAsyncSuite("Recording.prototype.toHTML");

    suite.addTestCase({
        name: "Recording.prototype.toHTML.2D",
        test(resolve, reject) {
            startRecording(WI.Canvas.ContextType.Canvas2D, resolve, reject, {
                callback(recording) {
                    let promise = new WI.WrappedPromise;

                    let listener = recording.addEventListener(WI.Recording.Event.ProcessedAction, (event) => {
                        if (!recording.ready)
                            return;

                        let html = recording.toHTML();
                        html = html.replace(/"data:image\/png;base64,[^"]+"/g, "<filtered>");

                        InspectorTest.log("++++++++++ HTML ++++++++++");
                        InspectorTest.log(html);
                        InspectorTest.log("++++++++++ HTML ++++++++++");

                        recording.removeEventListener(WI.Recording.Event.ProcessedAction, listener);
                        promise.resolve();
                    });

                    recording.startProcessing();

                    return promise.promise;
                },
            });
        },
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="load()">
    <p>Tests for Recording.prototype.toHTML.</p>
</body>
</html>