layout/style/test/test_bug357614.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=357614
   5 -->
   6 <head>
   7   <title>Test for Bug 357614</title>
   8   <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
   9   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <style type="text/css" id="style">
  11   a { color: red; }
  12   a { color: green; }
  13   </style>
  14   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  15 </head>
  16 <body>
  17 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=357614">Mozilla Bug 357614</a>
  18 <p id="display"><a href="http://www.FOO.com/" rel="next" rev="PREV" foo="bar">a link</a></p>
  19 <div id="content" style="display: none">
  20
  21 </div>
  22 <pre id="test">
  23 <script class="testbody" type="text/javascript">
  24
  25 /** Test for Bug 357614 **/
  26
  27 var sheet = document.getElementById("style").sheet;
  28 var rule1 = sheet.cssRules[0];
  29 var rule2 = sheet.cssRules[1];
  30
  31 var a = document.getElementById("display").firstChild;
  32 var cs = getComputedStyle(a, "");
  33
  34 function change_selector_text(selector) {
  35   // rule2.selectorText = selector; // NOT IMPLEMENTED
  36
  37   sheet.deleteRule(1);
  38   sheet.insertRule(selector + " { color: green; }", 1);
  39 }
  40
  41 var cs_green = cs.getPropertyValue("color");
  42 change_selector_text('p');
  43 var cs_red = cs.getPropertyValue("color");
  44 isnot(cs_green, cs_red, "computed values for green and red are different");
  45
  46 change_selector_text('a[href="http://www.FOO.com/"]');
  47 is(cs.getPropertyValue("color"), cs_green, "selector on href value matches case-sensitively");
  48
  49 change_selector_text('a[href="http://www.foo.com/"]');
  50 is(cs.getPropertyValue("color"), cs_red, "selector on href value does not match case-insensitively");
  51
  52 change_selector_text('a[rel="next"]');
  53 is(cs.getPropertyValue("color"), cs_green, "selector on rel value matches case-sensitively");
  54
  55 change_selector_text('a[rel="NEXT"]');
  56 is(cs.getPropertyValue("color"), cs_green, "selector on rel value matches case-insensitively");
  57
  58 change_selector_text('a[rev="PREV"]');
  59 is(cs.getPropertyValue("color"), cs_green, "selector on rev value matches case-sensitively");
  60
  61 change_selector_text('a[rev="prev"]');
  62 is(cs.getPropertyValue("color"), cs_green, "selector on rev value matches case-insensitively");
  63
  64 change_selector_text('a[foo="bar"]');
  65 is(cs.getPropertyValue("color"), cs_green, "selector on foo value matches case-sensitively");
  66
  67 change_selector_text('a[foo="Bar"]');
  68 is(cs.getPropertyValue("color"), cs_red, "selector on foo value does not match case-insensitively");
  69
  70 </script>
  71 </pre>
  72 </body>
  73 </html>
  74