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

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

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

function shouldMatch(sourceID, selector)
{
    shouldBeTrue("document.getElementById('" + sourceID + "').matches('" + selector + "')")
}

function shouldNotMatch(sourceID, selector)
{
    shouldBeFalse("document.getElementById('" + sourceID + "').matches('" + selector + "')")
}

debug("Basic cases, tagname alone.");
shouldMatch("container1", "Container");
shouldMatch("container1", "container");
shouldMatch("container1", "CONTAINER");

shouldMatch("container2", "Container");
shouldMatch("container2", "container");
shouldMatch("container2", "CONTAINER");

shouldMatch("container3", "Container");
shouldMatch("container3", "container");
shouldMatch("container3", "CONTAINER");

shouldNotMatch("container4", "Container");
shouldMatch("container4", "container");
shouldNotMatch("container4", "CONTAINER");

shouldNotMatch("container5", "Container");
shouldMatch("container5", "container");
shouldNotMatch("container5", "CONTAINER");

shouldNotMatch("container6", "Container");
shouldMatch("container6", "container");
shouldNotMatch("container6", "CONTAINER");

shouldNotMatch("container7", "Container");
shouldNotMatch("container7", "container");
shouldMatch("container7", "CONTAINER");

shouldNotMatch("container8", "Container");
shouldMatch("container8", "container");
shouldNotMatch("container8", "CONTAINER");

shouldMatch("container9", "Container");
shouldNotMatch("container9", "container");
shouldNotMatch("container9", "CONTAINER");

debug("");
debug("Complex selectors");
shouldMatch("container1", "div Container");
shouldMatch("container1", "div container");
shouldMatch("container1", "div CONTAINER");

shouldMatch("container2", "div Container");
shouldMatch("container2", "div container");
shouldMatch("container2", "div CONTAINER");

shouldMatch("container3", "div Container");
shouldMatch("container3", "div container");
shouldMatch("container3", "div CONTAINER");

shouldNotMatch("container4", "div Container");
shouldMatch("container4", "div container");
shouldNotMatch("container4", "div CONTAINER");

shouldNotMatch("container5", "div Container");
shouldMatch("container5", "div container");
shouldNotMatch("container5", "div CONTAINER");

shouldNotMatch("container6", "div Container");
shouldMatch("container6", "div container");
shouldNotMatch("container6", "div CONTAINER");

shouldNotMatch("container7", "div Container");
shouldNotMatch("container7", "div container");
shouldMatch("container7", "div CONTAINER");

shouldNotMatch("container8", "div Container");
shouldMatch("container8", "div container");
shouldNotMatch("container8", "div CONTAINER");

shouldMatch("container9", "div Container");
shouldNotMatch("container9", "div container");
shouldNotMatch("container9", "div CONTAINER");
</script>
<script src="../../resources/js-test-post.js"></script>
</html>