third_party/WebKit/LayoutTests/fast/repaint/block-shift-repaint.html

   1 <html>
   2 <head>
   3     <title>Test for http://bugs.webkit.org/show_bug.cgi?id=12079</title>
   4     <style type="text/css">
   5         div.playground { position: relative; width: 90px; height: 90px; }
   6         .red { background-color: yellow; }
   7         .blue { background-color: blue; }
   8         .green { background-color: green; }
   9         .zero { height: 0; width: 60px; }
  10         .half { height: 30px; width: 60px; }
  11         .full { height: 60px; width: 60px; }
  12     </style>
  13     <script src="resources/text-based-repaint.js" type="text/javascript"></script>
  14     <script type="text/javascript">
  15         function repaintTest()
  16         {
  17             var div1 = document.getElementById("div1");
  18             div1.style.height = "0";
  19
  20             var div2 = document.getElementById("div2");
  21             div2.style.height = "30px";
  22
  23             var top = document.getElementById("top");
  24             top.style.height = "0";
  25
  26             var top = document.getElementById("innerDiv");
  27             innerDiv.style.height = "15px";
  28         }
  29     </script>
  30 </head>
  31 <body onload="runRepaintTest()">
  32     <div class="playground">
  33         <div id="div1" class="blue half"></div>
  34         <div class="red half"></div>
  35         <div class="green half"></div>
  36     </div>
  37
  38     <div class="playground">
  39         <div><div id="top" class="blue half"></div></div>
  40         <div class="red half"></div>
  41         <div class="green half"></div>
  42     </div>
  43
  44     <div class="playground">
  45         <div id="div2" class="zero"></div>
  46         <div class="green half"></div>
  47         <div class="red half"></div>
  48     </div>
  49
  50     <div class="playground" style="margin-top: 30px;">
  51         <div style="width: 10px; margin: auto;">
  52             <div id="innerDiv"></div>
  53         </div>
  54         <div class="half"></div>
  55         <div class="half" style="border-top: solid yellow 8px;"></div>
  56     </div>
  57 </body>
  58 </html>