layout/reftests/bugs/556661-1.html

   1 <!doctype html>
   2 <html><head><title>Dynamic manipulation of !important</title>
   3 <style>
   4 div { float: left; width: 50px; height: 50px; margin: 5px }
   5 div#control {
   6   width: 230px;
   7   background-color: green !important;
   8   background-color: red;
   9 }
  10 div#a { background-color: green }
  11 div#b { background-color: orange }
  12 div.c { background-color: orange }
  13 div#d { background-color: orange }
  14 div#e { background-color: green }
  15 div#f { background-color: orange }
  16 div.g { background-color: orange }
  17 div#h { background-color: orange }
  18 p { clear: left }
  19 </style>
  20 <style>
  21 div.a { background-color: red !important }
  22 div.b { background-color: red !important }
  23 div#c { background-color: red }
  24 div.d { background-color: red }
  25 div.e { background-color: red !important }
  26 div.f { background-color: red !important }
  27 div#g { background-color: red }
  28 div.h { background-color: red }
  29 </style>
  30 <script>
  31 window.onload = function() {
  32   var r = document.styleSheets[1].cssRules;
  33   r[0].style.setProperty("background-color", "yellow", "");
  34   r[1].style.setProperty("background-color", "green", "important");
  35   r[2].style.setProperty("background-color", "green", "");
  36   r[3].style.setProperty("background-color", "green", "important");
  37
  38   r[4].style.removeProperty("background-color");
  39   r[4].style.setProperty("background-color", "yellow", "");
  40   r[5].style.removeProperty("background-color");
  41   r[5].style.setProperty("background-color", "green", "important");
  42   r[6].style.removeProperty("background-color");
  43   r[6].style.setProperty("background-color", "green", "");
  44   r[7].style.removeProperty("background-color");
  45   r[7].style.setProperty("background-color", "green", "important");
  46 }
  47 </script>
  48 <body>
  49 <div class="a" id="a"></div>
  50 <div class="b" id="b"></div>
  51 <div class="c" id="c"></div>
  52 <div class="d" id="d"></div>
  53 <p></p>
  54 <div class="e" id="e"></div>
  55 <div class="f" id="f"></div>
  56 <div class="g" id="g"></div>
  57 <div class="h" id="h"></div>
  58 <p></p>
  59 <div id="control"></div>
  60 <p>There should be two rows of four green squares and one solid green
  61    bar above.</p>
  62 </body>
  63 </html>