| <!DOCTYPE HTML> |
| <script src="../../resources/js-test.js"></script> |
| |
| <style> |
| #test0 * { background-color: red; } |
| #test0 :first-of-type { background-color: blue; } |
| #test1 :-webkit-any(*) { background-color: red; } |
| #test1 :-webkit-any(:first-of-type) { background-color: blue; } |
| #test2 :not(i) { background-color: red; } |
| #test2 :not(:last-of-type) { background-color: blue; } |
| </style> |
| |
| <div id="test0"> |
| <p>test0 foo</p> |
| <p>test0 bar</p> |
| </div> |
| <div id="test1"> |
| <p>test1 foo</p> |
| <p>test1 bar</p> |
| </div> |
| <div id="test2"> |
| <p>test2 foo</p> |
| <p>test2 bar</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 assertRed(selectorOrElement) |
| { |
| assertColor(selectorOrElement, "'rgb(255, 0, 0)'") |
| } |
| |
| assertBlue("#test0 :first-of-type"); |
| assertRed("#test0 :last-of-type"); |
| assertBlue("#test1 :first-of-type"); |
| assertRed("#test1 :last-of-type"); |
| assertBlue("#test2 :first-of-type"); |
| assertRed("#test2 :last-of-type"); |
| </script> |
