pseudo-any.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../../resources/js-test.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 ComputedStyle 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>
chromium/third_party/blink/web_tests/fast/css/pseudo-any.html
