- From: Robert Hogan <robhogan@gmail.com>
- Date: Mon, 23 Mar 2015 20:10:14 +0000
- To: Boris Zbarsky <bzbarsky@mit.edu>, www-style@w3.org
- Message-ID: <CAD1xn+PkCYi5ReE86LJS_NKdLLYrzYra8JqLJvXtJkx2ENB_wQ@mail.gmail.com>
HI Boris,
Good points. Here's my revised proposal..
Case One:
In this case all browsers currently agree on making the cell, row and table
viewport height - even though the cell has a specified height of 1px. We
should retain this behaviour and let the content of the cell size to the
viewport using the computed height of its containing block (the cell) to
compute its own height.
http://jsbin.com/betazukugi/2/edit
<!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>
<div class="table"> <!-- Should be viewport height -->
<div class="row"> <!-- Should be viewport height -->
<div class="cell"> <!-- Should be viewport height -->
<div class="content"> <!-- Should be viewport height -->
</div>
</div>
</div>
</div>
</body>
</html>
Case Two:
In this case the cell is not expanding to honour the percentage height of a
row or table ancestor so descendants are constrained by its specified
height.
http://jsbin.com/nifinejice/1/edit?html,output
<!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>
Case Three:
This is a variation on Case One, but both the row and cell have a specified
height. In order to remain consistent with the behaviour in Case One we let
the row and cell expand to fill the height of the table. Likewise the
content honours the computed height of its containing block the cell and
also fills the viewport.
http://jsbin.com/qubuwibula/1/edit
<!DOCTYPE html>
<html>
<style>
.content {
background-color: green;
}
.table {
display: table;
}
.row {
display: table-row;
height: 100px;
}
.cell {
display: table-cell;
height: 1px;
}
div, html, body {
height: 100%;
width: 100%;
}
</style>
<body>
<div class="table"> <!-- Should be viewport height -->
<div class="row"> <!-- Should be viewport height -->
<div class="cell"> <!-- Should be viewport height -->
<div class="content"> <!-- Should be viewport height -->
</div>
</div>
</div>
</div>
</body>
</html>
On Mon, Mar 23, 2015 at 1:47 AM Boris Zbarsky <bzbarsky@mit.edu> wrote:
> On 3/22/15 10:32 AM, Robert Hogan wrote:
> > While fixing the rendering of table 2 on Blink I encountered a
> > regression in the following test case:
> >
> > http://jsbin.com/cifoqapuho/1/edit
> >
> > Blink's old behaviour and Firefox's current behaviour fills the viewport
> > with green in this testcase, but my understanding from the discussion in
> > this thread was that the content of the cell should not exceed 1px in
> > height.
> >
> > Which is the correct rendering?
>
> I think the relevant bit of CSS2.1 here (insofar as table layout is
> defined there at all) is
> http://www.w3.org/TR/CSS21/tables.html#height-layout which says:
>
> The height of a 'table-row' element's box is calculated once the user
> agent has all the cells in the row available: it is the maximum of
> the row's computed 'height', the computed 'height' of each cell in
> the row, and the minimum height (MIN) required by the cells
>
> In this testcase, the row has a computed height of whatever the viewport
> height is, right? That's greater than 1px, so that's the height of the
> row.
>
> That said, CSS2.1 then goes on to say:
>
> CSS 2.1 does not define how the height of table cells and table rows
> is calculated when their height is specified using percentage values.
>
> hence the "insofar" bit above.
>
> Anyway, if we accept that the height of the row is viewport height, the
> next relevant bit is:
>
> In CSS 2.1, the height of a cell box is the minimum height required
> by the content. The table cell's 'height' property can influence the
> height of the row (see above), but it does not increase the height of
> the cell box.
>
> In other words, the "1px" feeds into the row height, where it is then
> overridden by the explicit styling of the row itself.
>
> I guess it should also feed into the percentage base for the div inside
> the cell, as the spec is currently written, but doing that leads to
> web-incompatible results, as you discovered.
>
> There's another fun bit of non-interop here: if you give the row a fixed
> height of "100px" then it looks to me like everyone other than Gecko
> keeps having the .content be the height of the viewport, while Gecko
> will actually make the .content be 1px tall. The Gecko behavior is the
> one the CSS2.1 spec calls for at the moment, and once that fixed height
> is used there is no longer an issue with the undefined behavior invoked
> by percentage heights on rows/cells, so the spec might even mean
> something. Maybe.
>
> I'm not sure any of that really answers your question....
>
> -Boris
>
>
Received on Monday, 23 March 2015 20:10:48 UTC