third_party/WebKit/LayoutTests/fast/repaint/table-section-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 caption1 = document.getElementById("caption1");
  18             caption1.style.height = "0";
  19
  20             var caption2 = document.getElementById("caption2");
  21             caption2.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         <table cellpadding="0" cellspacing="0">
  34             <caption id="caption1" class="blue half"></caption>
  35             <tbody>
  36                 <tr>
  37                     <td class="red half"></td>
  38                 </tr>
  39                 <tr>
  40                     <td class="green half"></td>
  41                 </tr>
  42             </tbody>
  43         </table>
  44     </div>
  45
  46     <div class="playground">
  47         <table cellpadding="0" cellspacing="0">
  48             <tbody>
  49                 <tr>
  50                     <td><div id="top" class="blue half"></div></td>
  51                 </tr>
  52             </tbody>
  53             <tbody>
  54                 <tr>
  55                     <td class="red half"></td>
  56                 </tr>
  57                 <tr>
  58                     <td class="green half"></td>
  59                 </tr>
  60             </tbody>
  61         </table>
  62     </div>
  63
  64     <div class="playground">
  65         <table cellpadding="0" cellspacing="0">
  66             <caption id="caption2" class="zero"></caption>
  67             <tbody>
  68                 <tr>
  69                     <td class="green half"></td>
  70                 </tr>
  71                 <tr>
  72                     <td class="red half"></td>
  73                 </tr>
  74             </tbody>
  75         </table>
  76     </div>
  77
  78     <div class="playground" style="margin-top: 30px;">
  79         <table cellpaddin="0" cellspacing="0" style="width: 60px; border-collapse: collapse; border: 8px solid green;">
  80             <caption style="width: 10px; margin: auto;">
  81                 <div id="innerDiv"></div>
  82             </caption>
  83             <tbody>
  84                 <tr><td class="half"></td></tr>
  85                 <tr><td class="half" style="border-top: solid yellow 8px;"></td></tr>
  86             </tbody>
  87         </table>
  88     </div>
  89 </body>
  90 </html>