1732317 - New wpt failures in /css/css-grid/grid-with-orthogonal-child-within-flexbox.html

Status: RESOLVED DUPLICATE of bug 1949064

(Core :: Layout: Grid, defect)

Description

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Syncing wpt PR 30703 found new untriaged test failures in CI

Tests Affected

New Tests That Don't Pass

/css/css-grid/grid-with-orthogonal-child-within-flexbox.html: FAIL (Chrome: PASS, Safari: FAIL)

CI Results

Gecko CI (Treeherder)
GitHub PR Head

Notes

These updates will be on mozilla-central once bug 1730616 lands.

Note: this bug is for tracking fixing the issues and is not
owned by the wpt sync bot.

This bug is linked to the relevant tests by an annotation in
https://github.com/web-platform-tests/wpt-metadata. These annotations
can be edited using the wpt interop dashboard
https://jgraham.github.io/wptdash/

If this bug is split into multiple bugs, please also update the
annotations, otherwise we are unable to track which wpt issues are
already triaged. Resolving as duplicate or closing this issue should
be cause the bot to automatically update or remove the annotation.

Comment 1

[Daniel Holbert [:dholbert]]

Reduced testcase:

data:text/html,<div style="display:inline-grid;height:1px;border:1px solid black"><div style="writing-mode:vertical-rl">abc def ghi

In Firefox, the grid (shown by the black border) is only as wide as a single line of text, and the text runs off the block-end edge (the left) and runs off the screen.

In Chrome, the grid is as wide as all three lines of text, and the text doesn't run off the screen, because the grid computes the right content-width.

Comment 2

[Daniel Holbert [:dholbert]]

We have a similar bug for flexbox, though I think this particular WPT test is broken strictly as a result of the aforementioned grid bug.

But for completeness, here's a reduced testcase for the analogous flexbox bug:

data:text/html,<div style="display:inline-flex;height:1px;border:1px solid black"><div style="writing-mode:vertical-rl">abc def ghi

In Firefox, the flex container (shown by the black border) has a 0px-wide content area (though fortunately nothing runs off the page).
In Chrome, the flex container is wide enough to fit all three lines of text.

Comment 3

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: flexbox testcase in comment 2

The orthogonal flex item returns zero intrinsic inline size (in flex container's writing mode) because we didn't know its block size, and it goes into this logic in nsLayoutUtils::IntrinsicForAxis(). This is essentially bug 1310551.

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Bug 1949064 fixed grid-with-orthogonal-child-within-flexbox.html.