<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>

#test1 :not(.evenclass1) { background-color: green; }
#test1 :not(h1) { background-color: blue; }
#test1 span { background-color: red; }

#test2 .evenclass2 { background-color: green; }
#test2 :not(h1) { background-color: blue; }

#test3 .evenclass3 { background-color: green; }
#test3 :not(.oddclass3) { background-color: red; }
#test3 :not(.evenclass3) { background-color: gray; }
#test3 .evenclass3 { background-color: blue; }

#test4 span { background-color: blue; }
#test4 :not(#span40) { background-color: green; }
#test4 .evenclass4 { background-color: red; }
#test4 #span42 { background-color: blue; }

</style>

</head>
<body>
<p id="description"></p>

debug("These spans should alternate red and green");
<div id="test1"></div><br>
debug("These spans should alternate green and blue");
<div id="test2"></div><br>
debug("These spans should alternate blue and gray");
<div id="test3"></div><br>
debug("These spans should be red, green, blue, green");
<div id="test4"></div><br>


<br>
<script>

function classForI(i) {
    if (Number(i) % 2 == 0)
        return "evenclass";
    return "oddclass";
}

var j = 1;
var i = 0;
for (; j < 5; j++) {
    var str = "";
    for (i = 0 ; i < 4; i++) {
        var theId = "span" + j + i;
        var theClass = classForI(i) + j;
        str += '<span class="' + theClass + '" id="' + theId + '" foo="' + theId +  '"> span  id= ' + theId + ' class = ' + theClass + '</span>';
    }
    document.getElementById("test" + j).innerHTML = str;
}


</script>

<div id="console"></div>
<script>
description('This test if the :not selector gets the specificity of its simple selector in various scenarios.');

debug("Test that :not selector with class name gets higher specificity than :not selector with tag name, or a selector with tag name");
el = document.getElementById("span10");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("span11");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");

debug("Test that :not selector with tag name does not get higher specificity than a selector with class name");
el = document.getElementById("span20");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");

el = document.getElementById("span21");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");

debug("Test that :not selector with class name gets the same specificity as any selector with class name");
el = document.getElementById("span30");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");

el = document.getElementById("span31");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(128, 128, 128)'");

debug("Test that :not selector with id gets higher specificity than a selector with class name, but the same specificity as any selector with id");
el = document.getElementById("span40");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("span41");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");

el = document.getElementById("span42");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");

el = document.getElementById("span43");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
</script>
</body>
</html>