1893389 - Grid with columns: auto 1fr 1fr fails to render

Status: NEW

(Core :: Layout: Grid, defect)

Description

[Gal Dolber]

Attachment: bug.html

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

Steps to reproduce:

Bug example attached

Actual results:

The 'auto' column takes the whole width and the text column overflows

Expected results:

See two columns, the image and the text, inside the button

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

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

Attachment: Testcase 1 (compare grid in <button> vs <div>)

It looks like the image takes all the space in the first grid column.

Comment 3

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

I think this bug is essentially bug 1530097 that Firefox hasn't implemented this part of the algorithm https://drafts.csswg.org/css-grid-1/#algo-spanning-flex-items. As a result, the "TEXT" that spanning across grid flexible column 2 & 3 does not get any space distributed.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Here's a slightly reduced testcase.

Chrome and WebKit shrink the teal <canvas>, so that the orange-bordered area fits nicely in the purple-bordered div; whereas in Firefox, the orange-bordered area overflows out of the purple-bordered div.

(Using grid devtools, you can see that this is because we collapse the 1fr track to have a width of 0.)

It's quite possible that this is some followup work associated with bug 1530097, yeah.