1346533 - [css-grid] Possible bug relating to height of Grid auto track when percentage height is used inside grid-item as pseudo element.

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[me]

Attachment: expected_and_actual_screenshots.zip

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Steps to reproduce:

The Grid row track height of some rows in a CSS Grid layout does not appear to be calculated correctly. The grid item in this case has an element that uses the padding-bottom with a percentage height technique to create an element with a fixed aspect ratio. This is causing display issues in Firefox. The same example works fine in Chrome 57. CodePen link here: https://codepen.io/rctneil/pen/vxgGar


Actual results:

Grid row track height not calculating correctly


Expected results:

See CodePen in Chrome: https://codepen.io/rctneil/pen/vxgGar

Row track height should be correctly calculated.

Comment 1

[Loic]

Attachment: actual.png

Comment 2

[Loic]

Attachment: expected.png

Comment 3

[Mats Palmgren (inactive)]

Attachment: reduced version of the reporter's testcase

Comment 4

[Mats Palmgren (inactive)]

Firefox is resolving grid item percentage padding (and margin) against the size
in the same axis, e.g. padding-top percentages are resolved against the height
of the grid area (which is 'auto' in this case, so the padding is zero).
This is compliant with the CSS Grid spec.
(and we do the same on flex items, fwiw)

The reported testcase depends on a bug in Chrome, this one to be precise:
https://bugs.chromium.org/p/chromium/issues/detail?id=229568