1216164 - element with "display: table-cell" is unexpectedly tall if it has content & a sibling w/ no content (because baseline of empty table-cell is incorrect)

Status: RESOLVED DUPLICATE of bug 569645

(Core :: Layout, defect)

Description

[Radovan Janjic]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36

Steps to reproduce:

Element with display table-cell doubles the height if it's pseudo-element content is changed. Please see codepen http://codepen.io/rjanjic/pen/GpObWG


Actual results:

doubled height of table-cell element


Expected results:

defined height :-)

Comment 1

[Daniel Holbert [:dholbert]]

I can confirm, though you don't need pseudo-elements or absolute positioning to trigger this.

Reduced testcase coming up.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1

Here's a reduced testcase, with "display:table-cell" and a fixed width & height.

If...
 - there are multiple table-cells
 - at least one of the table-cells has content, *and* at least one has no content
 - the table cells have the default "vertical-align" value (baseline)
...then we end up getting unexpectedly-tall table-cells.

Chrome & Edge agree on the rendering here -- they render every cell here as a square (honoring its 30px by 30px specified size).

Comment 3

[Daniel Holbert [:dholbert]]

So I think the issue here is that we're mis-calculating the baseline of an empty table-cell. (We're placing it at the bottom of the table-cell, or something.)

And then baseline alignment makes us align the other cell's text's baseline with that too-far-down baseline, and so collectively (when aligned), they end up being taller than expected.

Comment 4

[Boris Zbarsky [:bzbarsky]]

The baseline of an empty cell is in fact at its bottom.  From <http://www.w3.org/TR/CSS21/tables.html#height-layout>:

  The baseline of a cell is the baseline of the first in-flow line box in the cell, or the
  first in-flow table-row in the cell, whichever comes first. If there is no such line box
  or table-row, the baseline is the bottom of content edge of the cell box.

More relevant here is the fact that the "height" property on table cells is not supposed to change the size of the content box; it's just supposed to affect the row height.