third_party/WebKit/LayoutTests/fast/multicol/table-vertical-align.html

   1 <!DOCTYPE html>
   2 <style>
   3     .mc { -webkit-columns:2; -webkit-column-gap:20px; column-fill:auto; overflow:hidden; width:520px; height:80px; font-size:12px; line-height:20px; background:#ddd; }
   4     table { border-spacing:5px; }
   5     td:first-child { width:30px; }
   6     td { padding:5px; }
   7     .mc span { font-size:2em; line-height:30px; }
   8 </style>
   9
  10 <p>The big text should be in the first column, and baseline-aligned with the line in its neighbor cell on the left:</p>
  11 <div class="mc">
  12     <table>
  13         <tr style="vertical-align:baseline">
  14             <td>
  15                 line<br>
  16                 line<br>
  17                 line<br>
  18                 line<br>
  19                 line<br>
  20                 line<br>
  21             </td>
  22             <td>
  23                 <span>1st column</span>
  24             </td>
  25         </tr>
  26     </table>
  27 </div>
  28
  29 <hr>
  30
  31 <p>The big text should be near the top in the first column:</p>
  32 <div class="mc">
  33     <table>
  34         <tr style="vertical-align:top">
  35             <td>
  36                 line<br>
  37                 line<br>
  38                 line<br>
  39                 line<br>
  40                 line<br>
  41                 line<br>
  42             </td>
  43             <td>
  44                 <span>1st column</span>
  45             </td>
  46         </tr>
  47     </table>
  48 </div>
  49
  50 <hr>
  51
  52 <p>The big text should be at the top in the second column:</p>
  53 <div class="mc">
  54     <table>
  55         <tr style="vertical-align:middle">
  56             <td>
  57                 line<br>
  58                 line<br>
  59                 line<br>
  60                 line<br>
  61                 line<br>
  62                 line<br>
  63             </td>
  64             <td>
  65                 <span>2nd column</span>
  66             </td>
  67         </tr>
  68     </table>
  69 </div>
  70
  71 <hr>
  72
  73 <p>The big text should be near the bottom in the second column:</p>
  74 <div class="mc">
  75     <table>
  76         <tr style="vertical-align:bottom">
  77             <td>
  78                 line<br>
  79                 line<br>
  80                 line<br>
  81                 line<br>
  82                 line<br>
  83                 line<br>
  84             </td>
  85             <td>
  86                 <span>2nd column</span>
  87             </td>
  88         </tr>
  89     </table>
  90 </div>