1735142 - Firefox computes too large of an intrinsic size for grids that auto-fill by column, with large enough definite height to produce multiple rows

Status: NEW

(Core :: Layout: Grid, defect)

Description

[Sébastien]

Attachment: The actual thing that i have

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0

Steps to reproduce:

i use this code to create a grid with a dynamic width and a specified height.
To this grid i add a border-right to check the end of the div.
I think, the border should be at the end of the grid, but actually, the grid and the div doesn't have the same width, so, the border is at the end of the div and not at the end of the grid.

(This actually work in many applications like Chrome & Safari)

.container {
  height: 100px;
}

.grid {
  border-right: 1px solid black;
  height: 100%;
  display: inline-grid;
  grid: repeat(auto-fit, 40px) / auto-flow;
  grid-auto-columns: 40px;
}

<div class="container">
  <div class="grid">
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
  </div>
</div>

you can found a jsfiddle here: https://jsfiddle.net/hxzfgbnd/17/
or a codepen here: https://codepen.io/Ahk256/pen/QWMwLVK

Actual results:

Actually i have this :
https://imgur.com/a/IelugVH

Expected results:

i should get this like this image:
https://imgur.com/a/nQvTdwL

Comment 1

[Sébastien]

Attachment: The thing that i expect

Comment 2

[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 3

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

Redirect a needinfo that is pending on an inactive user to the triage owner.
:dholbert, since the bug doesn't have a severity set, could you please set the severity or close the bug?

For more information, please visit auto_nag documentation.

Comment 4

[Sébastien]

i can't set the severity myself i think ... how can i change it please ?

Comment 5

[Daniel Holbert [:dholbert]]

Looks like this is a case where we're computing the intrinsic size in a somewhat naive manner -- we assume that all of the content will be laid out in a single row (and we use that assumption to produce a wide intrinsic width), but in fact in the final layout there are two rows, since the testcase's CSS says to do the layout by auto-filling by column, and we have enough height for two items to fit in each column.

The logic in question here lives in nsGridContainerFrame::IntrinsicISize:
https://searchfox.org/mozilla-central/rev/893a8f062ec6144c84403fbfb0a57234418b89cf/layout/generic/nsGridContainerFrame.cpp#9346

I think right now that function doesn't have the requisite args to reliably detect whether we have a definite height (i.e. definite block-size) or not. Reflow does have that information via the ReflowInput struct, but our setup assumes that IntrinsicISize doesn't need to know anything about the block axis. So this may be difficult to fix in a robust way until/unless we redesign IntrinsicISize to have some knowledge about the block axis.

This is sort of a grid equivalent of bug 995020, for what it's worth.