third_party/WebKit/LayoutTests/fast/table/resize-table-width-using-col-span.html

   1 <!DOCTYPE html>
   2 <style>
   3     #thecol { width: 200px; }
   4     td { height: 25px; }
   5 </style>
   6 <script type="text/javascript">
   7     onload = function () {
   8         var col = document.getElementById('thecol');
   9         var output = document.getElementById('test-output');
  10         col.offsetTop;
  11         col.style.width="100px";
  12         checkLayout("#td1", output);
  13         checkLayout("#td2", output);
  14         checkLayout("#td3", output);
  15         checkLayout("#td4", output);
  16         checkLayout("#td5", output);
  17         checkLayout("#td6", output);
  18         checkLayout("#td7", output);
  19         checkLayout("#td8", output);
  20         checkLayout("#td9", output);
  21     }
  22 </script>
  23 <script src="../../resources/check-layout.js"></script>
  24 Tests that the width of table cell changes on changing the colgroup width to new width.
  25 <table>
  26     <colgroup>
  27         <col id="thecol" span="4" style="background-color:red">
  28     </colgroup>
  29     <thead>
  30         <tr>
  31             <td id="td1" data-expected-width="100"></td>
  32             <td id="td2" data-expected-width="100"></td>
  33             <td id="td3" data-expected-width="100"></td>
  34         </tr>
  35     </thead>
  36     <tfoot>
  37         <tr>
  38             <td id="td4" data-expected-width="100"></td>
  39             <td id="td5" data-expected-width="100"></td>
  40             <td id="td6" data-expected-width="100"></td>
  41         </tr>
  42     </tfoot>
  43     <tbody>
  44         <tr>
  45             <td id="td7" data-expected-width="100"></td>
  46             <td id="td8" data-expected-width="100"></td>
  47             <td id="td9" data-expected-width="100"></td>
  48         </tr>
  49     </tbody>
  50 </table>
  51 <div id="test-output"></div>