third_party/WebKit/LayoutTests/fast/css/style-sharing-grand-parent-invalidate.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .outerx .mid .inner {
   6     background-color: red;
   7 }
   8 .outery .mid .inner {
   9     background-color: green;
  10 }
  11 .inner {
  12     width: 50px;
  13     height: 50px;
  14 }
  15 </style>
  16 <script>
  17 function test() {
  18     if (window.testRunner)
  19         testRunner.dumpAsText();
  20
  21     var x = document.getElementById("x");
  22     x.classList.add("outerx");
  23
  24     var y = document.getElementById("y");
  25     y.classList.add("outery");
  26
  27     var colorX = getComputedStyle(x.children[0].children[0]).backgroundColor;
  28     var colorY = getComputedStyle(y.children[0].children[0]).backgroundColor;
  29
  30     var result = document.getElementById("result")
  31     if (colorX == colorY)
  32         result.innerHTML = "FAIL";
  33     else
  34         result.innerHTML = "SUCCESS";
  35 }
  36 </script>
  37 </head>
  38 <body onload="test()">
  39 This test succeeds if the two blocks show red and green repectively: <span id="result"></span>
  40 <div id="x">
  41     <div class="mid">
  42         <div class="inner">
  43         </div>
  44     </div>
  45 </div>
  46 <div id="y">
  47     <div class="mid">
  48         <div class="inner">
  49         </div>
  50     </div>
  51 </div>
  52 </body>
  53 </html>