<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function load() {
    window.context2d = document.getCSSCanvasContext("2d", "css-canvas", 10, 10);

    runTest();
}

let cssCanvasClients = [];

function createCSSCanvasClient() {
    cssCanvasClients.push(document.body.appendChild(document.createElement("div")));
}

function destroyCSSCanvasClients() {
    for (let cssCanvasClient of cssCanvasClients)
        cssCanvasClient.remove();

    cssCanvasClients = [];

    setTimeout(() => { GCController.collect(); }, 0);
}

function test() {
    let suite = InspectorTest.createAsyncSuite("Canvas.CSSCanvasClients");

    function logClientNodes(clientNodes) {
        for (let clientNode of clientNodes) {
            if (clientNode)
                InspectorTest.pass(`Client node "${clientNode.appropriateSelectorFor()}" is valid.`);
            else
                InspectorTest.fail("Invalid client node.");
        }
    }

    suite.addTestCase({
        name: "Canvas.CSSCanvasClients.InitialLoad",
        description: "Check that the CanvasManager has one CSS canvas initially.",
        test(resolve, reject) {
            let canvases = WI.canvasManager.canvases;
            InspectorTest.expectEqual(canvases.length, 1, "CanvasManager should have one canvas.");
            if (!canvases.length) {
                reject("Missing canvas.");
                return;
            }

            InspectorTest.expectEqual(canvases[0].cssCanvasName, "css-canvas", `Canvas should have CSS name "css-canvas".`);
            canvases[0].requestCSSCanvasClientNodes((clientNodes) => {
                InspectorTest.expectEqual(clientNodes.length, 0, "There should be no client nodes.");
                logClientNodes(clientNodes);
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "Canvas.CSSCanvasClients.Create",
        description: "Check that creating a CSS canvas client node is tracked correctly.",
        test(resolve, reject) {
            WI.Canvas.awaitEvent(WI.Canvas.Event.CSSCanvasClientNodesChanged)
            .then((event) => {
                InspectorTest.expectEqual(event.target.cssCanvasName, "css-canvas", `Canvas with created client should have CSS name "css-canvas".`);
                event.target.requestCSSCanvasClientNodes((clientNodes) => {
                    InspectorTest.expectEqual(clientNodes.length, 1, "There should be one client node.");
                    logClientNodes(clientNodes);
                    resolve();
                });
            });

            InspectorTest.evaluateInPage(`createCSSCanvasClient()`);
        }
    });

    suite.addTestCase({
        name: "Canvas.CSSCanvasClients.Destroy",
        description: "Check that destroying a CSS canvas client node is tracked correctly.",
        test(resolve, reject) {
            WI.Canvas.awaitEvent(WI.Canvas.Event.CSSCanvasClientNodesChanged)
            .then((event) => {
                InspectorTest.expectEqual(event.target.cssCanvasName, "css-canvas", `Canvas with destroyed client should have CSS name "css-canvas".`);
                event.target.requestCSSCanvasClientNodes((clientNodes) => {
                    InspectorTest.expectEqual(clientNodes.length, 0, "There should be no client nodes.");
                    logClientNodes(clientNodes);
                    resolve();
                });
            });

            InspectorTest.evaluateInPage(`destroyCSSCanvasClients()`);
        }
    });

    // ------

    suite.addTestCase({
        name: "Canvas.CSSCanvasClients.InvalidCanvasId",
        description: "Invalid canvas identifiers should cause an error.",
        test(resolve, reject) {
            const canvasId = "DOES_NOT_EXIST";
            CanvasAgent.requestCSSCanvasClientNodes(canvasId, (error, clientNodeIds) => {
                InspectorTest.expectThat(error, "Should produce an error.");
                InspectorTest.log("Error: " + error);
                resolve();
            });
        }
    });

    suite.runTestCasesAndFinish();
}
</script>
<style>
    div {
        width: 10px;
        height: 10px;
        background-image: -webkit-canvas(css-canvas);
    }
</style>
</head>
<body onload="load()">
    <p>Test that CanvasAgent tracks changes in the client nodes of a CSS canvas.</p>
</body>
</html>