<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
Codebase Browser
chromium