Bug 182922

Summary: [css-grid] Incorrect calculation of repeat() with multiple values, auto-fill and grid-gap
Product: WebKit Reporter: Roman Komarov <kizmarh>
Component: CSSAssignee: Oriol Brufau <obrufau>
Status: RESOLVED FIXED    
Severity: Normal CC: changseok, clopez, esprehn+autocc, ews-watchlist, glenn, jfernandez, kondapallykalyan, obrufau, pdr, rego, simon.fraser, svillar, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.chromium.org/p/chromium/issues/detail?id=813511
https://bugzilla.mozilla.org/show_bug.cgi?id=1341507
Attachments:
Description Flags
Screenshot of the bug
none
Patch
none
Patch none

Roman Komarov
Reported 2018-02-19 01:49:40 PST
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 Flash Version: 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
Attachments
Screenshot of the bug (86.82 KB, image/png)
2018-02-19 01:49 PST, Roman Komarov 		no flags
Details
Patch (11.68 KB, patch)
2020-05-20 11:38 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Patch (11.74 KB, patch)
2020-05-20 12:55 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Carlos Alberto Lopez Perez
Comment 1 2020-03-31 03:58:01 PDT
This very same issue was reported for Chromium at https://crbug.com/813511 (already fixed)
Carlos Alberto Lopez Perez
Comment 2 2020-03-31 04:01:26 PDT
A test case for this its available on WPT: http://wpt.live/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html
Oriol Brufau
Comment 3 2020-05-20 11:38:01 PDT
Created attachment 399861 [details] Patch
Manuel Rego Casasnovas
Comment 4 2020-05-20 12:48:56 PDT
Comment on attachment 399861 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=399861&action=review r=me > Source/WebCore/ChangeLog:15 > + This patch modifies two places that relates to the gaps between the Nit: s/relates/relate/
Oriol Brufau
Comment 5 2020-05-20 12:55:59 PDT
Created attachment 399878 [details] Patch
EWS
Comment 6 2020-05-20 13:24:56 PDT
Committed r261949: <https://trac.webkit.org/changeset/261949> All reviewed patches have been landed. Closing bug and clearing flags on attachment 399878 [details].
Radar WebKit Bug Importer
Comment 7 2020-05-20 13:25:13 PDT
<rdar://problem/63461028>
Note You need to log in before you can comment on or make changes to this bug.