third_party/WebKit/LayoutTests/fast/css/pseudo-not.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <style>
   6
   7 #test1 :not(.evenclass1) { background-color: green; }
   8 #test1 :not(h1) { background-color: blue; }
   9 #test1 span { background-color: red; }
  10
  11 #test2 .evenclass2 { background-color: green; }
  12 #test2 :not(h1) { background-color: blue; }
  13
  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; }
  18
  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; }
  23
  24 </style>
  25
  26 </head>
  27 <body>
  28 <p id="description"></p>
  29
  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>
  38
  39
  40 <br>
  41 <script>
  42
  43 function classForI(i) {
  44     if (Number(i) % 2 == 0)
  45         return "evenclass";
  46     return "oddclass";
  47 }
  48
  49 var j = 1;
  50 var i = 0;
  51 for (; j < 5; j++) {
  52     var str = "";
  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>';
  57     }
  58     document.getElementById("test" + j).innerHTML = str;
  59 }
  60
  61
  62 </script>
  63
  64 <div id="console"></div>
  65 <script>
  66 description('This test if the :not selector gets the specificity of its simple selector in various scenarios.');
  67
  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)'");
  71
  72 el = document.getElementById("span11");
  73 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
  74
  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)'");
  78
  79 el = document.getElementById("span21");
  80 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");
  81
  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)'");
  85
  86 el = document.getElementById("span31");
  87 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(128, 128, 128)'");
  88
  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)'");
  92
  93 el = document.getElementById("span41");
  94 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
  95
  96 el = document.getElementById("span42");
  97 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");
  98
  99 el = document.getElementById("span43");
 100 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(0, 128, 0)'");
 101 </script>
 102 </body>
 103 </html>