Closed Bug 1930672 Opened 9 months ago Closed 6 months ago

repeat(auto-fit/auto-fill) generates a single column on an absolutely positioned grid with max-width of 100%

Categories

(Core :: Layout: Grid, defect)

Firefox 132
Desktop
All
defect

Tracking

()

VERIFIED FIXED
136 Branch
Tracking Status
firefox134 --- wontfix
firefox135 --- wontfix
firefox136 --- verified
firefox137 --- verified

People

(Reporter: profic, Assigned: TYLin)

References

Details

Attachments

(3 files, 1 obsolete file)

Steps to reproduce:

I used repeat(auto-fit, value-in-pixels) for grid-template-columns (via the grid shortcut) for an absolutely positioned grid with max-width of 100%
a sandbox: https://codepen.io/Ivan-U7n/pen/qBegEwr

Actual results:

only a single column was generated

Expected results:

grid should have as many columns of given size as max-width allows

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.

Component: Untriaged → Layout: Grid
Product: Firefox → Core
Attached file Testcase 1 (from comment 0) โ€”

Capture the testcase in the codepen in comment 0 as a standalone html file.

Assignee: nobody → aethanyc
Status: UNCONFIRMED → NEW
Ever confirmed: true
Assignee: aethanyc → nobody

Add a reduced testcase to compare the behavior. Firefox and Chrome have the same behavior on Case 1 and Case 2.

Quote the spec https://drafts.csswg.org/css-grid-1/#auto-repeat

When auto-fill is given as the repetition number, if the grid container has a definite preferred size or maximum size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container taking gap into account;

auto-fit behaves similarly. It looks like Firefox failed to consider definite maximum size when the grid container has absolute positioning.

Severity: -- → S3

(In reply to Ting-Yu Lin [:TYLin] (PST, UTC-8) from comment #3)

Add a reduced testcase to compare the behavior. Firefox and Chrome have the same behavior on Case 1 and Case 2.

I forgot to mention that both Blink and WebKit produce expected results

BTW, thanks for making the reduced testcase, I wanted to do it myself, but had no clue on what the relevant bits were

Depends on: 1931478
Assignee: nobody → aethanyc
Status: NEW → ASSIGNED
Pushed by aethanyc@gmail.com: https://hg.mozilla.org/integration/autoland/rev/4f3dfc147a61 Resolve percentage sizes when computing auto repeat grid tracks. r=layout-grid-reviewers,tlouw
Status: ASSIGNED → RESOLVED
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → 134 Branch
Duplicate of this bug: 1935158
Regressions: 1936276

Per dholbert's suggestion in bug 1936276 comment 10, I agree it is better to backout the patch to fix the regression. However, the patch cannot be backout cleanly on truck due to a conflict. I've prepared a patch in bug 1936276 to revert the patch. Once bug 1936276 landed, we should reopen this.

The patch landed in nightly and beta is affected.
:TYLin, is this bug important enough to require an uplift?

  • If yes, please nominate the patch for beta approval. Also, don't forget to request an uplift for the patches in the regression caused by this fix.
  • If no, please set status-firefox134 to wontfix.

For more information, please visit BugBot documentation.

Flags: needinfo?(aethanyc)

Bug 1936276 landed on nightly. Per comment 12, let's reopen this bug.

Status: RESOLVED → REOPENED
Flags: needinfo?(aethanyc)
Resolution: FIXED → ---
Target Milestone: 134 Branch → ---
Pushed by aethanyc@gmail.com: https://hg.mozilla.org/integration/autoland/rev/bdd5ad96d9a8 Resolve percentage sizes when computing auto repeat grid tracks. r=layout-grid-reviewers,tlouw
Status: REOPENED → RESOLVED
Closed: 9 months ago6 months ago
Resolution: --- → FIXED
Target Milestone: --- → 136 Branch
Depends on: 1936854

I can reproduce this issue in Release v135.0 and I confirm the fix in Beta v136.0b3 and Nightly v137.0a1 in Windows 10, MacOS 14 and Ubuntu 22 using all of the test cases attached. Test case 3 is properly showing columns instead of rows.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
OS: Unspecified → All
Hardware: Unspecified → Desktop
Duplicate of this bug: 1873617
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: