<!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>
Codebase Browser
chromium