[css-grid] Tracks sized with fit-content are stretching
Reported by
m...@rachelandrew.co.uk,
Aug 16 2017
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 Steps to reproduce the problem: 1. Create a grid with column tracks sized using fit-content and an argument of 200px. 2. Do not add justify-content, so the default of stretch applies. What is the expected behavior? Tracks should be clamped to 200px. What went wrong? Tracks stretch, unless we also add justify-content: start or justify-content: end. Did this work before? N/A Does this work in other browsers? No Firefox displays the tracks as I would expect. WebKit matches Chrome behavior. Chrome version: 60.0.3112.90 Channel: stable OS Version: OS X 10.12.6 Flash Version: Shockwave Flash 26.0 r0 See: https://codepen.io/rachelandrew/pen/WEXBMR?editors=1100
,
Aug 17 2017
So I thought this was a clear issue and I've already a patch for it: https://chromium-review.googlesource.com/c/618707 But now reading the specs I'm not 100% sure, so let's clarify this before landing the patch. The relevant sections of the spec are: * 11.8. Stretch auto Tracks (https://drafts.csswg.org/css-grid/#algo-stretch) This step sizes expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. * fit-content( <length-percentage> ) (https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content) Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. The max track sizing function for the fit-content() tracks is "max(auto, argument)". In the case "auto" is the maximum should it be considered an "auto max track sizing function" or not? I'm attaching an screenshot with different cases of a column with "fit-content(100px)". 1) The item is small so the track doesn't reach the 100px limit. 2) The item is large, but the min-content of that item is small. In that case the track is limited by the 100px. 3) The min-content of the item is large, so the track grows over the 100px limit. Notice that in the case 2) the height of the row is weird/wrong in Chrome (as it's not updated after stretching the track). Would be ok to avoid stretching in all cases? Should we stretch any of them? IMHO, I believe that we should avoid stretching for fit-content(). That would be simpler to implement too. But I'd love to hear the feedback from Rachel and Tab on the topic. Thanks!
,
Aug 18 2017
There's now an issue on CSS WG to clarify this behavior: https://github.com/w3c/csswg-drafts/issues/1732
,
Sep 21 2017
The CSS WG has resolved that fit-content() tracks are not affected by stretch: https://github.com/w3c/csswg-drafts/commit/a6b069786a80a2fd029fa38cc2d4cafa40576180
,
Sep 21 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8 commit 35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8 Author: Manuel Rego Casasnovas <rego@igalia.com> Date: Thu Sep 21 14:09:23 2017 [css-grid] fit-content() tracks shouldn't stretch The spec is pretty clear regarding this (https://drafts.csswg.org/css-grid/#algo-stretch): "This step sizes expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them." The fit-content() tracks don't have an auto max track sizing function, so they shouldn't be considered in this step of the algorithm. The patch modifies GridTrackSizingAlgorithm::InitializeTrackSizes() so it doesn't consider fit-content() tracks as auto sized ones (which are the ones later stretched in the last step of the algorithm). Added new case to an existent test and also modified the expected result in another one. On top of that add a new test in WPT covering more cases. BUG= 755994 TEST=fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html TEST=external/wpt/css/css-grid-1/alignment/grid-fit-content-tracks-dont-stretch-001.html Change-Id: Ic4ffb83518f0e0ca879196c5bb4dd997c373c66b Reviewed-on: https://chromium-review.googlesource.com/618707 Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#503437} [add] https://crrev.com/35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-fit-content-tracks-dont-stretch-001.html [modify] https://crrev.com/35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks-expected.txt [modify] https://crrev.com/35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-stretch-only-valid-for-auto-sized-tracks.html [modify] https://crrev.com/35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-intrinsic-maximums-expected.html [modify] https://crrev.com/35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8/third_party/WebKit/Source/core/layout/GridTrackSizingAlgorithm.cpp [modify] https://crrev.com/35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8/third_party/WebKit/Source/core/layout/GridTrackSizingAlgorithm.h
,
Sep 21 2017
|
|||
►
Sign in to add a comment |
|||
Comment 1 by r...@igalia.com
, Aug 16 2017Components: -Blink>Layout Blink>Layout>Grid
Labels: -OS-Mac OS-All
Status: Available (was: Unconfirmed)