1737353 - WPT test flex-tracks-with-fractional-size.html test is failing on Firefox (due to rounding issues with `fr` units and large numbers of tracks)

Status: NEW

(Core :: Layout: Grid, defect)

Description

[aanala]

User Agent: Mozilla/5.0 (X11; CrOS x86_64 14150.64.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.104 Safari/537.36

Steps to reproduce:

Below wpt test is failing on Firefox

external/wpt/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html

https://crrev.com/929538
Cl: https://chromium-review.googlesource.com/c/chromium/src/+/3193674

Chromium Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1249750

Chrome test failure bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1102918

Webkit test failure bug: https://bugs.webkit.org/show_bug.cgi?id=232173

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 revert this change in case you think the bot is wrong.

Comment 2

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

The severity field is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Daniel Holbert [:dholbert]]

Direct link to test: https://wpt.live/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html

There are two grids -- one called cols and one called rows -- and in both of them, Firefox shows a bit of red at the very end of the grid (at the top-right and bottom edge of the green square).

The first grid here has precisely 973 columns and the second has 973 rows; and they each have 973 grid items that are placed into those tracks. The tracks are sized using 1fr units (to divide up the space equally, or as equally as possible). So theoretically, the tracks should precisely fill the grid, and so the items should cover up the whole grid, and so no red should be visible.

The issue seems to be that Firefox is failing to precisely divide up the grid's space (100px of width / 50px of height) into 973 pieces, such that the whole area of the grid is divvied up.

If I adjust the testcase to use 600 as the magic number instead of 973 (which works nicely with our 60-app-units-per-pixel fixed-point conversion), then we pass just fine.

Comment 4

[Daniel Holbert [:dholbert]]

Actually, I don't think the dynamically-added grid items make a difference in the test. The green area that you see is actually just from the single grid item with "grid-column: 1 / -1" (orgrid-row`), which spans all of the tracks from start to end. The other elements have zero size (e.g. in #cols, they're as wide as the tiny columns, but they have zero height), so they do not render at all.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 1, with a variety of equal-width columns

Here's a testcase showing how this looks with a variety of column-counts. The first three (1, 100, 500) all look fine; the last 3 (700, 800, 973) are all broken (800 is too wide and covers up the right border; 700 and 973 are too skinny and leave some red visible)

Comment 6

[Daniel Holbert [:dholbert]]

Aha, it looks like this is essentially an instance of bug 1201941 (i.e. known issue, though I'm not sure we had a concrete testcase until now).

Comment 7

[aanala]

Below is the wpt.fyi test link for
external/wpt/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html

https://wpt.fyi/results/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html?label=master&product=chrome%5Bexperimental%5D&product=edge&product=firefox&product=safari&product=webkitgtk&aligned

Comment 8

[WANG Xuerui [:xen0n]]

Attachment: Bug 1737353 - Add support for the LoongArch 64-bit architecture. r=kaie

Comment 9

[Phabricator Automation]

Comment on attachment 9269959 [details]
Bug 1737353 - Add support for the LoongArch 64-bit architecture. r=kaie

Revision D142407 was moved to bug 1730353. Setting attachment 9269959 [details] to obsolete.