Bug 172836 – [css-grid] Logical margin incorrectly applied during the tracks sizing algorithm of auto tracks

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Javier Fernandez]

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.

[Javier Fernandez]

This issue has been already solved in Blink, so it'd be a matter of porting the following patch:

https://codereview.chromium.org/2543193002/

[Javier Fernandez]

Created attachment 311765 [details]
Patch

[Manuel Rego Casasnovas]

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 ?

[Javier Fernandez]

Created attachment 311818 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 311818 [details]
Patch

Clearing flags on attachment: 311818

Committed r217709: <http://trac.webkit.org/changeset/217709>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.