test_cascade.html (3296B)
1 <!DOCTYPE HTML> 2 <!-- vim: set shiftwidth=4 tabstop=8 autoindent expandtab: --> 3 <!-- This Source Code Form is subject to the terms of the Mozilla Public 4 - License, v. 2.0. If a copy of the MPL was not distributed with this 5 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 6 <html> 7 <head> 8 <title>Test for Author style sheet aspects of CSS cascading</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 <style type="text/css"> 12 13 </style> 14 </head> 15 <body id="thebody"> 16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 17 <div class="content_class" id="content" style="position:relative"></div> 18 <pre id="test"> 19 <script class="testbody" type="text/javascript"> 20 21 /** Test for Author style sheet aspects of CSS cascading */ 22 23 var style_element = document.createElement("style"); 24 var style_contents = document.createTextNode(""); 25 style_element.appendChild(style_contents); 26 document.getElementsByTagName("head")[0].appendChild(style_element); 27 28 var div = document.getElementById("content"); 29 var cs = window.getComputedStyle(div); 30 var zindex = 0; 31 32 /** 33 * Given the selectors |sel1| and |sel2|, in that order (the "order" 34 * aspect of the cascade), with declarations that are !important if 35 * |imp1|/|imp2| are true, assert that the one that wins in the 36 * cascading order is given by |winning| (which must be either 1 or 2). 37 */ 38 function do_test(sel1, imp1, sel2, imp2, winning) { 39 var ind1 = ++zindex; 40 var ind2 = ++zindex; 41 style_contents.data = 42 sel1 + " { z-index: " + ind1 + (imp1 ? "!important" :"") + " } " + 43 sel2 + " { z-index: " + ind2 + (imp2 ? "!important" :"") + " } "; 44 var result = cs.zIndex; 45 is(result, String((winning == 1) ? ind1 : ind2), 46 "cascading of " + style_contents.data); 47 } 48 49 // Test order, and order combined with !important 50 do_test("div", false, "div", false, 2); 51 do_test("div", false, "div", true, 2); 52 do_test("div", true, "div", false, 1); 53 do_test("div", true, "div", true, 2); 54 55 // Test specificity on a single element 56 do_test("div", false, "div.content_class", false, 2); 57 do_test("div.content_class", false, "div", false, 1); 58 59 // Test specificity across elements 60 do_test("body#thebody div", false, "body div.content_class", false, 1); 61 do_test("body div.content_class", false, "body#thebody div", false, 2); 62 63 // Test specificity combined with !important 64 do_test("div.content_class", false, "div", false, 1); 65 do_test("div.content_class", true, "div", false, 1); 66 do_test("div.content_class", false, "div", true, 2); 67 do_test("div.content_class", true, "div", true, 1); 68 69 function do_test_greater(sel1, sel2) { 70 do_test(sel1, false, sel2, false, 1); 71 do_test(sel2, false, sel1, false, 2); 72 } 73 74 function do_test_equal(sel1, sel2) { 75 do_test(sel1, false, sel2, false, 2); 76 do_test(sel2, false, sel1, false, 2); 77 } 78 79 // Test specificity of contents of :not() 80 do_test_equal("div.content_class", "div:not(.wrong_class)"); 81 do_test_greater("div.content_class.content_class", "div.content_class"); 82 do_test_greater("div.content_class", "div"); 83 do_test_greater("div:not(.wrong_class)", "div"); 84 do_test_greater("div:not(.wrong_class):not(.wrong_class)", 85 "div:not(.wrong_class)"); 86 87 </script> 88 </pre> 89 </body> 90 </html>