third_party/WebKit/LayoutTests/paint/invalidation/spv2/block-shift-repaint.html

   1 <!-- Based on fast/repaint/block-shift-repaint.html -->
   2 <html>
   3 <head>
   4     <title>Test for http://bugs.webkit.org/show_bug.cgi?id=12079</title>
   5     <style type="text/css">
   6         div.playground { position: relative; width: 90px; height: 90px; }
   7         .red { background-color: yellow; }
   8         .blue { background-color: blue; }
   9         .green { background-color: green; }
  10         .zero { height: 0; width: 60px; }
  11         .half { height: 30px; width: 60px; }
  12         .full { height: 60px; width: 60px; }
  13     </style>
  14     <script src="resources/paint-invalidation-test.js" type="text/javascript"></script>
  15     <script type="text/javascript">
  16         window.expectedPaintInvalidationObjects = [
  17             "LayoutBlockFlow DIV id='div1' class='blue half'",
  18             "LayoutBlockFlow DIV class='red half'",
  19             "LayoutBlockFlow DIV class='green half'",
  20             "LayoutBlockFlow DIV id='top' class='blue half'",
  21             "LayoutBlockFlow DIV class='red half'",
  22             "LayoutBlockFlow DIV class='green half'",
  23             "LayoutBlockFlow DIV id='div2' class='zero'",
  24             "LayoutBlockFlow DIV class='green half'",
  25             "LayoutBlockFlow DIV class='red half'",
  26             "LayoutBlockFlow DIV id='innerDiv'",
  27             "LayoutBlockFlow DIV class='half'",
  28             "LayoutBlockFlow DIV class='half'",
  29         ];
  30         function paintInvalidationTest()
  31         {
  32             var div1 = document.getElementById("div1");
  33             div1.style.height = "0";
  34
  35             var div2 = document.getElementById("div2");
  36             div2.style.height = "30px";
  37
  38             var top = document.getElementById("top");
  39             top.style.height = "0";
  40
  41             var top = document.getElementById("innerDiv");
  42             innerDiv.style.height = "15px";
  43         }
  44     </script>
  45 </head>
  46 <body onload="runPaintInvalidationTest()">
  47     <div class="playground">
  48         <div id="div1" class="blue half"></div>
  49         <div class="red half"></div>
  50         <div class="green half"></div>
  51     </div>
  52
  53     <div class="playground">
  54         <div><div id="top" class="blue half"></div></div>
  55         <div class="red half"></div>
  56         <div class="green half"></div>
  57     </div>
  58
  59     <div class="playground">
  60         <div id="div2" class="zero"></div>
  61         <div class="green half"></div>
  62         <div class="red half"></div>
  63     </div>
  64
  65     <div class="playground" style="margin-top: 30px;">
  66         <div style="width: 10px; margin: auto;">
  67             <div id="innerDiv"></div>
  68         </div>
  69         <div class="half"></div>
  70         <div class="half" style="border-top: solid yellow 8px;"></div>
  71     </div>
  72 </body>
  73 </html>