Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / tables / mozilla / bugs / bug10296-1.html
blob: 7c5520552cd904a481006e7ab68a1e3fb3052b5b [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!-- ***** BEGIN LICENSE BLOCK *****
Version: MPL 1.1/GPL 2.0/LGPL 2.1
The contents of this file are subject to the Mozilla Public License Version
1.1 (the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.mozilla.org/MPL/
Software distributed under the License is distributed on an "AS IS" basis,
WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
for the specific language governing rights and limitations under the
License.
The Original Code is mozilla.org Code.
The Initial Developer of the Original Code is
Netscape Communications Corporation.
Portions created by the Initial Developer are Copyright (C) 1998-1999
the Initial Developer. All Rights Reserved.
Contributor(s):
Alternatively, the contents of this file may be used under the terms of
either of the GNU General Public License Version 2 or later (the "GPL"),
or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
in which case the provisions of the GPL or the LGPL are applicable instead
of those above. If you wish to allow use of your version of this file only
under the terms of either the GPL or the LGPL, and not to allow others to
use your version of this file under the terms of the MPL, indicate your
decision by deleting the provisions above and replace them with the notice
and other provisions required by the GPL or the LGPL. If you do not delete
the provisions above, a recipient may use your version of this file under
the terms of any one of the MPL, the GPL or the LGPL.
***** END LICENSE BLOCK ***** -->
<html lang="en-US">
<head>
<title>Vertical alignment and table height</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="copyright" href="/~dbaron/legal.html">
<style type="text/css">
/* XXX Should really remove black */
table td { border: thin solid black; }
table.one { height: auto; }
table.two { height: 30px; }
table.three { height: 500px; }
table.four, table.five { height: 50%; }
div.five { height: 600px; border: medium solid purple; }
tr.auto { height: auto; }
tr.small { height: 2px; }
tr.big { height: 200px; }
table.baseline td { vertical-align: baseline; }
table.middle td { vertical-align: middle; }
table.top td { vertical-align: top; }
table.bottom td { vertical-align: bottom; }
span.big { font-size: 400%; }
table.cellsmall td { height: 2px; }
table.cellauto td { height: auto; }
td.baselinea { vertical-align: baseline; }
td.baselineb { vertical-align: text-bottom; }
td.baselinec { vertical-align: text-top; }
td.baselined { vertical-align: super; }
td.baselinee { vertical-align: sub; }
td.baselinef { vertical-align: -12px; } /* probably correct */
td.baselineg { vertical-align: 40%; } /* probably correct */
td.top { vertical-align: top; }
td.middle { vertical-align: middle; }
td.bottom { vertical-align: bottom; }
td.big { font-size: 300%; }
td.biggest { font-size: 600%; }
</style>
</head>
<body>
<h1>Vertical alignment and table height</h1>
<p>The following three tables have heights of <code>auto</code>,
<code>30px</code>, and <code>500px</code>. The first one should have
the height of the sum of its rows. The second and third can be handled
however the browser wants, but there just here to make sure it does
something reasonable.</p>
<table class="one">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<table class="two">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<table class="three">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<p>These tables test percentage heights. The first should be its
natural height; the second should be 50% of the height of the div
(600px), which is 300px.</p>
<table class="four">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<div class="five">
<table class="five">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</div>
<p>The following tests test <code>height</code> on table rows.
A value of <code>auto</code> requires the minimum height needed by
the cells. In a simple case, this is just the height of the tallest
cell (excluding the increased padding, of course, since with the padding
the cells have the same height):</p>
<table>
<tr class="auto"><td>Data</td><td>Data<br>Data</td><td>Data</td></tr>
</table>
<p>However, vertical-align values of <code>baseline</code> (the default,
but could be overridden in a UA stylesheet)
can make it taller than that:</p>
<table class="baseline">
<tr class="auto">
<td>Data</td>
<td><span class="big">Data</span><br>Data</td>
<td>Data<br><span class="big">Data</span></td>
</tr>
</table>
<p>The exact same thing should happen when the given height for the
row is too small:</p>
<table class="baseline">
<tr class="small">
<td>Data</td>
<td><span class="big">Data</span><br>Data</td>
<td>Data<br><span class="big">Data</span></td>
</tr>
</table>
<p>Padding should also be able to increase the height (here the
first cell has 20px padding-top and the second has 20px of padding-bottom):</p>
<table>
<tr>
<td style="padding-top: 20px;">Data</td>
<td style="padding-bottom: 20px">Data</td>
<td>Data</td>
</tr>
</table>
<table>
<tr class="small">
<td style="padding-top: 20px;">Data</td>
<td style="padding-bottom: 20px">Data</td>
<td>Data</td>
</tr>
</table>
<p>These two tables should be 200px tall, because of a height on the table
row. The second one should have its second and third cell's contents
offset from the middle by 10px (bottom, then top):</p>
<table class="baseline">
<tr class="big">
<td>Data</td>
<td><span class="big">Data</span><br>Data</td>
<td>Data<br><span class="big">Data</span></td>
</tr>
</table>
<table class="middle">
<tr class="big">
<td style="padding-top: 20px;">Data</td>
<td style="padding-bottom: 20px">Data</td>
<td>Data</td>
</tr>
</table>
<p>The behavior of percentage heights on table-row or table-row-group
is undefined. However, I think they should be ignored, so these tables
should look normal:</p>
<table>
<tr style="height: 200%"><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<table>
<tr style="height: 40%"><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<table>
<thead style="height: 40%">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</thead>
<tfoot style="height: 40%">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</tfoot>
<tbody style="height: 40%">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>
</table>
<table>
<thead style="height: 150%">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</thead>
<tfoot style="height: 150%">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</tfoot>
<tbody style="height: 150%">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>
</table>
<p>The following table should look normal, since very small heights
get ignored:</p>
<table class="cellsmall">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<p>So should this one, for auto cell heights:</p>
<table class="cellauto">
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<p>These tables should look the same - all cells should be 100px tall
with the text at the top of the cells:</p>
<table class="baseline">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 100px">Data</td>
<td style="height: 100px">Data</td>
</tr>
</table>
<table class="middle">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 100px">Data</td>
<td style="height: 100px">Data</td>
</tr>
</table>
<table class="top">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 60px">Data</td>
<td style="height: 20px">Data</td>
</tr>
</table>
<table class="baseline">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 60px">Data</td>
<td style="height: 20px">Data</td>
</tr>
</table>
<p>In these four tables, the text should be 20px lower each cell, but should
otherwise look like the above three tables:</p>
<table class="top">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 60px; padding: 20px 0;">Data</td>
<td style="height: 20px; padding: 40px 0;">Data</td>
</tr>
</table>
<table class="top">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 60px; padding: 20px 0 0 0;">Data</td>
<td style="height: 20px; padding: 40px 0 0 0;">Data</td>
</tr>
</table>
<table class="middle">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 60px; padding: 20px 0;">Data</td>
<td style="height: 20px; padding: 40px 0;">Data</td>
</tr>
</table>
<table class="middle">
<tr>
<td style="height: 100px">Data</td>
<td style="height: 60px;">Data</td>
<td style="height: 20px;">Data</td>
</tr>
</table>
<p>These should have the text 40px from the top in every cell:</p>
<table class="baseline">
<tr>
<td style="height: 60px">Data</td>
<td style="padding: 20px 0;">Data</td>
<td style="padding: 40px 0;">Data</td>
</tr>
</table>
<table class="baseline">
<tr>
<td style="height: 37px">Data</td>
<td style="height: 53px; padding: 20px 0 0 0;">Data</td>
<td style="height: 60px; padding: 40px 0 0 0;">Data</td>
</tr>
</table>
<table class="middle">
<tr>
<td style="height: 20px">Data</td>
<td style="height: 20px; padding: 20px 0;">Data</td>
<td style="height: 20px; padding: 40px 0;">Data</td>
</tr>
</table>
<table class="bottom">
<tr>
<td style="height: 60px">Data</td>
<td style="height: 40px; padding: 20px 0;">Data</td>
<td style="height: 20px; padding: 40px 0;">Data</td>
</tr>
</table>
<table class="bottom">
<tr>
<td style="height: 60px">Data</td>
<td style="height: 40px; padding: 0 0 20px 0;">Data</td>
<td style="height: 20px; padding: 0 0 40px 0;">Data</td>
</tr>
</table>
<p>In each of the following tables, three of the cells should have
the same baseline of the first line, and the three so marked should be
aligned top, middle, and bottom:</p>
<table>
<tr>
<td class="baselinea">Data</td>
<td class="baselineb big">Data</td>
<td class="baselinec biggest">Data</td>
<td class="top">Top</td>
<td class="middle">Middle</td>
<td class="bottom">Bottom</td>
</tr>
</table>
<table>
<tr>
<td class="top">Top</td>
<td class="middle">Middle</td>
<td class="bottom">Bottom</td>
<td class="baselined biggest">Data</td>
<td class="baselinee">Data</td>
<td class="baselinef big">Data</td>
</tr>
</table>
<table>
<tr>
<td class="baselineg biggest">Data</td>
<td class="top">Top</td>
<td class="middle">Middle</td>
<td class="baselinea">Data</td>
<td class="bottom">Bottom</td>
<td class="baselineb big">Data</td>
</tr>
</table>
<table>
<tr>
<td class="top">Top</td>
<td class="baselinec">Data</td>
<td class="baselinee big">Data</td>
<td class="middle">Middle</td>
<td class="bottom">Bottom</td>
<td class="baselined biggest">Data</td>
</tr>
</table>
<table>
<tr>
<td class="top">Top</td>
<td class="baselineg big">Data</td>
<td class="bottom">Bottom</td>
<td class="baselinef">Data</td>
<td class="baselinea biggest">Data</td>
<td class="middle">Middle</td>
</tr>
</table>
<hr title="Beginning of Footer">
<p><a href="http://validator.w3.org/check/referer" title="W3C HTML Validator"><img src="../images/vh40" alt="Valid HTML 4.0!" height="31" width="88"></a></p>
<p>(Back to
<a href="./">CSS Testing Information</a>,
<a href="../../">David Baron</a>)</p>
<p><a href="/~dbaron/" title="David Baron's Homepage">LDB</a>,
<a rev="made" href="mailto:dbaron@fas.harvard.edu" TITLE="Send e-mail to David Baron">dbaron@fas.harvard.edu</a></p>
</body></html>