New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] New stretch "auto" tracks steps needs more text for indefinite height grid containers #1866

Closed
mrego opened this Issue Oct 13, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@mrego
Member

mrego commented Oct 13, 2017

In issue #1150 we added a new step to the Grid Track Sizing algorithm: 11.8. Stretch auto Tracks.

We've implemented that in Blink and WebKit but found a regression due to this change.
The example is really simple (the trick is in the min-height part):

<div style="display: grid; min-height: 200px; border: solid thick;">
  <div style="background: cyan; font: 20px/1 Monospace">item</div>
</div>

Current status vs expected one

In this case the height of the grid container is indefinite, the size of the row is calculated as the height of the text (20px) . Then when we are in the Stretch auto Tracks step we don't stretch the track as the free space is not definite.
The expected result is that the row has 200px height, however it has just the text height (20px).

The problem is that this new step lacks some text like the one we have for flexible tracks:

If using this flex fraction would cause the grid to be smaller than the grid container’s min-width/height (or larger than the grid container’s max-width/height), then redo this step, treating the free space as definite and the available grid space as equal to the grid container’s content box size when it’s sized to its min-width/height (max-width/height).

I believe we'd need to add something like this to the new step too, to avoid this issue.

@tabatkins

This comment has been minimized.

Member

tabatkins commented Oct 13, 2017

Fixed, thanks! Let us know if the edits are adequate.

@mrego

This comment has been minimized.

Member

mrego commented Oct 16, 2017

Thanks for the quick fix, the text looks good to me.
I'd add a new test case with the fix in Blink.

@mrego

This comment has been minimized.

Member

mrego commented Oct 23, 2017

Test case added in web-platform-tests/wpt#7782.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment