third_party/WebKit/LayoutTests/fast/table/switch-table-layout-multiple-section.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5 #container {
   6     width: 1px;
   7 }
   8 #table {
   9     width: 300px;
  10     table-layout: fixed;
  11 }
  12 td {
  13     padding: 0;
  14 }
  15 .wide {
  16     width: 100px;
  17 }
  18 </style>
  19 <script src="../../resources/check-layout.js"></script>
  20 </head>
  21 <body>
  22     This test verifies table cell width is correctly updated after a table-layout change.
  23     <div id="container">
  24         <table id="table">
  25             <thead><tr><td data-expected-width="100"></td><td data-expected-width="100"></td><td class="wide" data-expected-width="100"></td></tr></thead>
  26             <tbody><tr><td data-expected-width="100"></td><td class="wide" data-expected-width="100"></td><td data-expected-width="100"></td></tr></tbody>
  27             <tfoot><tr><td class="wide" data-expected-width="100"></td><td data-expected-width="100"></td><td data-expected-width="100"></td></tr></tfoot>
  28         </table>
  29     </div>
  30     <div id="test-output"></div>
  31 </body>
  32 <script>
  33 document.body.offsetTop;
  34
  35 var container = document.getElementById('container');
  36 container.style.setProperty('width', '500px');
  37
  38 var table = document.getElementById('table');
  39 table.style.setProperty('table-layout', 'auto');
  40 table.style.setProperty('width', 'auto');
  41
  42 window.checkLayout("td", document.getElementById("test-output"));
  43 </script>
  44 </html>