third_party/WebKit/LayoutTests/fast/table/040.html

   1
   2 <head>
   3 <style>
   4 .one {
   5   background-color: cyan;
   6 }
   7
   8 .two {
   9   background-color: yellow;
  10 }
  11
  12 .three {
  13   background-color: lime;
  14 }
  15
  16 .span {
  17   background-color: pink;
  18 }
  19
  20 td {
  21   height: 20px;
  22 }
  23
  24 </style>
  25
  26 <script>
  27 function dumpWidths(table)
  28 {
  29   var cell1 = document.getElementById(table + "-one");
  30   var cell2 = document.getElementById(table + "-two");
  31   document.write("<p>");
  32   document.write("The table width is: " + document.getElementById(table).offsetWidth + "<br>");
  33   document.write("Column One is: " + Math.round(100*cell1.offsetWidth/(cell1.offsetWidth+cell2.offsetWidth)) + "%");
  34   document.write("<br>");
  35   document.write("Column Two is: " + Math.round(100*cell2.offsetWidth/(cell1.offsetWidth+cell2.offsetWidth)) + "%");
  36   document.write("</p><hr>");
  37 }
  38 </script>
  39 </head>
  40
  41 <h1>Fixed Columns, Auto Span, Minwidth Table</h1>
  42
  43 <table width="1" id="one" cellpadding=0 cellspacing=0>
  44 <tr>
  45 <td width=100 id="one-one" class="one">
  46 <td width=200 id="one-two" class="two">
  47 </tr>
  48 <tr>
  49 <td colspan=2 class="span">
  50 <div style="width:100px"></div>
  51 </td>
  52 </tr>
  53 </table>
  54
  55 <script>
  56 dumpWidths("one");
  57 </script>
  58
  59 <table width="1" id="two" cellpadding=0 cellspacing=0>
  60 <tr>
  61 <td width=100 id="two-one" class="one">
  62 <td width=200 id="two-two" class="two">
  63 </tr>
  64 <tr>
  65 <td colspan=2 class="span">
  66 <div style="width:600px"></div>
  67 </td>
  68 </tr>
  69 </table>
  70
  71 <script>
  72 dumpWidths("two");
  73 </script>
  74
  75 <table width="1" id="three" cellpadding=0 cellspacing=0>
  76 <tr>
  77 <td width=100 id="three-one" class="one">Fixed cell in column one with some text.
  78 <td width=200 id="three-two" class="two">Fixed cell in column two with a lot more text. Will the ratios be preserved?
  79 </tr>
  80 <tr>
  81 <td colspan=2 class="span">
  82 <div style="width:600px"></div>
  83 </td>
  84 </tr>
  85 </table>
  86
  87 <script>
  88 dumpWidths("three");
  89 </script>
  90
  91 <table width="1" id="four" cellpadding=0 cellspacing=0>
  92 <tr>
  93 <td width=50 id="four-one" class="one"><div style="width:100px"></div>
  94 <td width=100 id="four-two" class="two"><div style="width:250px"></div>
  95 </tr>
  96 <tr>
  97 <td colspan=2 class="span">
  98 <div style="width:600px"></div>
  99 </td>
 100 </tr>
 101 </table>
 102
 103 <script>
 104 dumpWidths("four");
 105 </script>