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