third_party/WebKit/LayoutTests/fast/table/absolute-table-at-bottom.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>Absolute Bottom Table</title>
   5         <style type="text/css">
   6             p { margin: 0; padding: 0; }
   7             .atBottom { position: absolute; bottom: 0; left: 0; }
   8             table { width: 120px; border:red solid 1px; }
   9
  10             #test1 { margin-left: 120px; height:50px; }
  11             #test2 { margin-left: 240px; }
  12             #test3 { margin-left: 360px; height:8px; }
  13         </style>
  14     </head>
  15     <body>
  16         <p>Testcase for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=4874">4874</a> - Table with absolute bottom positioning is positioned incorrectly.</p>
  17         <h1>Look Down!</h1>
  18         <p>
  19             At the bottom of the window you should see the word "Paragraph" followed by
  20             three boxes containing text. The entire red border around each box should
  21             be visible without scrolling (the window should not be scrollable at all).
  22             The three boxes should be aligned at the bottom with the bottom of the
  23             window. The text "Tall table" should be vertically centered in its box,
  24             which should be 50px tall. The other two boxes should both be shorter than
  25             50px, and have the same height.
  26         </p>
  27
  28         <table id="test1" class="atBottom">
  29             <tr>
  30                 <td>Tall table</td>
  31             </tr>
  32         </table>
  33         <table id="test2" class="atBottom">
  34             <tr>
  35                 <td>Normal table</td>
  36             </tr>
  37         </table>
  38         <table id="test3" class="atBottom">
  39             <tr>
  40                 <td>Short table</td>
  41             </tr>
  42         </table>
  43
  44         <p class="atBottom">
  45             Paragraph
  46         </p>
  47     </body>
  48 </html>