[css-grid] Automatic Minimum Size for grid items should not min against content size

[fantasai]

Continuing from #1117 examples 1/2/5/6...

Grid is using the same "automatic minimum size" algo that Flexbox does, which sets the min to the smaller of the content size and the specified/transferred size. This is correct for Flexbox - it gives us a reasonable minimum size that the image won't shrink below. But it serves a different purpose in Grid, effectively setting the layout size of the track while the item itself sizes into that containing block, potentially overflowing it. (Or, in other words, Flexbox actually sizes the item with the information; Grid sizes the track, and then the item lays itself out, and we don't want the item to overflow its track by default.)

Therefore, in Grid it doesn't make as much sense to pay attention to the content size when a specified/transferred size exists. So, we think the right fix is to just change Grid's automatic minimum size to be the specified size if it exists, else the transferred size if it exists, else the content size.

This will make examples 1, 2, 5, and 6 all render basically the same way, with a 200px tall first row, and the image filling that row. (Examples 3, 4, 7, and 8 rely on a different issue, so we won't worry about them here right now.) This gives more sensible results in size-constrained grids when the item's transferred size is larger than its content size, by keeping the contents of the track in sync and avoiding overlap of adjacent grid items.

Note: A similar consideration about overlapping overflow was used in resolving issue 283.

The proposed fix is to define the automatic minimum size for grid items inline in the spec as: the specified size if it exists, else the transferred size if it exists, else the content size.

[mrego]

It's really nice we're finally having a specific text in Grid Layout spec about automatic minimum size. IMHO it was pretty complex to understand the text in Flexbox and how it applies to Grid.

About the proposal to use:

the specified size if it exists, else the transferred size if it exists, else the content size

On a first sight it looks good, I don't know about specific use cases though. Probably web authors should be the want checking what makes more sense for them.

[atanassov]

Here's a relevant existing test case we have. Based on the resolution of this issue I would expect the result of the green image to be 1x2 rectangle of 100px by 200px.

https://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/html/grid-minimum-size-grid-items-007.htm

[css-meeting-bot]

The CSS Working Group just discussed Automatic Minimum Size for grid items should not min against content size, and agreed to the following resolutions:

• RESOLVED: is either it's defined size, content size, or transfer size

The full IRC log of that discussion

<dauwhe> topic: Automatic Minimum Size for grid items should not min against content size
<astearns> github: https://github.com//issues/1149
<dauwhe> TabAtkins: in flex we do to some effort to find minimum size
<dauwhe> ... if it's image we try to figure out what information is important
<dauwhe> ... this is useful because flex uses this to size the image
<dauwhe> ... grid uses the info to size the track, and then lets the image size to the track
<dauwhe> ... the big difference is say you have a specified size of 100px and intrinsic size is 50px
<dauwhe> ... we use 50px in flex
<dauwhe> ... grid doesn't have to worry about shrinking
<dauwhe> ... "So, we think the right fix is to just change Grid's automatic minimum size to be the specified size if it exists, else the transferred size if it exists, else the content size."
<dauwhe> ... this better matches author intent for automatic minimum sizing of images
<dauwhe> (tab draws on whiteboard)
<dauwhe> ... image is 50px
<dauwhe> ... put in grid container, set to 100px
<dauwhe> ... in flex, minimum value is 50, it's allowed to shrink to that
<dauwhe> ... in grid, we prefer to say let's stick with 100, 'cause the author said so
<dauwhe> ... and avoid risk of overflow
<dauwhe> Rossen: additional piece: if you open the test case
<dauwhe> https://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/html/grid-minimum-size-grid-items-007.ht
<dauwhe> TabAtkins: sets itself to 100px, but grid width is 10 x 10
<dauwhe> ... if we went by previous algo, track would be 50px
<dauwhe> ... maintaining aspect ratio is important
<dauwhe> astearns: any other comments?
<dauwhe> Rossen: this one has height set
<dauwhe> ... current spec says minimum of instrinsic and transfer?
<dauwhe> fantasai: use specified if you have it, content if you don't
<dauwhe> TabAtkins: edge does it
<dauwhe> ... any objections?
<dauwhe> astearns: hearing no objection,
<dauwhe> RESOLVED: is either it's defined size, content size, or transfer size
<dauwhe> (do what 1149 says)
<dauwhe> fantasai: there was one about stretching tracks

[fantasai]

Edits checked in:

The automatic minimum size for a grid item in a given dimension is its specified size if it exists, otherwise its transferred size if that exists, else its content size, each as defined in [CSS-FLEXBOX-1]. However, if the grid item spans only grid tracks that have a fixed max track sizing function, its specified size and content size in that dimension (and the input to the transferred size in the other dimension) are further clamped to less than or equal to the stretch fit the grid area’s size (so as to prevent the automatic minimum size from forcing overflow of its fixed-size grid area).

@mrego Would you mind reviewing to make sure this is all sane, since I can't review my own edits? ;) (I mean, I can, but a different set of eyes would be better.)

[mrego]

@fantasai I think the new text looks good.

BTW, I'm fixing this on Blink and WebKit and updating the WPT tests accordingly.