Hi Ian,
Thanks for the feedback and the offering of a call to discuss the
implementation approach.
On 9/6/25 20:03, Ian Kilpatrick wrote:
On Mon, Jun 9, 2025 at 10:16 AM Chromestatus
<ad...@cr-status.appspotmail.com> wrote:
Summary
This feature allows developers to align the content of the boxes
participating in row-like shared context by their last baseline,
instead of their first. This is done via the following property:
align-content last baseline; /* Table cells, Flex items or grid
items */
Horray! The feature is somewhat non-trivial to implement, if you could
share a document on how you are thinking of implementing - I'm also
happy to jump on a VC to discuss how to implement it - it's quite
complex/nuanced.
Yeah, I know it's a complex feature. I implemented the Baseline
Self-Alignment for grid a few years ago, but it was pre-LayoutNG, so
things have changed considerably since then. I still need to finish the
analysis of the current code and complete the design doc. I'll share it
as soon as I have a preliminary draft so that we can iterate from that.
Blink component
Blink>Layout
<https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ELayout%22>
Motivation
Both Firefox and Safari already implements this feature, as it's
shown in the wpt.fyi tests dashboard, hence this is an
interoperability issue. Additionally, Chrome already supports it
for block containers, but it's disabled at parsing time because of
the lack of implementation for grid and flex items.
> Both Firefox and Safari already implements this feature
This isn't true. The situation is relatively complex.
See this testcase:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13847
Yeah, I agree. This feature is clearly "partially implemented" in both
Safari and Firefox. However, based on what I could get from the current
WPT, it seems that last-baseline is reasonably well supported for grid
with block children, at least in Frefox.
The layout modes which should support this are "flex", "grid", "table".
Supporting the 3 display values is a long shot, and complex, as you
said. My idea was to start this implementation and progressively improve
the interoperability in the case of grid with block children, which is
the one with more support now. The alternative to improve
interoperability would be to unship the last-baseline feature in Firefox
and Safari, as you comment later, but I'm not sure at this moment how
feasible that approach would be. Worth rising the issue at the CSS WG,
as you suggests below as well.
Blink - supports parsing `align-content: baseline`. Doesn't support it
in any layout mode. We explicitly didn't ship parsing for
"align-content: last baseline" due to lack of layout support.
Agree
Safari - supports parsing both `align-content: baseline` /
`align-content: last baseline`. Doesn't support it in any layout mode.
(Added parsing support for "last baseline" in
https://webkit.org/blog/13591/webkit-features-in-safari-16-2/#:~:text=Features%20more%20often.-,Last%20Baseline,-CSS%20Alignment%20allows
but it didn't add layout support for the feature).
I think Safari has "some" support in layout for the case of
last-baseline with block children, as it's shown in the following WPTs
https://wpt.fyi/results/css/css-align/blocks/align-content-block-005.html?label=master&label=experimental&aligned&view=subtest&q=align-content-block%20or%20last-baseline%20or%20content-baseline%20or%20item-mixed-baseline
I think Chrome also passes these tests, just by enabling the
"last-baseline" keyword in the CSS parsing code. I believe this is
because of the recent implementation of Baseline alignment for block
containers.
https://chromium-review.googlesource.com/c/chromium/src/+/6625778
Gecko - supports parsing `align-content: baseline` / `align-content:
last baseline`. Only supports it for "display: grid" *and* with block
children, and *sometimes* correct for other children, but mostly broken.
I think we could aim at being at the level of support Firefox has
nowadays, hopefully encouraging them to fix those other children cases.
From that, we can then face the implementation of the support for flex
ad tables; I've got the impression that the latter case is the most
complex one.
It might be worth raising a CSSWG issue to try and get the other
browsers (and us) to unship parsing "align-content: baseline" until
the feature is supported across all layout modes.
Yeah, definitively worth to do it. The current view of the wpt.fyi
dashboard regarding the test cases using align-content: baseline and
align-content: last-baseline is not accurate at all; in many cases the
pass result doesn't reflect the feature being complete or correctly
implemented. If we manage to improve interoperability, even reducing the
pass rate of the other browsers, it'd be a good first step, IMHO.
--
javi
--
You received this message because you are subscribed to the Google Groups
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to blink-dev+unsubscr...@chromium.org.
To view this discussion visit
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/d5411d85-b302-458c-821d-7ab4e736cdec%40igalia.com.
