164 lines
3.6 KiB
HTML
164 lines
3.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
:-webkit-any(h1),
|
|
:-webkit-any( #div1, b ),
|
|
:-webkit-any(.foo, #bar),
|
|
:-webkit-any(i,p,:link,span:focus) {
|
|
background-color: blue;
|
|
}
|
|
|
|
#test-last-child :-webkit-any(:last-child),
|
|
:-webkit-any(:link:focus),
|
|
#container-div :-webkit-any(:link, :not(a)),
|
|
h1:-webkit-any(.h1class, #bar) {
|
|
background-color: green;
|
|
}
|
|
|
|
/* Only simple selectors should work. */
|
|
:-webkit-any() {
|
|
background-color: red;
|
|
}
|
|
|
|
:-webkit-any(s,:nonexistentpseudo) {
|
|
background-color: red;
|
|
}
|
|
|
|
div~q {
|
|
background-color: blue;
|
|
}
|
|
:-webkit-any(div ~ q) {
|
|
background-color: red;
|
|
}
|
|
:-webkit-any(div~q) {
|
|
background-color: red;
|
|
}
|
|
|
|
q+q {
|
|
background-color: blue;
|
|
}
|
|
:-webkit-any(q+q) {
|
|
background-color: red;
|
|
}
|
|
|
|
q>span {
|
|
background-color: blue;
|
|
}
|
|
:-webkit-any(q>span) {
|
|
background-color: red;
|
|
}
|
|
|
|
div span {
|
|
background-color: blue;
|
|
}
|
|
:-webkit-any(div span) {
|
|
background-color: red;
|
|
}
|
|
:-webkit-any( div span ) {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
This page tests :-webkit-any. This window needs to be focused for the :focus tests to pass.<br>
|
|
<h1>h1</h1>
|
|
<h1 class="h1class">h1</h1>
|
|
<div id="div1">div</div>
|
|
<div>foo</div>
|
|
<b>b</b>
|
|
<i>i</i>
|
|
<p>p</p>
|
|
<a href="http://webkit.org">a</a>
|
|
<span id="span1">span<span>
|
|
<li class="foo">li</li>
|
|
<u id="bar">u</u>
|
|
<s>s</s>
|
|
<div id="container-div"><input type='text'><a href='http://www.example.com/'></a><div></div><a name='foo'></div>
|
|
<div><span>div span</span></div>
|
|
<q>div~q</q>
|
|
<q>q+q</q>
|
|
<q><span>q>span</span></q>
|
|
<div id="test-last-child"><p>first</p><p>last</p></div>
|
|
<pre id="console"></pre>
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
function assertColor(selectorOrElement, rbgColor)
|
|
{
|
|
debug("");
|
|
|
|
if (typeof selectorOrElement == "string") {
|
|
debug(selectorOrElement);
|
|
element = document.querySelector(selectorOrElement);
|
|
} else {
|
|
debug("Element: " + element.nodeName);
|
|
element = selectorOrElement;
|
|
}
|
|
|
|
shouldBe("document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color')", rbgColor);
|
|
}
|
|
|
|
function assertBlue(selectorOrElement)
|
|
{
|
|
assertColor(selectorOrElement, "'rgb(0, 0, 255)'")
|
|
}
|
|
|
|
function assertWhite(selectorOrElement)
|
|
{
|
|
assertColor(selectorOrElement, "'rgba(0, 0, 0, 0)'")
|
|
}
|
|
|
|
function assertGreen(selectorOrElement)
|
|
{
|
|
assertColor(selectorOrElement, "'rgb(0, 128, 0)'")
|
|
}
|
|
|
|
function focus(selector)
|
|
{
|
|
var element = document.querySelector(selector);
|
|
element.tabIndex = -1;
|
|
element.focus();
|
|
}
|
|
|
|
assertBlue("h1");
|
|
assertBlue("#div1");
|
|
|
|
// Ensure the div with ID after the first div does not share a RenderStyle with the first div.
|
|
assertWhite(document.querySelectorAll("div")[1]);
|
|
|
|
assertBlue("b");
|
|
assertBlue("i");
|
|
assertBlue("p");
|
|
|
|
assertWhite("#span1");
|
|
focus("#span1");
|
|
assertBlue("span:focus");
|
|
|
|
assertBlue("a");
|
|
focus("a");
|
|
assertGreen("a:focus");
|
|
|
|
assertBlue(".foo");
|
|
assertBlue("#bar");
|
|
|
|
assertGreen("h1.h1class");
|
|
|
|
debug("");
|
|
shouldBe("document.querySelectorAll('#container-div :-webkit-any([href],input[type],input[name])').length", "2");
|
|
shouldBe("document.querySelectorAll('#container-div :-webkit-any(div,a):-webkit-any([type],[href],[name])').length", "2");
|
|
shouldBe("document.querySelectorAll('#container-div :-webkit-any(:link, :not(a))').length", "3");
|
|
assertGreen("#container-div input");
|
|
assertGreen("#container-div a[href]");
|
|
assertGreen("#container-div div");
|
|
assertWhite("#container-div a[name]");
|
|
|
|
assertWhite("s");
|
|
assertBlue("div span");
|
|
assertBlue("div ~ q");
|
|
assertBlue("q+q");
|
|
assertBlue("q>span");
|
|
|
|
assertBlue("#test-last-child :first-child");
|
|
assertGreen("#test-last-child :last-child");
|
|
</script>
|