1857365 - <img> grid item with percentage height, "width: auto", "grid-template-columns: auto", and no track stretching makes column to have the same width of the original image's width

Status: NEW

(Core :: Layout: Grid, defect)

Description

[Arsemy]

Attachment: weird firefox behavior vs expected chromium behavior

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Steps to reproduce:

Create a grid container, remove track stretching, set image's column to "auto"

Create an image inside the grid container. Image's "width: auto" continues as is. The image's height must be a percentage that makes its width smaller than the original size.

Actual results:

Although the image's width followed the height to maintain proportion, the corresponding column for the image retains the image's original width.

Codepen: https://codepen.io/Arsemy/pen/rNoQyNP
Obs: you may want to use the browser's tools to see the column size

Expected results:

The image's column should have followed the image's width because doing the opposite (i.e., setting a width percentage and letting "grid-template-rows: auto") doesn't preserve the size, or simply using pixels.

Comment 1

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

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

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Thanks for the bug report. I can reproduce; here's the standalone testcase taken from codepen. (You need to use devtools to draw grid lines to see the discrepancy, as shown in the reporter's screenshot.)

Comment 3

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Hello, thank you for the bug report!
Managed to reproduce the issue on:

• Nightly 120.0a1;
• Firefox 119.0;
• Firefox 118.0.2;

Tested and reproduced on:

• macOS 12;
• Windows 10;
• Ubuntu 22;

Since this bug is already set as NEW I'm going the update the status flags.

Comment 4

[Roman Czerkies]

Hi,
Same issue here.

Do we have any news about it?

Comment 5

[Nick]

Serious layout issue in my app because of this bug still not fixed. Works well under chromium based browsers.