- From: Robert Hogan <robhogan@gmail.com>
- Date: Mon, 23 Mar 2015 19:42:58 +0000
- To: Boris Zbarsky <bzbarsky@mit.edu>, www-style@w3.org
- Message-ID: <CAD1xn+P2xdoDiU5pCqQ4-jPzXzBxH8L2fR1wf9sJQVk=Xky89Q@mail.gmail.com>
OK, so I'd like to propose the following as the behaviour to converge on.
Case One:
There is nothing in CSS 2.1 that forces the cell to be anything greater
than 1px in this test. While the size of the row and the table may be up
for grabs (as behaviour with percentage height is not defined) the cell has
a specified height and has no reason to be higher than 1 px. It is the
containing block for its content, so the content has no reason to exceed
1px either.
Gerard, in connection with this test you mentioned: “In your test, because
the table only has 1 row and 1 single cell, the single cell is constrained
to honor the 100% height declaration on the table element, the cell height
has to increase dramatically.” Why do you believe the cell is constrained
to ignore its 1px height in this case?
http://jsbin.com/wabileduma/1/edit?html,output
<!DOCTYPE html>
<html>
<style>
.content {
background-color: green;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
height: 1px;
}
div, html, body {
height: 100%;
width: 100%;
}
</style>
<body> <!-- Should be viewport height -->
<div class="table"> <!-- Should be viewport height -->
<div class="row"> <!-- Should be viewport height -->
<div class="cell"> <!-- Should be 1px height -->
<div class="content"> <!-- Should be 1px height -->
</div>
</div>
</div>
</div>
</body>
</html>
Case Two:
As with Case One the container in the cell respects the specific height of
the cell.
<!DOCTYPE html>
<style>
table {
width: 250px;
}
td {
width: 242px;
}
.cell-specified-height {
height: 202px;
}
.container {
height: 100%;
overflow-y: hidden;
}
.content {
background-color: black;
height: 2000px;
width: 225px;
}
</style>
<table>
<td class="cell-specified-height" data-expected-height=206>
<div class="container" data-expected-height=204>
<div class="content" data-expected-height=2000></div>
</div>
</td>
</table>
<div id="output"></div>
I'm happy to go with whatever makes sense for everybody so please regard
this as an attempt to reduce the issues discussed in this thread down to
two digestible test cases that we can attempt to agree a rendering for.
Thanks,
Robert
Received on Monday, 23 March 2015 19:43:27 UTC