Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/CSS2/tables/height-table-cell-001.xht - WPT Dashboard Interop Dashboard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>CSS test: height - table cell height</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#height-layout" title="17.5.3 Table height algorithms" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta content="The height of a 'table-row' element's box is the maximum of the row's computed 'height', the computed 'height' of each cell in such row and the minimum height required by the content of the cells. The height of a cell is the maximum between its specified 'height' and the minimum height required by its content." name="assert" />
<style type="text/css"><![CDATA[
div#overlapped-red-reference
{
background-color: red;
height: 100px;
position: absolute;
width: 100px;
z-index: -1;
}
table#overlapping-green-test {border-spacing: 0px;}
td
{
background-color: green;
border: green solid 10px;
height: 50px;
padding: 15px;
width: 50px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="overlapped-red-reference"></div>
<table id="overlapping-green-test">
<tr>
<td></td>
</tr>
</table>
<!--
In this testcase, the content of the unique cell is empty; therefore the
minimum height required by the cell content is 0. So, the height of such
single cell is given by
max(specified 'height', minimum height required by its content) == 50px
Such height refers to the cell's content box, not to the cell's border box.
-->
</body>
</html>