1764171 - Overflowing or wrapping text in the elements with max-width: max-content, paddings and box-sizing: border-box inside the wrapper with grid-auto-columns: max-content

Status: VERIFIED FIXED

(Core :: Layout: Grid, defect, P1)

Description

[Martin]

Attachment: ff-devtools-grid-enabled.jpg

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

Steps to reproduce:

Example code:
https://codepen.io/mw_codes/pen/jOYxvQN

Check the example on Firefox and the other browsers (Chrome etc.).

I created a wrapper that contains three <a> tags.
The wrapper has:
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
and there is more than enough space to display its child-elements in columns.

The <a> tag has:
max-width: max-content;
padding: 8px 16px;
box-sizing: border-box;

Actual results:

The grid auto columns won't count the inline padding to the element's width and the text inside <a> tags will wrap like there was not enough space to fit the text in one line.
When we add white-space: nowrap, the text will overflow.
When we change the box-sizing property from border-box (that counts paddings to the overall element's width) to content-box (that doesn't count paddings to the overall element's width) the problem disappears.

The bug appears only on Firefox.
The bug doesn't appear on Chrome.

Expected results:

The text inside <a> tags should not wrap to the next lines or overflow if there is enough space to fit every <a> tag inside the wrapper (just like in Chrome).

Comment 1

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

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

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case from reporter.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Yeah, this looks kinda busted, thanks for the excellent test-case! This doesn't seem like a regression, if I change the max-width: max-content for max-width: -moz-max-content I can repro all the way to the beginnings of CSS grid.

Boris, you've done some work in intrinsic grid sizing in the past, any chance you can take a look? No worries if not :)

It seems something is incorrectly (or inconsistently at least) accounting for box-sizing. I don't see any obvious thing in the grid code yet, but this shouldn't be too hard to figure out with rr.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Minimal test-case.

Comment 5

[Boris Chiou [:boris]]

Thanks for taking this, Tiaan. :)

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case not involving grid at all.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case with transferred size from aspect-ratio.

Comment 8

[Tiaan Louw]

Attachment: Bug 1764171 - Return border box-sizing values from GetIntrinsicCoord r=emilio

Fixes a bug where border box-sizing was not used. This affected
min-/max-content and fit-content values for min-/max-width.

Comment 9

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

There's a r+ patch which didn't land and no activity in this bug for 2 weeks.
:tlouw, could you have a look please?
If you still have some work to do, you can add an action "Plan Changes" in Phabricator.
For more information, please visit auto_nag documentation.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Tiaan do you have L3 access yet? If not you should get it. Lmk if you need me to land the patch for you :)

Comment 11

[Tiaan Louw]

Making final change to the tests then I'll land it.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0acbd17e1570
Return border box-sizing values from GetIntrinsicCoord r=emilio

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/36374 for changes under testing/web-platform/tests

Comment 14

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/0acbd17e1570

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 16

[Ardelean Oana, Desktop QA [:oardelean]]

I managed to reproduce this issue on a 2022-10-09 Nightly build on macOS 12 using the testcases attached in the bug. Verified as fixed on Firefox 107.0b4(build ID: 20221023190001), Nightly 108.0a1(build ID: 20221023100414) on macOS 12, Windows 10, Ubuntu 22.