<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
    <div id="test-cases" style="display:none;">
        <CONTAINER class="container1">
            <container class="container2">
                <Container class="container3">
                    <target id="target1"></target>
                </Container>
            </container>
        </CONTAINER>
        <svg xmlns="http://www.w3.org/2000/svg">
            <CONTAINER class="container1">
                <container class="container2">
                    <Container class="container3">
                        <target id="target2"></target>
                    </Container>
                </container>
            </CONTAINER>
        </svg>
    </div>
</body>
<script>
description("Test tagname's case-sensitivity when matching SVG-in-HTML with Element.closest().");

var testCases = document.getElementById("test-cases");

var svgDocument = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg"><CONTAINER class="container1"><container class="container2"><Container class="container3"><target id="target3"></target></Container></container></CONTAINER></svg>', 'text/xml');
testCases.appendChild(document.importNode(svgDocument.documentElement, true));

function testSelector(sourceID, selector, expectedClass)
{
    if (expectedClass)
        shouldBeEqualToString("document.getElementById('" + sourceID + "').closest('" + selector + "').getAttribute('class')", '' + expectedClass);
    else
        shouldBe("document.getElementById('" + sourceID + "').closest('" + selector + "')", "null");
}

debug("Basic cases, tagname alone.");
testSelector("target1", "Container", "container3");
testSelector("target1", "container", "container3");
testSelector("target1", "CONTAINER", "container3");

testSelector("target2", "Container");
testSelector("target2", "container", "container3");
testSelector("target2", "CONTAINER");

testSelector("target3", "Container", "container3");
testSelector("target3", "container", "container2");
testSelector("target3", "CONTAINER", "container1");

debug("");
debug("Compound selectors.");
testSelector("target1", "Container[class^=\"container\"]", "container3");
testSelector("target1", "container[class^=\"container\"]", "container3");
testSelector("target1", "CONTAINER[class^=\"container\"]", "container3");

testSelector("target2", "Container[class^=\"container\"]");
testSelector("target2", "container[class^=\"container\"]", "container3");
testSelector("target2", "CONTAINER[class^=\"container\"]");

testSelector("target3", "Container[class^=\"container\"]", "container3");
testSelector("target3", "container[class^=\"container\"]", "container2");
testSelector("target3", "CONTAINER[class^=\"container\"]", "container1");


debug("");
debug("Complex selectors.");
testSelector("target1", "div Container", "container3");
testSelector("target1", "div container", "container3");
testSelector("target1", "div CONTAINER", "container3");

testSelector("target2", "div Container");
testSelector("target2", "div container", "container3");
testSelector("target2", "div CONTAINER");

testSelector("target3", "div Container", "container3");
testSelector("target3", "div container", "container2");
testSelector("target3", "div CONTAINER", "container1");

testSelector("target3", "container > Container", "container3");
testSelector("target3", "CONTAINER > Container");
testSelector("target3", "Container > Container");
testSelector("target3", "CONTAINER > container", "container2");
testSelector("target3", "Container > container");
testSelector("target3", "container > container");

</script>
<script src="../../resources/js-test-post.js"></script>
</html>