| <!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> |
