LayoutTests/fast/css/pseudo-valid-dynamic.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../js/resources/js-test-pre.js"></script>
   5 <style id="sty">
   6     input { background: blue; }
   7 </style>
   8 </head>
   9 <body>
  10 <p id="description"></p>
  11 <form method="get">
  12 <input name="victim" type="text"/>
  13 <input name="victim" type="text" value="Loremipsum" pattern="Lorem ipsum"/>
  14 </form>
  15 <div id="console"></div>
  16 <script>
  17 description("This test checks that input element that share style, no longer share style after validity rules are dynamically added.");
  18
  19 var s1 = document.getElementById('sty').sheet;
  20 s1.insertRule(':valid { background: lime; }', s1.cssRules.length);
  21
  22 v = document.getElementsByTagName("input");
  23
  24 shouldBe("document.defaultView.getComputedStyle(v[0], null).getPropertyValue('background-color')", "'rgb(0, 255, 0)'");
  25 shouldBe("document.defaultView.getComputedStyle(v[1], null).getPropertyValue('background-color')", "'rgb(0, 0, 255)'");
  26 </script>
  27 <script src="../js/resources/js-test-post.js"></script>
  28 </body>
  29 </html>