1480850 - [css-flexbox] implement align-content: [first/last] baseline for flexbox

Status: NEW

(Core :: Layout: Flexbox, enhancement)

Description

[Daniel Holbert [:dholbert]]

Attachment: mockup of how align-content:baseline (on 2nd flex item) would take effect on a flex item that is just a block

align-content:baseline (with optional first/last modifier) feels a bit complex & arcane, so I'm splitting it off of from bug 1472843.

Relevant spec sections:
https://drafts.csswg.org/css-align-3/#baseline-align-content
https://drafts.csswg.org/css-align-3/#propdef-align-content

As I understand it, it's supposed to work like this (just focusing on one scenario):

If a flex item (yes, item! not container) has "align-self:stretch; align-content:baseline", then: that item gets stretched to fill its flex line (like it normally would), BUT some of that stretching comes from stretching the padding-top, effectively -- not its content-box.  Its content box needs to be shifted down (hence, not stretched all the way) so that its baseline aligns with with the baseline of the flex line that it's participating in.

I've attached a mockup of what I think this looks like, in practice. The testcase has a flex container with 2 (block) flex items:
 - one with a single tall character, which has "align-self:baseline"
 - one with smaller text, which has "align-self:stretch; align-content: baseline"

The second flex item's black rectangle represents its margin-box, and its orange rectangle represents its content box.  Notably: its margin-box is still stretched to fit its flex line, but not all of that stretching comes from stretching the content-box. Instead, some extra effective padding is inserted above the top of its content box.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: mockup of how align-content:baseline (on 2nd flex item) would take effect on flex item which is also a flex container

Here's a mockup like the previous one, but now the second flex item is itself a flex container.  The purple boxes represent its flex lines, and again, the orange box represents its content area.

Comment 2

[Daniel Holbert [:dholbert]]

See discussion in https://github.com/w3c/csswg-drafts/issues/3005 for some weird edge cases around column-oriented flex containers *as flex items* (or grid items) and with align-content:baseline applied to them.  (This is unspecced as of now, but basically we should treat `align-content:baseline` as `start` in that scenario.