1445190 - [css-grid] Grid elements percentages in margins don't resolve to width of their grid column but the container

Status: RESOLVED FIXED

(Core :: Layout, defect, P3)

Description

[Michał Gołębiowski-Owczarek [:mgol]]

Firefox has recently (in v60) has changed percentages in margins/paddings to resolve against width of the container instead of their respective dimension to match the spec change and align with Chrome & Safari:
https://github.com/w3c/csswg-drafts/issues/2431

However, even in the latest, yesterday's Nightly the behavior is still not identical. See one of the test cases prepared by Rachel Andrew:
https://codepen.io/rachelandrew/pen/xpVLza
as part of her post about the issue:
https://rachelandrew.co.uk/archives/2017/12/20/how-should-we-resolve-percentage-margins-and-padding-on-grid-and-flex-items/

It looks identical in Chrome/Safari/Firefox now but only as long as the container has a specified height. Once you remove that, the container collapses completely and in Chrome/Safari it still has a 60px resolved height.

It seems that Firefox is resolving the percentages to the container width, not the width of a respective grid column.

Comment 1

[Jet Villegas (inactive)]

[Triage 2018/03/23 - P3]

Comment 2

[Mats Palmgren (inactive)]

The testcase seems to work fine for me in the latest Nightly.
(I think this was fixed by bug 1434478.)

Michał, can you confirm please?

Comment 3

[Michał Gołębiowski-Owczarek [:mgol]]

Yes, I confirm the issue no longer reproduces in latest Nightly (2018-04-22) while it exists in Developer Edition 60.0b14.

Thanks!