1703401 - Firefox fails wpt table-as-item-stretch-cross-size-5.html (and effectively uses table's content size as flex base size, whenever there's a table-caption, in column-oriented flex container)

Status: NEW

(Core :: Layout: Flexbox, defect)

Description

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Live version: http://wpt.live/css/css-flexbox/table-as-item-stretch-cross-size-5.html

dgrogan pinged me in https://github.com/web-platform-tests/wpt/pull/28363#discussion_r607381104 asking about Firefox's behavior on this newly added wpt testcase.

Quote my hypothesis in the github on why Firefox fails the testcase.

When Firefox calculates flex item's base size, it doesn't reflow the flex item because base size can usually be determined by looking at flex-basis and preferred main size. However in this case, table-caption's height is unknown until it's being reflowed, resulting the entire table flex item's base size undetermined. So Firefox calculates its base size as if the table item has height:auto.
Later, we reflow the table to measure the table item height by ignoring its height, and get 30px as its content height.

From dgrogan's reply, Blink does reflow the table captions and adds their resulting height to the preferred main size of table wrapper box to get the correct flex item's base size. We might want to do something similar.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Yeah, looks like our layout differs significantly depending on whether or not there's a caption (even a completely empty one).

Here's a more reduced testcase, comparing the same markup with/without a caption. It looks like we only honor the table's specified flex-basis if there's no caption; otherwise we use the content size [though not really intentionally], as TYLin said.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (now using 'height' on table, and also tesing fixed-height caption)

Just to have a few more scenarios... Here's another testcase where we've got height on the table instead of flex-basis (doesn't seem to make a difference).

I also added a case in the middle where we give the caption a fixed height, and in that scenario we seem to produce the correct layout (honoring the table's specified height).

Comment 3

[Daniel Holbert [:dholbert]]

Also FWIW, I spent a few minutes trying to come up with a simple testcase that might trigger any analogous problems for grid (with a sized-to-content grid row) and I wasn't able to trigger any badness there.