Re: [csswg-drafts] [css-grid] Replaced elements canvas, img, etc should behave as expected when styled with relative sizes in grid, transferred size should not affect them unless specifically asked to (#6278)

Here is a [testcase](http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9510) which doesn't involve `auto` min track sizing functions nor automatic minimum sizes:

```html
<div style="display: grid; grid-template: minmax(min-content, 1fr) / minmax(min-content, 1fr); width: 200px; height: 100px; border: thick solid;">
 <img src="http://placehold.it/100x100" style="width:100%; height: 100%; min-width: 0; min-height: 0; opacity: .9;">
</div>
```

My understanding of what's happening is, following https://drafts.csswg.org/css-grid/#algo-overview

> 1. First, the track sizing algorithm is used to resolve the sizes of the grid columns.

The percentage resolves against 0 according to https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution
So the base size is 0 after intrinsic contributions ([§12.5](https://drafts.csswg.org/css-grid/#algo-content)), but then the `1fr` expands it to 200px ([§12.7](https://drafts.csswg.org/css-grid/#algo-flex-tracks)).

> 2. Next, the track sizing algorithm resolves the sizes of the grid rows. [...] To find the inline-axis available space for any items whose block-axis size contributions require it, use the grid column sizes calculated in the previous step.

So the image is sized in a cell of width 200px, and somehow via the aspect ratio this produces a min-content contribution of 200px. The percentage doesn't resolve against 0 like previously, presumably because `min-content` (https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content)

> for a box’s block size, unless otherwise specified, this is equivalent to its automatic size. 

But if I recall correctly, this "otherwise specified" was for css2 boxes, here we are in grid layout.

So my hypothesis is that if Chromium implemented #3973 in order to be able to size grid items under a min-content constraint in the block axis, this `min-content` case would work like in Firefox. And then, the `auto` case would work thanks to the inequality

> minimum contribution ≤ min-content contribution ≤ max-content contribution

(the spec may need edits to really enforce this).

-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6278#issuecomment-886257552 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 25 July 2021 21:05:26 UTC