1481440 - Fixed Table Height with Div 100% height renders incorrectly.

Status: NEW

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

Description

[Chris]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Steps to reproduce:

A div with display table of fixed height, with a child div with height 100% seems to be rendered differently than other browsers.

There seems to be a lot of similar bugs recorded many of them are very old (>8 years).
None seemed to have an example as simple as I've created - hence posting here.
Apologies if it is a duplicate (quite likely).  

https://codepen.io/anon/pen/NBLZBJ




Actual results:

Tested in IE, Chrome, and Opera the block shows blue.  


Expected results:

In Firefox it shows red.

Comment 1

[Kanchan Kumari QA]

I could reproduce this issue on 
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Firefox shows it red while Chrome shows it blue.

Comment 2

[Jeff Muizelaar [:jrmuizel]]

Sounds like a layout issue. David do you have a feeling for what's going wrong here?

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Attachment: reporter's testcase

Comment 4

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

So this seems like a somewhat messy case.

https://drafts.csswg.org/css2/tables.html#anonymous-boxes defines how anonymous row group, row, and cell boxes will be constructed inside of #a as ancestors of #b.  That might or might not be relevant here; it depends on whether the same thing happens if these elements are present explicitly.



I'd note that the spec isn't actually useful here, since it's a mess and doesn't define behavior of tables in a way that's remotely close to what's required to handle Web content.  That is:

https://drafts.csswg.org/css2/visudet.html#the-height-property says:

  If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

https://drafts.csswg.org/css2/visudet.html#containing-block-details is the formal definition of "containing block", and the relevant part is:

  2. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box. 

Interestingly, this means that *neither* the table cell nor the table is a containing block.  I'm pretty sure this is a mistake in the spec.  I think in general the contents of a table cell that use percentage heights have those percentage heights resolved relative to the cell.  The interesting question is then in exactly which cases is the height of the table cell considered to be specified explicitly (as a result of the table layout algorithm) such that percentages in it work correctly.  The rules for doing this right are somewhat complicated and not fully interoperable between browsers... which could actually be related to the underlying issue here.


So figuring out exactly what's wrong here requires writing a bunch of additional tests...