third_party/WebKit/LayoutTests/fast/table/switch-table-layout-dynamic-cells.html

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