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

   1 <!DOCTYPE html>
   2 <style>
   3     .float { float: left; width: 25px; height: 30px; background-color: lightgreen; }
   4 </style>
   5 <table border>
   6     <tr>
   7         <td style="vertical-align: baseline; height: 400px;">
   8             Lorem
   9         </td>
  10         <td style="vertical-align: baseline;">
  11             ipsum <span style="font-size: 36px;">dolor</span>
  12         </td>
  13         <td style="vertical-align: baseline;">
  14             <div>sit</div>
  15         </td>
  16         <td style="vertical-align: baseline;">
  17             <div style="background-color: lightblue; width: 50px; height: 100px;">amet</div>
  18         </td>
  19         <td style="vertical-align: baseline; width: 60px;">
  20             consec
  21             <div style="width: 60px; height: 50px; position: absolute; top: 0; background-color: lightyellow;">P</div>
  22         </td>
  23         <td style="vertical-align: baseline;">
  24             <table border style="-webkit-border-vertical-spacing: 10px;">
  25                 <tr>
  26                     <td style="padding-top: 5px; border-top: 10px solid blue; border-bottom: 5px solid blue; vertical-align: baseline;">tetuer<br>adipiscing.</td>
  27                 </tr>
  28             </table>
  29         </td>
  30         <td style="vertical-align: baseline; width: 60px;">
  31             <div style="width: 60px; height: 50px; position: absolute; background-color: lightyellow;">P</div>
  32         </td>
  33         <td style="vertical-align: baseline;">
  34             <div style="background-color: lightpink; width: 50px; height: 100px;"></div>
  35         </td>
  36         <td style="vertical-align: baseline;">
  37             <table border cellpadding="5">
  38                 <tr style="height: 80px;">
  39                     <td style="padding-top: 15px; border-top: 10px solid blue; border-bottom: 5px solid blue; vertical-align: bottom;"><div style="background-color: lightpink;">Lorem</div></td>
  40                 </tr>
  41                 <tr>
  42                     <td>ipsum</td>
  43                 </tr>
  44             </table>
  45             dolor sit<br>amet.
  46         </td>
  47         <td style="vertical-align: baseline; width: 60px;">
  48             <div class="float">F1</div>
  49             <div class="float">F2</div>
  50             <div class="float">F3</div>
  51         </td>
  52     </tr>
  53 </table>