Summary: | [css-grid] Logical margin incorrectly applied during the tracks sizing algorithm of auto tracks | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Javier Fernandez <jfernandez> | ||||||||
Component: | Layout and Rendering | Assignee: | Javier Fernandez <jfernandez> | ||||||||
Status: | RESOLVED FIXED | ||||||||||
Severity: | Normal | CC: | bfulgham, commit-queue, hyatt, jfernandez, rego, simon.fraser, svillar, zalan | ||||||||
Priority: | P2 | ||||||||||
Version: | WebKit Nightly Build | ||||||||||
Hardware: | Unspecified | ||||||||||
OS: | Unspecified | ||||||||||
See Also: | https://bugs.chromium.org/p/chromium/issues/detail?id=670642 | ||||||||||
Attachments: |
|
This issue has been already solved in Blink, so it'd be a matter of porting the following patch: https://codereview.chromium.org/2543193002/ Created attachment 311765 [details]
Patch
Comment on attachment 311765 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=311765&action=review > LayoutTests/fast/css-grid-layout/grid-track-sizing-with-margins-and-orthogonal-flows.html:7 > +.item { margin: 10px 5px 5px 15px; } I'd use a different value for each margin property, so we're sure we're not mixing margin-right and margin-bottom. What about something like: 10px 5px 20px 15px ? Created attachment 311818 [details]
Patch
Comment on attachment 311818 [details] Patch Clearing flags on attachment: 311818 Committed r217709: <http://trac.webkit.org/changeset/217709> All reviewed patches have been landed. Closing bug. |
Created attachment 311761 [details] Test case to reproduce the issue There are some cases where right/left margin is applied to determine an orthogonal item's width. This is incorrect because right/left are absolute directions which can operate along inline or block item's axis depending on its writing-mode. It seems we are using the grid container's writing-mode to determine the logical size of the margin. This is incorrect for orthogonal items, as it's shown in the attached test case.