third_party/WebKit/LayoutTests/fast/css/id-or-class-before-stylesheet-strict.html

   1 <!DOCTYPE html>
   2 <html lang=en>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <style>
   6 #testid { background-color: red; }
   7 #testID2 { background-color: red; }
   8 .testclass { background-color: red; }
   9 .testClass2 { background-color: red; }
  10 </style>
  11 </head>
  12 <body>
  13 <div id=testid>id test</div>
  14 <style>
  15 #testid { background-color: green }
  16 </style>
  17 <div class=testclass>class test</div>
  18 <style>
  19 .testclass { background-color: green; }
  20 </style>
  21 <div id=testID2>case insensitive id test</div>
  22 <style>
  23 #TESTid2 { background-color: green }
  24 </style>
  25 <div class=testClass2>case insensitive class test</div>
  26 <style>
  27 .TESTclass2 { background-color: green; }
  28 </style>
  29 <script>
  30 description("Test that elements before inline stylesheets get their style updated properly");
  31 shouldBe('window.getComputedStyle(document.getElementById("testid")).backgroundColor','"rgb(0, 128, 0)"');
  32 shouldBe('window.getComputedStyle(document.getElementsByClassName("testclass")[0]).backgroundColor','"rgb(0, 128, 0)"');
  33 shouldBe('window.getComputedStyle(document.getElementById("testID2")).backgroundColor','"rgb(255, 0, 0)"');
  34 shouldBe('window.getComputedStyle(document.getElementsByClassName("testClass2")[0]).backgroundColor','"rgb(255, 0, 0)"');
  35 </script>
  36 </body>