1514864 - [css-align][css-grid] orthogonal vertical-rl baseline group is aligned to the wrong side of the alignment container

Status: NEW

(Core :: Layout: Grid, enhancement, P3)

Description

[Mats Palmgren (inactive)]

Attachment: Testcase #1

A 'first baseline' group should be aligned to the start side.
A 'last baseline' group should be aligned to the end side.
https://drafts.csswg.org/css-align-3/#align-by-baseline

We get the top-right quadrant (vertical-rl) wrong in each set.

Fwiw, Chrome renders the 'first baseline' cases correctly,
but both 'last baseline' cases wrong.
https://bugs.chromium.org/p/chromium/issues/detail?id=885175

Edge renders all cases correctly.

Comment 1

[Mats Palmgren (inactive)]

Does this also affect flexbox given that we share some of
the alignment code?

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase #2 (flex containers, with align-items instead of justify-items)

(In reply to Mats Palmgren (:mats) from comment #1)
> Does this also affect flexbox given that we share some of
> the alignment code?

Note that "justify-items" has no effect in flex, so here's a version using "align-items" in a column-oriented flex container instead.

(I think it's the most direct grid-to-flex conversion of your first testcase, but I might've missed something. I added a little bit of margin, too, so that overflowing content can be seen a bit easier.)

Anyway: this shows we're inconsistent/wrong for the "last baseline" case (we snap the flex items to the right edge for "end", vs. left edge for "last baseline" (and we overshoot the left edge a bit, too).

(And the "first baseline" chunk of this testcase disagrees with your grid version, so there may be some different brokenness there, too.)