<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="../../resources/js-test-pre.js"></script>
        <style>
            @namespace uh url(http://www.w3.org/1999/xhtml);
            #root div {
                background-color: rgb(1, 2, 3);
                color: rgb(1, 2, 3);
            }
            #root |div {
                background-color: rgb(4, 5, 6);
            }
            #root uh|div {
                color: rgb(4, 5, 6);
            }
        </style>
    </head>
    <body>
        <div id="root" style="display:none;">
            <div data-case="1">Default namespace</div>
        </div>
        <script>
            description("Verify that \"|name\" matches the empty namespace while \"*|name\" and \"name\" match any namespace.");

            var root = document.getElementById("root");
            var elementWithoutNamespace = document.createElementNS("", "div");
            elementWithoutNamespace.setAttribute("data-case", "2");
            root.appendChild(elementWithoutNamespace);

            function test(selector, expectedCases)
            {
                shouldBe('root.querySelectorAll("' + selector + '").length', '' + expectedCases.length);
                let queryResult = root.querySelectorAll(selector);
                for (let i = 0; i < queryResult.length; ++i) {
                    shouldBeEqualToString('root.querySelectorAll("' + selector + '")[' + i + '].getAttribute("data-case")', '' + expectedCases[i]);
                }
            }

            debug("Trivial Selector used as rightmost");
            test("|div", [2]);
            test("*|div", [1, 2]);
            test("div", [1, 2]);

            shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'1\' i]")).color', 'rgb(4, 5, 6)');
            shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'1\' i]")).backgroundColor', 'rgb(1, 2, 3)');
            shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'2\' i]")).color', 'rgb(1, 2, 3)');
            shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'2\' i]")).backgroundColor', 'rgb(4, 5, 6)');
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>