Created attachment 334146 [details]
Screenshot of the bug
Steps to reproduce the problem:
1. Go to https://codepen.io/kizu/pen/paayMm?editors=1100
2. Resize the viewport
3. Look at second example
What is the expected behavior?
The second example (the one with the bigger grid-gap) should work as well as the first one
What went wrong?
For some viewport values the width of the second example is calculated incorrectly, so there is a scrollbar created for the page and the layout looks broken.
Did this work before? No
Does this work in other browsers? Yes
Chrome version: 62.0.3202.94 Channel: n/a
OS Version: OS X 10.13.2
The bigger the grid-gap, the bigger the problem, the first example at the codepen is also buggy, but as the grid-gap is very small, its almost unnoticable.
Other browsers: Edge works properly in all cases, but Firefox doesn't support multiple values at repeat() with auto-fill at all — https://bugzilla.mozilla.org/show_bug.cgi?id=1341507
This very same issue was reported for Chromium at https://crbug.com/813511 (already fixed)
A test case for this its available on WPT: http://wpt.live/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html
Created attachment 399861 [details]
Comment on attachment 399861 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=399861&action=review
> + This patch modifies two places that relates to the gaps between the
Created attachment 399878 [details]
Committed r261949: <https://trac.webkit.org/changeset/261949>
All reviewed patches have been landed. Closing bug and clearing flags on attachment 399878 [details].