105 lines
3.9 KiB
HTML
105 lines
3.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.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>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|