<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test()
{
    let documentNode;

    function nodeForSelector(selector, callback) {
        WI.domTreeManager.querySelector(documentNode.id, selector, (nodeId) => {
            callback(WI.domTreeManager.nodeForId(nodeId));
        });
    }

    let suite = InspectorTest.createAsyncSuite("WI.cssPath");

    suite.addTestCase({
        name: "WI.cssPath.TopLevelNode",
        description: "Top level nodes like html, body, and head are unique.",
        test(resolve, reject) {
            nodeForSelector("html", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "html", "HTML element should have simple selector 'html'.");
            });
            nodeForSelector("html > body", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "body", "BODY element should have simple selector 'body'.");
            });
            nodeForSelector("html > head", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "head", "HEAD element should have simple selector 'head'.");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.ElementWithID",
        description: "Element with ID is unique (#id). Path does not need to go past it.",
        test(resolve, reject) {
            nodeForSelector("#id-test", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#id-test", "Element with id should have simple selector '#id-test'.");
            });
            nodeForSelector("#id-test > div", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#id-test > div", "Element inside element with id should have path from id.");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.InputElementFlair",
        description: "Input elements include their type.",
        test(resolve, reject) {
            nodeForSelector("#input-test input", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#input-test > input[type=\"password\"]", "Input element should include type.");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.UniqueTagName",
        description: "Elements with unique tag name do not need nth-child.",
        test(resolve, reject) {
            nodeForSelector("#unique-tag-test > span", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#unique-tag-test > span", "Elements with unique tag name should not need nth-child().");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.NonUniqueTagName",
        description: "Elements with non-unique tag name need nth-child.",
        test(resolve, reject) {
            nodeForSelector("#non-unique-tag-test > span ~ span", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#non-unique-tag-test > span:nth-child(3)", "Elements with non-unique tag name should need nth-child().");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.UniqueClassName",
        description: "Elements with unique class names should include their class names.",
        test(resolve, reject) {
            nodeForSelector("#unique-class-test > .beta", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#unique-class-test > div.alpha.beta", "Elements with unique class names should include their class names.");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.NonUniqueClassName",
        description: "Elements with non-unique class names should not include their class names.",
        test(resolve, reject) {
            nodeForSelector("#non-unique-class-test > div ~ div", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#non-unique-class-test > div:nth-child(2)", "Elements with non-unique class names should not include their class names.");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.UniqueTagAndClassName",
        description: "Elements with unique tag and class name just use tag for simplicity.",
        test(resolve, reject) {
            nodeForSelector("#unique-tag-and-class-test > .alpha", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "#unique-tag-and-class-test > div", "Elements with unique tag and class names should just have simple tag.");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.DeepPath",
        description: "Tests for element with complex path.",
        test(resolve, reject) {
            nodeForSelector("small", (node) => {
                InspectorTest.expectEqual(WI.cssPath(node), "body > div > div.deep-path-test > ul > li > div:nth-child(4) > ul > li.active > a > small", "Should be able to create path for deep elements.");
                resolve();
            });
        }
    });

    suite.addTestCase({
        name: "WI.cssPath.PseudoElement",
        description: "For a pseudo element we should get the path of the parent and append the pseudo element selector.",
        test(resolve, reject) {
            nodeForSelector("#pseudo-element-test > div ~ div", (node) => {
                let pseudoElementBefore = node.beforePseudoElement();
                InspectorTest.assert(pseudoElementBefore);
                InspectorTest.expectEqual(WI.cssPath(pseudoElementBefore), "#pseudo-element-test > div:nth-child(3)::before", "Should be able to create path for ::before pseudo elements.");
                let pseudoElementAfter = node.afterPseudoElement();
                InspectorTest.assert(pseudoElementAfter);
                InspectorTest.expectEqual(WI.cssPath(pseudoElementAfter), "#pseudo-element-test > div:nth-child(3)::after", "Should be able to create path for ::after pseudo elements.");
                resolve();
            });
        }
    });

    // FIXME: Write tests for nodes inside a Shadow DOM Tree.

    WI.domTreeManager.requestDocument((node) => {
        documentNode = node;
        suite.runTestCasesAndFinish();
    });
}
</script>
</head>
<body onload="runTest()">
<p>Test for WI.cssPath.</p>
<!-- If display:none pseudo elements are not created. -->
<div style="visibility:hidden">
    <div id="id-test">
        <div></div>
    </div>
    <div id="input-test">
        <input type="password">
    </div>
    <div id="unique-tag-test">
        <div></div>
        <span></span>
        <div></div>
    </div>
    <div id="non-unique-tag-test">
        <div></div>
        <span></span>
        <span></span>
        <div></div>
    </div>
    <div id="unique-class-test">
        <div class="alpha"></div>
        <div class="alpha beta"></div>
        <div class="alpha"></div>
    </div>
    <div id="non-unique-class-test">
        <div class="alpha"></div>
        <div class="alpha"></div>
        <div class="alpha"></div>
    </div>
    <div id="unique-tag-and-class-test">
        <div class="alpha"></div>
    </div>
    <div class="deep-path-test">
        <ul>
            <li>
                <h1></h1>
                <div></div>
                <div></div>
                <div>
                    <ul class="list">
                        <li></li>
                        <li class="active"><a href="#"><small></small></a></li>
                        <li></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div id="pseudo-element-test">
        <style>
        #pseudo-element-test > div~div::before { content: "before"; }
        #pseudo-element-test > div~div::after { content: "after"; }
        </style>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>