Bug 216144 – [css-grid] Wrong 'auto' track size for a grid item with a specified 'width:max-content'

• Status: NEW
• Component: CSS

[Oriol Brufau]

Created attachment 407914 [details]
testcase

Originally filed by Mats Palmgren for Chromium (https://bugs.chromium.org/p/chromium/issues/detail?id=818401)

**What steps will reproduce the problem?**
(1) load the attached testcase

**What is the expected result?**
In the two tests labelled "max-content", the grid container's width and its computed 'grid-template-columns' value should be 40px, because that's the grid item's max-content size.

**What happens instead?**
The grid item overflows the grid container in the two tests labelled "max-content".

The relevant spec section:
https://drafts.csswg.org/css-grid/#algo-single-span-items
"For auto minimums:
If the track has an auto min track sizing function and the grid container is being sized under a min/max-content constraint, set the track’s base size to the maximum of its items’ min/max-content contributions, respectively.

Otherwise, set its base size to the maximum of its items’ min-size contributions. The min-size contribution of an item is the outer size that would result from assuming the item’s min-width or min-height value (whichever matches the relevant axis) as its specified size if its specified size (width or height, whichever matches the relevant axis) is auto, or else the item’s min-content contribution."

When sized under a min/max-content constraint, the base size is the item's min/max-content contributions, respectively.  The item has an explicit 'width' that is 'max-content', thus it's min-content contribution is 40px and its max-content contribution is also 40px.
Thus the column size is 40px which makes the container's width 40px in both cases, thus the intrinsic width of the container is 40px.

Under "no constraint", the 2nd paragraph applies, and the 'min-size contribution' is "the item’s min-content contribution" (since its 'width' is not 'auto').
Again, the result is 40px.

[Radar WebKit Bug Importer]

<rdar://problem/68665611>

[Greg Whitworth]

This has bitten me as well as can be seen in this scenario: 
(1) Open https://codepen.io/gregwhitworth/pen/BarERQv

Chromium and Firefox render as expected

Pull request: https://github.com/WebKit/WebKit/pull/44385