third_party/WebKit/LayoutTests/fast/css/pseudo-any.html

   1 <!DOCTYPE HTML>
   2 <script src="../../resources/js-test.js"></script>
   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
  11 #test-last-child :-webkit-any(:last-child),
  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>
  79 <div id="test-last-child"><p>first</p><p>last</p></div>
  80 <pre id="console"></pre>
  81
  82 <script>
  83 if (window.testRunner)
  84     testRunner.dumpAsText();
  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 ComputedStyle 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");
 160
 161 assertBlue("#test-last-child :first-child");
 162 assertGreen("#test-last-child :last-child");
 163 </script>