blob: d4830ef70fb883aa0d74ae5c00285b8f94b2fe4a [file] [log] [blame]
<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div id="area1">
<div></div>
<div class="cappuccino"></div>
<div class="cocoa"></div>
<a></a>
<div></div>
<span class="cappuccino"></span>
<div class="cocoa"></div>
<p></p>
</div>
<div id="area2">
<p>
<span class="cappuccino"><span></span></span>
<span class="cocoa"></span>
</p>
</div>
<div id="area3">
<span class="cocoa">
<p>
<span class="cappuccino"></span>
<span class="cappuccino"></span>
</p>
</span>
<span class="tea"></span>
</div>
<div id="area4">
<span class="cocoa"></span>
<span class="cocoa"></span>
<span class="cappuccino"></span>
<span class="cappuccino"></span>
</div>
<div id="area5">
<span class="cocoa"></span>
</div>
<pre id='console'></pre>
</body>
<script>
description('Test queries with the :is selectors.');
shouldBe("document.body.querySelectorAll('#area1 > :is(div, p)').length", "6");
shouldBe("document.body.querySelectorAll('#area1 > :is(p, span)').length", "2");
shouldBe("document.body.querySelectorAll('#area1 > :is(div, p, span)').length", "7");
shouldBe("document.body.querySelectorAll('#area1 > :is(:not(div), :not(p))').length", "8");
shouldBe("document.body.querySelectorAll('#area1 > :is(.cocoa, .cappuccino)').length", "4");
shouldBe("document.body.querySelectorAll('#area2 :is(p > .cocoa, p > .cappuccino)').length", "2");
shouldBe("document.body.querySelectorAll('#area2 :is(.cocoa, p > .cappuccino)').length", "2");
shouldBe("document.body.querySelectorAll('#area2 :is(div > .cocoa, p > .cappuccino)').length", "1");
shouldBe("document.body.querySelectorAll('#area2 :is(.cappuccino, p) > span').length", "3");
shouldBe("document.body.querySelectorAll('#area3 :is(.cocoa .cappuccino, .tea)').length", "3");
shouldBe("document.body.querySelectorAll('#area3 :is(.cocoa > .cappuccino, .tea)').length", "1");
shouldBe("document.body.querySelectorAll('#area4 :is(.cocoa + .cappuccino)').length", "1");
shouldBe("document.body.querySelectorAll('#area4 :is(.cocoa ~ .cappuccino)').length", "2");
shouldBe("document.body.querySelectorAll('#area4 :is(.cocoa ~ :is(.cocoa, .cappuccino))').length", "3");
// When using querySelector, the selectors containing the pseudo elements cannot match.
shouldBe("document.body.querySelectorAll('#area5 :is(.cocoa::first-letter)').length", "0");
shouldBe("document.body.querySelectorAll('#area5 :is(.cocoa::first-letter, .cocoa)').length", "1");
</script>
<script src="../../resources/js-test-post.js"></script>
</html>