1818933 - Various interop2023-relevant WPT failures due to "align-self:baseline" falling back to "flex-start" instead of synthesizing a baseline

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, defect)

Description

[Daniel Holbert [:dholbert]]

We have a handful of WPT failures that all boil down to the same bug (where our behavior matches older spec text, I think):
https://wpt.fyi/results/css/css-flexbox/align-baseline.html
https://wpt.fyi/results/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml (and I think its -002 through -005 variants)
Probably some others too.

In all of these tests, we fail because there's an align-self:baseline flex item that we're treating as falling back to flex-start alignment, I think (because the item doesn't have a baseline in the given axis). So we're snapping the item to the adjacent side, basically.

But in fact, rather than falling-back, we're supposed to synthesize a baseline from the border-box -- which in this case means we should align the border-start edge of the baseline-aligned items, I think. (That seems to be what the tests expect.)

It looks like our behavior matches what the spec said before https://github.com/w3c/csswg-drafts/commit/e2d49c4012b607ffbab0e086d70a6ee3a9499b27

(The resolution was noted in https://github.com/w3c/csswg-drafts/issues/373#issuecomment-244829198 )

Comment 1

[Daniel Holbert [:dholbert]]

For reference: the relevant spec change is listed as https://drafts.csswg.org/css-flexbox-1/#change-2016-baseline-alignment in the spec changelog, as TYLin noticed over in https://phabricator.services.mozilla.com/D181823#inline-1007823

Comment 2

[Daniel Holbert [:dholbert]]

I think this failure is due to this issue as well:
https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-007.html
...though in this case it's last baseline which we're treating as falling back to flex-end; the same basic thing as discussed above but just for the end side. Specifically, we end-align #target > div 3 and so we fail that subtest as a result.

Also these ones:
https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-005.html
https://wpt.fyi/results/css/css-flexbox/alignment/flex-align-baseline-006.html

Comment 3

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

Attachment: Bug 1818933 - Synthesize flex item's baseline if its inline axis is the cross axis.

After this patch, we'll fail four tests due to reference files written in grid
layout, and we have a bug in grid baseline alignment.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4d7123b9c572
Synthesize flex item's baseline if its inline axis is the cross axis. r=dholbert

Comment 5

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/4d7123b9c572