115 lines
5.4 KiB
HTML
115 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="with-renderer">
|
|
<!-- With renderer -->
|
|
<rect class="target1"></rect>
|
|
<Rect class="target2"></Rect>
|
|
<RECT class="target3"></RECT>
|
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
<rect class="target4"></rect>
|
|
<Rect class="target5"></Rect>
|
|
<RECT class="target6"></RECT>
|
|
</svg>
|
|
</div>
|
|
<div id="without-renderer" style="display:none;">
|
|
<!-- Without renderer -->
|
|
<rect class="target1"></rect>
|
|
<Rect class="target2"></Rect>
|
|
<RECT class="target3"></RECT>
|
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
<rect class="target4"></rect>
|
|
<Rect class="target5"></Rect>
|
|
<RECT class="target6"></RECT>
|
|
</svg>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
description("Test tagname's case-sensitivity when matching SVG-in-HTML with querySelector.");
|
|
|
|
var withRenderer = document.getElementById("with-renderer");
|
|
var withoutRenderer = document.getElementById("without-renderer");
|
|
|
|
var svgDocument = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg"><rect class="target7"></rect><Rect class="target8"></Rect><RECT class="target9"></RECT></svg>', 'text/xml');
|
|
withRenderer.appendChild(document.importNode(svgDocument.documentElement, true));
|
|
withoutRenderer.appendChild(document.importNode(svgDocument.documentElement, true));
|
|
|
|
function testSelector(selector, expectedClasses)
|
|
{
|
|
shouldBe("document.getElementById('with-renderer').querySelectorAll('" + selector + "').length", '' + expectedClasses.length);
|
|
shouldBe("document.getElementById('without-renderer').querySelectorAll('" + selector + "').length", '' + expectedClasses.length);
|
|
for (var i = 0; i < expectedClasses.length; ++i) {
|
|
shouldBeEqualToString("document.getElementById(\"with-renderer\").querySelectorAll('" + selector + "')[" + i + "].getAttribute('class')", "target" + expectedClasses[i]);
|
|
shouldBeEqualToString("document.getElementById(\"without-renderer\").querySelectorAll('" + selector + "')[" + i + "].getAttribute('class')", "target" + expectedClasses[i]);
|
|
}
|
|
}
|
|
|
|
debug("Basic cases, tagname alone.");
|
|
testSelector("rect", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector("Rect", [1, 2, 3, 8]);
|
|
testSelector("RECT", [1, 2, 3, 9]);
|
|
|
|
debug("");
|
|
debug("Compound selectors.");
|
|
testSelector("rect[class]", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector("Rect[class]", [1, 2, 3, 8]);
|
|
testSelector("RECT[class]", [1, 2, 3, 9]);
|
|
testSelector("rect[class^=\"target\"]", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector("Rect[class^=\"target\"]", [1, 2, 3, 8]);
|
|
testSelector("RECT[class^=\"target\"]", [1, 2, 3, 9]);
|
|
|
|
debug("");
|
|
debug("Complex selectors.");
|
|
testSelector("svg > rect[class]", [4, 5, 6, 7]);
|
|
testSelector("svg > Rect[class]", [8]);
|
|
testSelector("svg > RECT[class]", [9]);
|
|
testSelector("svg > rect[class^=\"target\"]", [4, 5, 6, 7]);
|
|
testSelector("svg > Rect[class^=\"target\"]", [8]);
|
|
testSelector("svg > RECT[class^=\"target\"]", [9]);
|
|
|
|
testSelector("div rect[class]", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector("div Rect[class]", [1, 2, 3, 8]);
|
|
testSelector("div RECT[class]", [1, 2, 3, 9]);
|
|
testSelector("div rect[class^=\"target\"]", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector("div Rect[class^=\"target\"]", [1, 2, 3, 8]);
|
|
testSelector("div RECT[class^=\"target\"]", [1, 2, 3, 9]);
|
|
|
|
testSelector(":root div rect[class]", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div Rect[class]", [1, 2, 3, 8]);
|
|
testSelector(":root div RECT[class]", [1, 2, 3, 9]);
|
|
testSelector(":root div rect[class^=\"target\"]", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div Rect[class^=\"target\"]", [1, 2, 3, 8]);
|
|
testSelector(":root div RECT[class^=\"target\"]", [1, 2, 3, 9]);
|
|
|
|
debug("");
|
|
debug("With functional pseudo classes.");
|
|
testSelector(":root div :is(not-there, rect[class])", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div :is(not-there, Rect[class])", [1, 2, 3, 8]);
|
|
testSelector(":root div :is(not-there, RECT[class])", [1, 2, 3, 9]);
|
|
testSelector(":root div :is(not-there, rect[class^=\"target\"])", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div :is(not-there, Rect[class^=\"target\"])", [1, 2, 3, 8]);
|
|
testSelector(":root div :is(not-there, RECT[class^=\"target\"])", [1, 2, 3, 9]);
|
|
|
|
testSelector(":root div :matches(not-there, rect[class])", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div :matches(not-there, Rect[class])", [1, 2, 3, 8]);
|
|
testSelector(":root div :matches(not-there, RECT[class])", [1, 2, 3, 9]);
|
|
testSelector(":root div :matches(not-there, rect[class^=\"target\"])", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div :matches(not-there, Rect[class^=\"target\"])", [1, 2, 3, 8]);
|
|
testSelector(":root div :matches(not-there, RECT[class^=\"target\"])", [1, 2, 3, 9]);
|
|
|
|
testSelector(":root div :nth-child(n of not-there, rect[class])", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div :nth-child(n of not-there, Rect[class])", [1, 2, 3, 8]);
|
|
testSelector(":root div :nth-child(n of not-there, RECT[class])", [1, 2, 3, 9]);
|
|
testSelector(":root div :nth-child(n of not-there, rect[class^=\"target\"])", [1, 2, 3, 4, 5, 6, 7]);
|
|
testSelector(":root div :nth-child(n of not-there, Rect[class^=\"target\"])", [1, 2, 3, 8]);
|
|
testSelector(":root div :nth-child(n of not-there, RECT[class^=\"target\"])", [1, 2, 3, 9]);
|
|
|
|
// Remove the content otherwise it will appear in the results.
|
|
withRenderer.style.display = 'none';
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|