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