1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
4 <script src="../js/resources/js-test-pre.js"></script>
7 #test1 :not(.evenclass1) { background-color: green; }
8 #test1 :not(h1) { background-color: blue; }
9 #test1 span { background-color: red; }
11 #test2 .evenclass2 { background-color: green; }
12 #test2 :not(h1) { background-color: blue; }
14 #test3 .evenclass3 { background-color: green; }
15 #test3 :not(.oddclass3) { background-color: red; }
16 #test3 :not(.evenclass3) { background-color: gray; }
17 #test3 .evenclass3 { background-color: blue; }
19 #test4 span { background-color: blue; }
20 #test4 :not(#span40) { background-color: green; }
21 #test4 .evenclass4 { background-color: red; }
22 #test4 #span42 { background-color: blue; }
28 <p id="description"></p>
30 debug("These spans should alternate red and green");
31 <div id="test1"></div><br>
32 debug("These spans should alternate green and blue");
33 <div id="test2"></div><br>
34 debug("These spans should alternate blue and gray");
35 <div id="test3"></div><br>
36 debug("These spans should be red, green, blue, green");
37 <div id="test4"></div><br>
43 function classForI(i) {
44 if (Number(i) % 2 == 0)
53 for (i = 0 ; i < 4; i++) {
54 var theId = "span" + j + i;
55 var theClass = classForI(i) + j;
56 str += '<span class="' + theClass + '" id="' + theId + '" foo="' + theId + '"> span id= ' + theId + ' class = ' + theClass + '</span>';
58 document.getElementById("test" + j).innerHTML = str;
64 <div id="console"></div>
66 description('This test if the :not selector gets the specificity of its simple selector in various scenarios.');
68 debug("Test that :not selector with class name gets higher specificity than :not selector with tag name, or a selector with tag name");
69 el = document.getElementById("span10");
70 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");
72 el = document.getElementById("span11");
73 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
75 debug("Test that :not selector with tag name does not get higher specificity than a selector with class name");
76 el = document.getElementById("span20");
77 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
79 el = document.getElementById("span21");
80 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");
82 debug("Test that :not selector with class name gets the same specificity as any selector with class name");
83 el = document.getElementById("span30");
84 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");
86 el = document.getElementById("span31");
87 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(128, 128, 128)'");
89 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");
90 el = document.getElementById("span40");
91 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");
93 el = document.getElementById("span41");
94 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
96 el = document.getElementById("span42");
97 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");
99 el = document.getElementById("span43");
100 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
102 <script src="../js/resources/js-test-post.js"></script>