src/third_party/WebKit/LayoutTests/fast/table/040-vertical.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   width: 20px;
  22 }
  23
  24 table {
  25   -webkit-writing-mode: vertical-rl;
  26 }
  27 </style>
  28
  29 <script>
  30 function dumpHeights(table)
  31 {
  32   var cell1 = document.getElementById(table + "-one");
  33   var cell2 = document.getElementById(table + "-two");
  34   document.write("<p>");
  35   document.write("The table height is: " + document.getElementById(table).offsetHeight + "<br>");
  36   document.write("Column One is: " + Math.round(100*cell1.offsetHeight/(cell1.offsetHeight+cell2.offsetHeight)) + "%");
  37   document.write("<br>");
  38   document.write("Column Two is: " + Math.round(100*cell2.offsetHeight/(cell1.offsetHeight+cell2.offsetHeight)) + "%");
  39   document.write("</p><hr>");
  40 }
  41 </script>
  42 </head>
  43
  44 <h1>Fixed Columns, Auto Span, Minheight Table</h1>
  45
  46 <table height="1" id="one" cellpadding=0 cellspacing=0>
  47 <tr>
  48 <td height=100 id="one-one" class="one">
  49 <td height=200 id="one-two" class="two">
  50 </tr>
  51 <tr>
  52 <td colspan=2 class="span">
  53 <div style="height:100px"></div>
  54 </td>
  55 </tr>
  56 </table>
  57
  58 <script>
  59 dumpHeights("one");
  60 </script>
  61
  62 <table height="1" id="two" cellpadding=0 cellspacing=0>
  63 <tr>
  64 <td height=100 id="two-one" class="one">
  65 <td height=200 id="two-two" class="two">
  66 </tr>
  67 <tr>
  68 <td colspan=2 class="span">
  69 <div style="height:600px"></div>
  70 </td>
  71 </tr>
  72 </table>
  73
  74 <script>
  75 dumpHeights("two");
  76 </script>
  77
  78 <table height="1" id="three" cellpadding=0 cellspacing=0>
  79 <tr>
  80 <td height=100 id="three-one" class="one">Fixed cell in column one with some text.
  81 <td height=200 id="three-two" class="two">Fixed cell in column two with a lot more text. Will the ratios be preserved?
  82 </tr>
  83 <tr>
  84 <td colspan=2 class="span">
  85 <div style="height:600px"></div>
  86 </td>
  87 </tr>
  88 </table>
  89
  90 <script>
  91 dumpHeights("three");
  92 </script>
  93
  94 <table height="1" id="four" cellpadding=0 cellspacing=0>
  95 <tr>
  96 <td height=50 id="four-one" class="one"><div style="height:100px"></div>
  97 <td height=100 id="four-two" class="two"><div style="height:250px"></div>
  98 </tr>
  99 <tr>
 100 <td colspan=2 class="span">
 101 <div style="height:600px"></div>
 102 </td>
 103 </tr>
 104 </table>
 105
 106 <script>
 107 dumpHeights("four");
 108 </script>