third_party/WebKit/LayoutTests/fast/table/fixed-table-layout-toggle-colwidth.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3     <head>
   4         <style type="text/css">
   5             table
   6             {
   7                 border-collapse: collapse;
   8                 table-layout: fixed;
   9                 width: 200px;
  10             }
  11             #cell
  12             {
  13                 background: black;
  14             }
  15             #div1
  16             {
  17                 background: blue;
  18                 width: 100px;
  19             }
  20             #div1, #cell
  21             {
  22                 height: 1em;
  23             }
  24         </style>
  25         <script>
  26             if (window.testRunner) {
  27                 testRunner.dumpAsText();
  28                 testRunner.waitUntilDone();
  29             }
  30             function log(msg)
  31             {
  32                 var console = document.getElementById('console');
  33                 console.appendChild(document.createTextNode(msg));
  34                 console.appendChild(document.createElement('br'));
  35             }
  36             function toggleWidth()
  37             {
  38                 var col = document.getElementById('colgroup').children[0];
  39                 var oldCellWidth = getComputedStyle(document.getElementById('cell')).width;
  40                 col.style.width = "100px";
  41                 var newCellWidth = getComputedStyle(document.getElementById('cell')).width;
  42
  43                 log("Cell width was " + oldCellWidth);
  44                 log("Cell width is " + newCellWidth);
  45                 if (oldCellWidth != newCellWidth)
  46                     log("PASSED: Cell changed width");
  47                 else
  48                     log("FAILED: Cell did not change width");
  49                 testRunner.notifyDone();
  50             }
  51         </script>
  52     </head>
  53     <body onload="toggleWidth();">
  54         <table id="table">
  55             <colgroup id="colgroup">
  56                 <col style="width: 50px">
  57                 <col>
  58             </colgroup>
  59             <tr>
  60                 <td id="cell"></td>
  61                 <td></td>
  62            </tr>
  63         </table>
  64         <div id="div1"></div>
  65         <p id="console"></p>
  66     </body>
  67 </html>
  68