1484436 - bad td height when some cells are empty and vertical-align baseline

Status: NEW

(Core :: Layout: Tables, defect, P3)

Description

[tickleman]

Attachment: jsfiddle.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180807170231

Steps to reproduce:

https://jsfiddle.net/pkhwbt13/12/

I create 3 tables with 1 row and 2 cells each:
- the 1st table has no value in td
- the 2nd table has a value in the 2nd td only
- the 3st table has a value into each td

<table><tr><td></td><td></td></tr></table>
<table><tr><td></td><td>B</td></tr></table>
<table><tr><td>A</td><td>B</td></tr></table>

The css sets the height to 50px and vertical-align: baseline for all td :

td {
  background-color: black;
  color: white;
  height: 50px;
  vertical-align: baseline;
  width: 50px;
}



Actual results:

Play the jsFiddle https://jsfiddle.net/pkhwbt13/12/ to see the result.

- The 2nd table has a bad height of 87.5px.
- The two other tables have the right calculated height : 52px.

If I set the vertical-align value to top, middle or bottom : everything goes right. The problem occurred for me only on the baseline value and mixed empty / filled td.


Expected results:

The 3 tables should have the same height of 52px.

Comment 1

[Stefan [:StefanG_QA]]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0 (20180821100053)

I have tested this report using the latest Nightly, Beta 62.0b19, and Fx release channels on Windows 10 x64 and OS X 10.12. I was able to reproduce the mentioned behavior using the provided page. When loading it I can see that the second table has a bigger height than the two rows.