1840778 - Firefox fails WPT css/css-flexbox/alignment/flex-align-baseline-grid-001.html, flex-align-baseline-grid-002.html, and flex-align-baseline-grid-003.html

Status: NEW

(Core :: Layout: Grid, defect)

Description

[Daniel Holbert [:dholbert]]

We fail this interop-2023-relevant WPT test:
http://wpt.live/css/css-flexbox/alignment/flex-align-baseline-grid-003.html

Specifically, we disagree with the test's expectation for the position of the first blue box in the second and third section.

I think this is actually a bug in our grid code. The question is what the first (or last) baseline is, for the grid; we seem to be using the first grid item to derive the first baseline, and the last baseline to derive the last baseline. However, that's not correct; in this case, the first & last grid items have align-self:start which makes that item not participate in baseline alignment, which means we shouldn't be extracting the baseline from either of those items (since there are other items that do participate in baseline alignment).

The relevant spec text that explains this is here:
https://drafts.csswg.org/css-grid-1/#grid-baselines

The first (last) baselines of a grid container are determined as follows:
Find the first (last) row of the grid container containing at least one grid item.
If any of the grid items intersecting this row participate in baseline alignment in that row, the grid container’s baseline set is generated from the shared alignment baseline of those grid items.

(note that the "row" in this testcase is vertical since there's a vertical writing mode)

In this testcase, the other items in this row are baseline-aligned and so we should be using them to derive the grid container's baseline, not the first/last grid items.

As a diagnostic technique, you can see that we get the correct result (for this one box) if you use devtools to un-tick this declaration:

.inner > div:first-child, .inner > div:last-child {
  align-self: start;

(We continue aligning with that first (or last) grid item, but that grid item ends up baseline-aligned which produces the correct alignment location.)

Comment 1

[Daniel Holbert [:dholbert]]

Looks like there are 3 different copies of the test (with different writing modes) and we fail all three for this same reason:
https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-grid-001.html
https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-grid-002.html
https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-grid-003.html

all three together:
https://wpt.fyi/results/css/css-flexbox/alignment?label=master&label=experimental&aligned&q=flex-align-baseline-grid

Comment 2

[Daniel Holbert [:dholbert]]

(bookkeeping note: the failures here are only 2 of 12 subtests per test, so score-wise, this is worth 3 * 2/12 = 6/12 = 0.5, i.e. the failures here are half of a single flexbox-focus-area test's weight.)