49 lines
1.7 KiB
HTML
49 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Absolute Bottom Table</title>
|
|
<style type="text/css">
|
|
p { margin: 0; padding: 0; }
|
|
.atBottom { position: absolute; bottom: 0; left: 0; }
|
|
table { width: 120px; border:red solid 1px; }
|
|
|
|
#test1 { margin-left: 120px; height:50px; }
|
|
#test2 { margin-left: 240px; }
|
|
#test3 { margin-left: 360px; height:8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<h1>Look Down!</h1>
|
|
<p>
|
|
At the bottom of the window you should see the word "Paragraph" followed by
|
|
three boxes containing text. The entire red border around each box should
|
|
be visible without scrolling (the window should not be scrollable at all).
|
|
The three boxes should be aligned at the bottom with the bottom of the
|
|
window. The text "Tall table" should be vertically centered in its box,
|
|
which should be 50px tall. The other two boxes should both be shorter than
|
|
50px, and have the same height.
|
|
</p>
|
|
|
|
<table id="test1" class="atBottom">
|
|
<tr>
|
|
<td>Tall table</td>
|
|
</tr>
|
|
</table>
|
|
<table id="test2" class="atBottom">
|
|
<tr>
|
|
<td>Normal table</td>
|
|
</tr>
|
|
</table>
|
|
<table id="test3" class="atBottom">
|
|
<tr>
|
|
<td>Short table</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p class="atBottom">
|
|
Paragraph
|
|
</p>
|
|
</body>
|
|
</html>
|