ojan@chromium.org | 5858c5d | 2011-03-23 01:44:38 +0000 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
mark.lam@apple.com | 104d993 | 2013-09-07 22:20:15 +0000 | [diff] [blame] | 2 | <script src="../../resources/js-test-pre.js"></script> |
ojan@chromium.org | 5858c5d | 2011-03-23 01:44:38 +0000 | [diff] [blame] | 3 | <style> |
| 4 | :-webkit-any(h1), |
| 5 | :-webkit-any( #div1, b ), |
| 6 | :-webkit-any(.foo, #bar), |
| 7 | :-webkit-any(i,p,:link,span:focus) { |
| 8 | background-color: blue; |
| 9 | } |
| 10 | |
ojan@chromium.org | 3fd44ea | 2011-03-29 02:30:37 +0000 | [diff] [blame] | 11 | #test-last-child :-webkit-any(:last-child), |
ojan@chromium.org | 5858c5d | 2011-03-23 01:44:38 +0000 | [diff] [blame] | 12 | :-webkit-any(:link:focus), |
| 13 | #container-div :-webkit-any(:link, :not(a)), |
| 14 | h1:-webkit-any(.h1class, #bar) { |
| 15 | background-color: green; |
| 16 | } |
| 17 | |
| 18 | /* Only simple selectors should work. */ |
| 19 | :-webkit-any() { |
| 20 | background-color: red; |
| 21 | } |
| 22 | |
| 23 | :-webkit-any(s,:nonexistentpseudo) { |
| 24 | background-color: red; |
| 25 | } |
| 26 | |
| 27 | div~q { |
| 28 | background-color: blue; |
| 29 | } |
| 30 | :-webkit-any(div ~ q) { |
| 31 | background-color: red; |
| 32 | } |
| 33 | :-webkit-any(div~q) { |
| 34 | background-color: red; |
| 35 | } |
| 36 | |
| 37 | q+q { |
| 38 | background-color: blue; |
| 39 | } |
| 40 | :-webkit-any(q+q) { |
| 41 | background-color: red; |
| 42 | } |
| 43 | |
| 44 | q>span { |
| 45 | background-color: blue; |
| 46 | } |
| 47 | :-webkit-any(q>span) { |
| 48 | background-color: red; |
| 49 | } |
| 50 | |
| 51 | div span { |
| 52 | background-color: blue; |
| 53 | } |
| 54 | :-webkit-any(div span) { |
| 55 | background-color: red; |
| 56 | } |
| 57 | :-webkit-any( div span ) { |
| 58 | background-color: red; |
| 59 | } |
| 60 | </style> |
| 61 | This page tests :-webkit-any. This window needs to be focused for the :focus tests to pass.<br> |
| 62 | <h1>h1</h1> |
| 63 | <h1 class="h1class">h1</h1> |
| 64 | <div id="div1">div</div> |
| 65 | <div>foo</div> |
| 66 | <b>b</b> |
| 67 | <i>i</i> |
| 68 | <p>p</p> |
| 69 | <a href="http://webkit.org">a</a> |
| 70 | <span id="span1">span<span> |
| 71 | <li class="foo">li</li> |
| 72 | <u id="bar">u</u> |
| 73 | <s>s</s> |
| 74 | <div id="container-div"><input type='text'><a href='http://www.example.com/'></a><div></div><a name='foo'></div> |
| 75 | <div><span>div span</span></div> |
| 76 | <q>div~q</q> |
| 77 | <q>q+q</q> |
| 78 | <q><span>q>span</span></q> |
ojan@chromium.org | 3fd44ea | 2011-03-29 02:30:37 +0000 | [diff] [blame] | 79 | <div id="test-last-child"><p>first</p><p>last</p></div> |
ojan@chromium.org | 5858c5d | 2011-03-23 01:44:38 +0000 | [diff] [blame] | 80 | <pre id="console"></pre> |
| 81 | |
| 82 | <script> |
rniwa@webkit.org | 38608af | 2012-06-19 07:23:13 +0000 | [diff] [blame] | 83 | if (window.testRunner) |
| 84 | testRunner.dumpAsText(); |
ojan@chromium.org | 5858c5d | 2011-03-23 01:44:38 +0000 | [diff] [blame] | 85 | |
| 86 | function assertColor(selectorOrElement, rbgColor) |
| 87 | { |
| 88 | debug(""); |
| 89 | |
| 90 | if (typeof selectorOrElement == "string") { |
| 91 | debug(selectorOrElement); |
| 92 | element = document.querySelector(selectorOrElement); |
| 93 | } else { |
| 94 | debug("Element: " + element.nodeName); |
| 95 | element = selectorOrElement; |
| 96 | } |
| 97 | |
| 98 | shouldBe("document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color')", rbgColor); |
| 99 | } |
| 100 | |
| 101 | function assertBlue(selectorOrElement) |
| 102 | { |
| 103 | assertColor(selectorOrElement, "'rgb(0, 0, 255)'") |
| 104 | } |
| 105 | |
| 106 | function assertWhite(selectorOrElement) |
| 107 | { |
| 108 | assertColor(selectorOrElement, "'rgba(0, 0, 0, 0)'") |
| 109 | } |
| 110 | |
| 111 | function assertGreen(selectorOrElement) |
| 112 | { |
| 113 | assertColor(selectorOrElement, "'rgb(0, 128, 0)'") |
| 114 | } |
| 115 | |
| 116 | function focus(selector) |
| 117 | { |
| 118 | var element = document.querySelector(selector); |
| 119 | element.tabIndex = -1; |
| 120 | element.focus(); |
| 121 | } |
| 122 | |
| 123 | assertBlue("h1"); |
| 124 | assertBlue("#div1"); |
| 125 | |
| 126 | // Ensure the div with ID after the first div does not share a RenderStyle with the first div. |
| 127 | assertWhite(document.querySelectorAll("div")[1]); |
| 128 | |
| 129 | assertBlue("b"); |
| 130 | assertBlue("i"); |
| 131 | assertBlue("p"); |
| 132 | |
| 133 | assertWhite("#span1"); |
| 134 | focus("#span1"); |
| 135 | assertBlue("span:focus"); |
| 136 | |
| 137 | assertBlue("a"); |
| 138 | focus("a"); |
| 139 | assertGreen("a:focus"); |
| 140 | |
| 141 | assertBlue(".foo"); |
| 142 | assertBlue("#bar"); |
| 143 | |
| 144 | assertGreen("h1.h1class"); |
| 145 | |
| 146 | debug(""); |
| 147 | shouldBe("document.querySelectorAll('#container-div :-webkit-any([href],input[type],input[name])').length", "2"); |
| 148 | shouldBe("document.querySelectorAll('#container-div :-webkit-any(div,a):-webkit-any([type],[href],[name])').length", "2"); |
| 149 | shouldBe("document.querySelectorAll('#container-div :-webkit-any(:link, :not(a))').length", "3"); |
| 150 | assertGreen("#container-div input"); |
| 151 | assertGreen("#container-div a[href]"); |
| 152 | assertGreen("#container-div div"); |
| 153 | assertWhite("#container-div a[name]"); |
| 154 | |
| 155 | assertWhite("s"); |
| 156 | assertBlue("div span"); |
| 157 | assertBlue("div ~ q"); |
| 158 | assertBlue("q+q"); |
| 159 | assertBlue("q>span"); |
ojan@chromium.org | 3fd44ea | 2011-03-29 02:30:37 +0000 | [diff] [blame] | 160 | |
| 161 | assertBlue("#test-last-child :first-child"); |
| 162 | assertGreen("#test-last-child :last-child"); |
ojan@chromium.org | 5858c5d | 2011-03-23 01:44:38 +0000 | [diff] [blame] | 163 | </script> |