Issue metadata
Sign in to add a comment
|
[css-grid] Clamping of Automatic Minimum Size grid item doesn't work |
||||||||||||||||||||||||
Issue descriptionChrome Version: 64.0.3278.0 (Official Build) dev (64-bit) OS: Linux What steps will reproduce the problem? (1)load the attached testcase (2) (3) What is the expected result? The image should have width 5px and height 10px. What happens instead? The image has width:100px height:200px (its intrinsic size). The spec says: https://drafts.csswg.org/css-grid/#min-size-auto "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)." Automatic Minimum Size of Grid Items applies in this case since we have an 'auto' min track sizing function. Clamping applies in this case because we have a fixed max track sizing function.
,
Nov 30 2017
Yeah we were not fixing properly the "minmax(auto, fixed-size)", that has been fixed past week in bug #786971 . In master the size of the tracks is 15x10 the same than in Firefox. There's still a difference in the size of the image, and that's because of the "justify|align-items: start" (as you can see in the attached image). Which I believe Chromium is the right one there, as it has been discussed several times on the CSS WG GitHub, for example in the following issue: https://github.com/w3c/csswg-drafts/issues/283
,
Nov 30 2017
FYI, I'm using Chrome Canary. The rendering in the attached screenshot is what I'm seeing and it looks wrong to me. The spec is very clear about "so as to prevent the automatic minimum size from forcing overflow of its fixed-size grid area". Can you elaborate on why you think the image should overflow its fixed-size grid area in this case please?
,
Nov 30 2017
I believe the difference is in the alignment property that is set to "start" instead of "stretch". I believe we never had interoperability on this particular case, not only regarding images but regarding any kind of content. Check the following codepen: https://codepen.io/mrego/pen/yPGOwV?editors=1100#0 In Chromium there's a different item size depending on the alignment if it's "stretch" 1) or "start" 2). In Firefox it's the same. This part of the spec refers to compute the "auto" value in "min-width|height". If it's computed to 100px and 50px like in the example, then I believe 1) and 3) should be equivalent (that's true in both browsers) and 2) and 4) should be equivalent too (that only happens in Chromium). This difference between "stretch" and "start" has been confirmed by fantasai several times on the issue linked before. E.g. https://github.com/w3c/csswg-drafts/issues/283#issuecomment-246573701 Also there are WPT tests checking explicitly this like: http://w3c-test.org/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by e...@chromium.org
, Nov 30 2017Status: Available (was: Untriaged)