1719273 - CSS aspect-ratio doesn't occupy space inside grid with auto columns.

Status: NEW

(Core :: Layout: Grid, defect, P3)

Description

[justas543]

Attachment: Screenshot 2021-07-06 141606.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Steps to reproduce:

Go to https://jsfiddle.net/hqezdgLy/
Observe element using css aspect-ratio is positioned as if it does not have any width.

Chrome had similar issue with grid columns auto sizing which is now fixed in latest canary. https://bugs.chromium.org/p/chromium/issues/detail?id=1213878

Actual results:

Grid columns does not have the same size as element with css aspect-ratio.

Expected results:

Grid columns have the same size as element with css aspect-ratio.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emily McDonough [:alaskanemily]]

Boris, I remember you were working on grid+aspect ratio, can you take a look at this?

Comment 3

[Boris Chiou [:boris]]

Sure. I take this.

Comment 4

[Boris Chiou [:boris]]

I suspect this may be related to Bug 1716667, which is recently updated by Google Chrome.

Comment 5

[Boris Chiou [:boris]]

Attachment: testcase.html

The reduced test case from https://jsfiddle.net/hqezdgLy/

Comment 6

[Boris Chiou [:boris]]

OK. It seems we always use nscoord_MAX as the percentage basis when computing inline intrinsic size:
https://searchfox.org/mozilla-central/rev/b79212b4fc017f27ac2435a658d4e9b9798efa86/layout/generic/nsGridContainerFrame.cpp#2873
So we cannot compute a valid block size in nsLayoutUtils::IntrinsicForAxis(), and we cannot compute its inline size by aspect-ratio and the block size.

Comment 7

[Boris Chiou [:boris]]

I just replace the div with img (i.e. replaced elements) and it seems only Firefox has the issue:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=9475

Looks like we use its intrinsic inline size for resolving the grid track sizes, instead of applying the natural ratio. This should be an existing issue.

Comment 8

[Boris Chiou [:boris]]

This may depend on bug 1300366 (step 3 in https://drafts.csswg.org/css-grid/#algo-overview):

Then, if the min-content contribution of any grid item has changed based on the row sizes and alignment calculated in step 2, re-resolve the sizes of the grid columns with the new min-content and max-content contributions (once only).

Comment 9

[Christopher Kirk-Nielsen]

I believe I am running into the exact same problem. I have a minimal repro case here, please let me know if this is not the same issue so I can file a new ticket.

Demo on CodePen

Screenshot comparing browsers