<!doctype html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test()
{
    let suite = InspectorTest.createAsyncSuite("DOM.highlightSelector");

    let mainFrame = WI.frameResourceManager.mainFrame;
    let childFrames = mainFrame.childFrameCollection.toArray();
    InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe.");

    let mainFrameId = mainFrame.id;
    let childFrameId = childFrames[0].id;

    const highlightConfig = {
        showInfo: true,
        contentColor: {r: 255, g: 255, b: 255},
        paddingColor: {r: 255, g: 255, b: 255},
        borderColor: {r: 255, g: 255, b: 255},
        marginColor: {r: 255, g: 255, b: 255},
    };

    let tests = [
        {
            name: "MainFrameTagSelector",
            frameId: mainFrameId,
            selector: "div",
            expectedElements: 3,
        },
        {
            name: "MainFrameWithClassSelector",
            frameId: mainFrameId,
            selector: ".class-one",
            expectedElements: 2,
        },
        {
            name: "MainFrameWithMultipleClassSelector",
            frameId: mainFrameId,
            selector: ".class-one.\\.escaped",
            expectedElements: 1,
        },
        {
            name: "MainFrameIdSelector",
            frameId: mainFrameId,
            selector: "#id-one",
            expectedElements: 1,
        },
        {
            name: "MainFrameMultipleSelectors",
            frameId: mainFrameId,
            selector: ".class-one, .class-two",
            expectedElements: 3,
        },
        {
            name: "MissingOptionalFrameIdShouldUseMainFrame",
            selector: "iframe.class-one",
            expectedElements: 1,
        },
        {
            name: "MainFrameNonMatchingSelector",
            frameId: mainFrameId,
            selector: ".no-elements",
            expectedElements: 0,
        },
        {
            name: "BadFrameShouldError",
            frameId: "x.x",
            selector: "div",
            expectError: true,
        },
        {
            name: "BadSelectorShouldError",
            frameId: mainFrameId,
            selector: "$%foobar",
            expectError: true,
        },
        {
            name: "ChildFrameTagSelector",
            frameId: childFrameId,
            selector: "div",
            expectedElements: 2,
        },
        {
            name: "ChildFrameIdSelector",
            frameId: childFrameId,
            selector: "#id-one",
            expectedElements: 1,
        },
    ];

    function displayNameForFrameId(frameId) {
        if (frameId === undefined)
            return "Not Provided";
        if (frameId === mainFrameId)
            return "<main-frame>";
        if (frameId === childFrameId)
            return "<child-frame>";
        return "Bad Value";
    }

    function getHighlight(callback) {
        InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => {
            InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error);
            InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight.");
            callback(JSON.parse(value));
        });
    }

    for (let {name, frameId, selector, expectedElements, expectError} of tests) {
        suite.addTestCase({
            name,
            test(resolve, reject) {
                InspectorTest.log("- Frame: " + displayNameForFrameId(frameId));
                InspectorTest.log("- Selector: " + selector);
                DOMAgent.highlightSelector(highlightConfig, selector, frameId, (error) => {
                    if (expectError) {
                        InspectorTest.expectThat(error, "Should throw error: " + error);
                        resolve();
                    } else {
                        InspectorTest.assert(!error, "Should not throw error.");
                        getHighlight((highlightPayloadList) => {
                            InspectorTest.expectThat(highlightPayloadList.length === expectedElements, `Should highlight ${expectedElements} element(s).`);
                            if (highlightPayloadList.length) {
                                InspectorTest.log("Highlighted Elements:");
                                for (let highlightPayload of highlightPayloadList)
                                    InspectorTest.log(JSON.stringify(highlightPayload.elementData));
                            }
                            resolve();
                        });
                    }
                });
            }
        });
    }

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
    <p>Tests for the DOM.highlightSelector command.</p>
    <div style="width: 500px; height: 500px">
        <div class="class-one .escaped" style="width: 10px; height: 20px"></div>
        <div id="id-one" class="class-two" style="width:100px; height: 200px"></div>
        <iframe class="class-one" src="resources/highlight-iframe.html"></iframe>
    </div>
</body>
</html>