On Tue, Jun 10, 2025 at 4:16 AM Javier Fernandez <jfernan...@igalia.com> wrote:
> 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. > > > That'd be great. Thanks. The closest thing we have today is the code for "TableCellAlignmentBaseline" logic. We'll need to generalize this, and extend it to all layout modes, instead of just a "table baseline alignment context" with a block child. > > >> 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. > Yeah Firefox has only reliably implemented this feature for block children in a grid alignment context. > > > 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. > So I'd like to ensure we support all the different combinations here, we need to do this before shipping so that @supports works reliably for us. There are three components to this feature: (1) A parent layout mode telling a child that they a baseline alignment context (flex, grid, table). (2) A child layout respecting this baseline alignment request (all layout modes that support a align-content, e.g. block, grid, flex, table, fieldset, multicol, etc). (3) Fallback when a child isn't participating within a baseline alignment context. > > > 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 > > > This is just part (3) mentioned above, when a child isn't participating within a baseline alignment context it should fallback to end alignment - its not really true that we support baseline alignment for block containers, just the fallback alignment. > > 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. > > > We should aim higher before shipping :). I'd personally start with a flex baseline context, and *all* children types, then adding support for grid, and table. Some tests to look at are: https://wpt.fyi/results/css/css-flexbox/alignment (e.g. we test "align-self: baseline" and all children types to ensure the correct alignment). There are subtleties with each child layout mode selecting the right baseline to align to. > > 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. > > > Are you able to file this issue? I can help explain the (poor) state of the feature in all browsers. -- > 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/CAJL3UpTmXT_ykxxp0keicJ8%3DRy9S4jNU5piXZzfnsTte%2BH4C-g%40mail.gmail.com.
