New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 1 user
Status: Fixed
Owner:
Closed: Sep 21
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment
[css-grid] Tracks sized with fit-content are stretching
Reported by m...@rachelandrew.co.uk, Aug 16 Back to list
UserAgent: 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
 
14-fit-content-is-stretching.zip
1.8 KB Download
Cc: svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Components: -Blink>Layout Blink>Layout>Grid
Labels: -OS-Mac OS-All
Status: Available
Cc: m...@rachelandrew.co.uk tabatkins@chromium.org
Owner: r...@igalia.com
Status: Started
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!

Screenshot from 2017-08-17 11-43-59.png
63.0 KB View Download
There's now an issue on CSS WG to clarify this behavior: https://github.com/w3c/csswg-drafts/issues/1732
The CSS WG has resolved that fit-content() tracks are not affected by stretch:
https://github.com/w3c/csswg-drafts/commit/a6b069786a80a2fd029fa38cc2d4cafa40576180
Project Member Comment 5 by bugdroid1@chromium.org, Sep 21
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

Status: Fixed
Sign in to add a comment