[css-flexbox-1] Flex container baselines with reverse direction.

bfgeek commented 2 years ago

Consider: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10775

<!DOCTYPE html>
baseline
<div style="border: solid 3px; display: inline-flex; flex-direction: row-reverse;">
  <div style="background: lime;">a</div>
  <div style="background: hotpink; font-size: 30px;">b</div>
</div>

Here all implementions pick up the "a" baseline (logically last), instead of the "b".

Following this logic for "last baseline" would mean the last baseline is at the top. (Note Firefox doesn't appear to support this case - unsure what its doing).

Are implementations correct? I believe implementations are incorrect per-spec - from: https://drafts.csswg.org/css-flexbox-1/#flex-baselines "To this end, the baselines of a flex container are determined as follows (after reordering with order, and taking flex-direction into account):"

But should be explicit. Note there are several WPTs asserting this behaviour.

dholbert commented 2 years ago

Yeah, the spec says (for this fallback "no baseline-aligned flex items" case:

the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item

I presume that's writing-mode-relative startmost/endmost, rather than flex-start-most etc. Would be good to make that explicit with a parenthetical, perhaps (e.g. (i.e. the item closest to thestartside) I'm not sure "startmost flex item" is super well-defined in this context. (It's also worth considering the fact that some flex items might e.g. have relative positioning that technically makes them "startmost" in terms of their actual position, even though their DOM order is somewhere in the middle. Presumably we don't want to consider relative positioning when determining which item is "startmost".)

This startmost/endmost language is new to me, I think; the spec used to say "...the first/last flex item" instead, but that changed here as a fix for #995. Looks like all implementations approximately match the old spec text; maybe we all just missed the spec edit? :)

I don't have strong feelings on what's best here; it's a relatively trivial change if we do decide to change (assuming webcompat allows it)

dholbert commented 2 years ago

Note there are several WPTs asserting this behaviour.

Without knowing which WPTs in particular you're talking about, I would bet that they were written before the current spec text was added (this is the case at least for the WPTs that you listed in the other similar issue).

So: they were correct-at-the-time, and just need to be updated to reflect the current spec, if indeed we want to keep the current spec.

bfgeek commented 2 years ago

The only reason not to keep the current spec is that the following case is the predominant usecase for flex-direction: column-reverse: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10819

<!DOCTYPE html>
<div style="display: flex; flex-direction: column-reverse; overflow-y: scroll; width: 100px; height: 100px; border: solid 3px; padding: 10px; gap: 10px">
  <div style="font-size: 80px; background: lime;">1</div>
  <div style="font-size: 80px; background: lime;">2</div>
</div>

If we keep the spec as is the first baseline will be the border-box block-start edge, last baseline will be the "1". (This is likely fine, just want to mention the (only) downside).

css-meeting-bot commented 2 years ago

The CSS Working Group just discussed Container baselines with reverse directions, and agreed to the following:

RESOLVED: flex baselines take flex ordering into account so first/last use roughly *physical* directions

The full IRC log of that discussion

<fantasai> Topic: Container baselines with reverse directions
<Rossen_> github: https://github.com/w3c/csswg-drafts/issues/7776
<jcraig> s/????: I do agree /BGaraventa: I do agree /
<jcraig> s/bryang/BGaraventa/
<orieo1> 💨Don’t miss this chance to be Rich... (full message at <https://matrix.org/_matrix/media/r0/download/matrix.org/psopYbVXgoniRhIHyGzDqZuD>)
<TabAtkins> ScribeNick: TabAtkins
<TabAtkins> iank_: at TPAC we did a bunch of baseline stuff
<TabAtkins> iank_: Today, if we have flex-direction:*-reverse, we will take the first baseline from the first in DOM order, the "logical" first
<TabAtkins> iank_: this is interoperable across all browsers
<TabAtkins> iank_: The spec doesn't say this, I believe it says to take flex-direction into account, which means browsers are all wrong today
<TabAtkins> iank_: We're willing to make this change, I don't have strong opinions
<jcraig> rrsagent, make minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2022/09/28-css-minutes.html jcraig
<Rossen_> q?
<TabAtkins> fantasai: I think the spec change makes sense, if you ask for last-baseline you want the baseline at the bottom, not the top
<TabAtkins> fantasai: So I think that makes the most sense
<TabAtkins> iank_: It'll likely be compatible
<TabAtkins> iank_: One possible case is people doing column-reverse and having overflow propogate things upwards, so the "first" thing will be way up in the overflow area and get clamped to the block-start edge
<TabAtkins> fantasai: They're probably not asking for baseline alignment in these cases, so probably fine?
<TabAtkins> iank_: Yup, just a subtle side effect, I'm fine with it
<TabAtkins> I'm fine with this.
<TabAtkins> RESOLVED: flex baselines take flex ordering into account so first/last use roughly *physical* directions

fantasai commented 2 years ago

Cross-linked to startmost/endmost to the concepts in Writing Modes. @bfgeek let us know if you think the text needs additional clarification.

w3c / csswg-drafts

[css-flexbox-1] Flex container baselines with reverse direction. #7776