<!DOCTYPE HTML>
<script src="../../resources/js-test-pre.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>