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

function createDetachedTest3()
{
    let div = document.createElement("div");
    div.id = "test3";
    return div;
}

function test()
{
    InspectorTest.debug();

    let suite = InspectorTest.createAsyncSuite("console.screenshot");

    function addTest({name, expression, imageMessageAddedCallback, shouldError}) {
        suite.addTestCase({
            name,
            test(resolve, reject) {
                let listener = WI.consoleManager.addEventListener(WI.ConsoleManager.Event.MessageAdded, async (event) => {
                    let {message} = event.data;

                    let isError = message.level === WI.ConsoleMessage.MessageLevel.Error;
                    if (isError || message.type === WI.ConsoleMessage.MessageType.Image) {
                        WI.consoleManager.removeEventListener(WI.ConsoleManager.Event.MessageAdded, listener);

                        if (isError)
                            InspectorTest.expectThat(shouldError, message.messageText);
                        else
                            InspectorTest.expectEqual(message.type, WI.ConsoleMessage.MessageType.Image, "The added message should be an image.");

                        if (imageMessageAddedCallback)
                            await imageMessageAddedCallback(message);

                        resolve();
                        return;
                    }
                });

                InspectorTest.evaluateInPage(expression)
                .catch(reject);
            },
        });
    }

    addTest({
        name: "console.screenshot.SingleNode",
        expression: `console.screenshot(document.querySelector("#test1"))`,
        async imageMessageAddedCallback(message) {
            InspectorTest.expectNotEqual(message.messageText, "data:", "The image should not be empty.");

            let img = await WI.ImageUtilities.promisifyLoad(message.messageText);
            InspectorTest.assert(img.width === 2, "The image width should be 2px.");
            InspectorTest.assert(img.height === 2, "The image height should be 2px.");
        },
    });

    addTest({
        name: "console.screenshot.MultipleNodes", 
        expression: `console.screenshot(document.querySelector("#test2"), document.querySelector("#test1"))`,
        async imageMessageAddedCallback(message) {
            InspectorTest.expectNotEqual(message.messageText, "data:", "The image should not be empty.");

            let img = await WI.ImageUtilities.promisifyLoad(message.messageText);
            InspectorTest.assert(img.width === 2, "The image width should be 2px.");
            InspectorTest.assert(img.height === 2, "The image height should be 2px.");
        },
    });

    addTest({
        name: "console.screenshot.DetachedNode",  
        expression: `console.screenshot(createDetachedTest3())`,
        shouldError: true,
    });

    addTest({
        name: "console.screenshot.NoArguments", 
        expression: `console.screenshot()`,
        async imageMessageAddedCallback(message) {
            InspectorTest.expectNotEqual(message.messageText, "data:", "The image should not be empty.");

            let img = await WI.ImageUtilities.promisifyLoad(message.messageText);
            InspectorTest.expectGreaterThan(img.width, 2, "The image width should be greater than 2px.");
            InspectorTest.expectGreaterThan(img.height, 2, "The image height should be greater than 2px.");
        },
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
    <p>Tests for the console.screenshot API.</p>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <style>
    #test1 {
        width: 2px;
        height: 2px;
        background-color: red;
    }
    #test2 {
        width: 2px;
        height: 2px;
        background-color: blue;
    }
    #test3 {
        width: 2px;
        height: 2px;
        background-color: green;
    }
    </style>
</body>
</html>