Intent to Ship: Last Laseline Item Alignment

339 views
Skip to first unread message

Ian Kilpatrick

unread,
Oct 7, 2022, 3:15:05 PM10/7/22
to blink-dev

Contact emails

ikilp...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-align-3/#baseline-rules

Summary

This feature allows developers to align items within either flex or grid layout by their last baseline, instead of their first. This is done via the following properties: align-items: last baseline; /* flex/grid container */ justify-items: last baseline; /* grid container */ align-self: last baseline; /* flex/grid item */ justify-self: last baseline; /* grid item */



Blink component

Blink>Layout

TAG review

None - I don't believe CSS Align 3 ever went through Tag Review. However I'm happy to file one and cc/ the specification editors.

TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: Shipped/Shipping (note - relatively basic support)

WebKit: Shipped/Shipping "It's complicated". WebKit currently parses "align-items: last baseline" however doesn't support it currently in layout (for Stable versions of the browser). https://caniuse.com/?search=last%20baseline This is currently changing however with recent commits by WebKit implementing the "last baseline" behaviour. E.g. https://bugs.webkit.org/show_bug.cgi?id=245792

Web developers: No signals

Other signals:

Activation

This feature will likely be difficult to use initially for web developers for a few reasons. Support and implementation status is patchy. While adding tests for this feature... https://wpt.fyi/results/css?label=master&label=experimental&aligned&view=subtest&q=flex-align-baseline%20or%20grid-align-baseline%20or%20grid-justify-baseline ...existing implementations typically only supported relatively simple cases well. This primarily was because various specifications which this feature interacts with didn't specify what the last baseline of various boxes should be. Additionally "@supports(align-items: last baseline)" will return true for many versions of browsers that don't have any (or partial) layout support for this feature. Web developers may rely on UA versions and/or javascript to check actual support.



WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?



Debuggability

Basic CSS property debugging in DevTools.



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css?label=master&label=experimental&aligned&view=subtest&q=flex-align-baseline%20or%20grid-align-baseline%20or%20grid-justify-baseline

Flag name

--enable-experimental-web-platform-features or --enable-blink-features=CSSLastBaseline

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=885175

Estimated milestones

108 or 109


Anticipated spec changes

We filed multiple issues related to this feature - primarily for all the different types of layout algorithms how to determine their last baseline was underspecified.

Scroll container - https://github.com/w3c/csswg-drafts/issues/7660

Flexbox - https://github.com/w3c/csswg-drafts/issues/7641

Multicol - https://github.com/w3c/csswg-drafts/issues/7639

Tables - https://github.com/w3c/csswg-drafts/issues/7655

Fieldset - https://github.com/w3c/csswg-drafts/issues/7656

(and more).

All of these issues have been resolved, and added tests.


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5093352798683136

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJL3UpT5eVmfB6e-adc8exG1ouse25C_0A_2tn3fEVTwh-SetQ%40mail.gmail.com


TAMURA, Kent

unread,
Oct 10, 2022, 7:37:52 PM10/10/22
to Ian Kilpatrick, blink-dev
LGTM1.
Two other browsers already shipped this. No doubt to proceed this.

--
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+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJL3UpRb9dPstEirAv6pqspLgyab9%2B6bonCEzMrDNumkVH7S0g%40mail.gmail.com.


--
TAMURA Kent
Software Engineer, Google


Yoav Weiss

unread,
Oct 10, 2022, 11:02:10 PM10/10/22
to TAMURA, Kent, Ian Kilpatrick, blink-dev
This is not great.. Any ways in which we can improve the story? e.g. can we push for better WPT coverage? Have this feature be a part of Interop 23? Rename the feature into something that can be reliably detected? Something else? 

Ian Kilpatrick

unread,
Oct 11, 2022, 12:12:00 AM10/11/22
to Yoav Weiss, TAMURA, Kent, blink-dev
We'll likely be able to incorporate these tests into interop 2023 for both grid & flexbox which will hopefully improve interop. Renaming the feature isn't a great option (IMO) as it describes what it does well, and Firefox has already shipped support.

Ian
 

Mike Taylor

unread,
Oct 11, 2022, 10:22:50 AM10/11/22
to Ian Kilpatrick, Yoav Weiss, TAMURA, Kent, blink-dev

Quick question on the levels of support. You mention that Firefox has basic support. And WebKit landed some support in https://github.com/WebKit/WebKit/pull/4799. Do you have a sense of how Safari's implementation (maybe testable in nightly builds) compares to Firefox and your implementation?

Ian Kilpatrick

unread,
Oct 11, 2022, 1:30:36 PM10/11/22
to Mike Taylor, Yoav Weiss, TAMURA, Kent, blink-dev
The parts which begin connecting the above patch into flex/grid haven't reached a Safari TP which we can test yet. I expect initially it'll be similar to Firefox's level of support (handle basic cases well but complex interactions less well).

Ian 

Philip Jägenstedt

unread,
Oct 12, 2022, 12:02:49 PM10/12/22
to Ian Kilpatrick, Mike Taylor, Yoav Weiss, TAMURA, Kent, blink-dev
The problem with feature detection here happens once in a while, and flex gap is a prominent previous example. But when it's already happened, there's really not much we can do to fix the situation. So I'm very much inclined to LGTM this.

But I see some tests are failing, are those failures accounted for, with bugs filed? If this is an area with messy interop, it might pay off to cross every t and dot every i here.

Ian Kilpatrick

unread,
Oct 12, 2022, 12:04:23 PM10/12/22
to Philip Jägenstedt, Mike Taylor, Yoav Weiss, TAMURA, Kent, blink-dev
The tests failing are due to the skew between a WPT sync, and WPT running against an "older" version of chrome.

These tests pass in Chrome Canary.

Ian

Mike Taylor

unread,
Oct 12, 2022, 2:02:23 PM10/12/22
to Ian Kilpatrick, Philip Jägenstedt, Yoav Weiss, TAMURA, Kent, blink-dev
Thanks - LGTM1.

Chris Harrelson

unread,
Oct 12, 2022, 2:03:42 PM10/12/22
to Mike Taylor, Ian Kilpatrick, Philip Jägenstedt, Yoav Weiss, TAMURA, Kent, blink-dev

Mike Taylor

unread,
Oct 12, 2022, 2:31:26 PM10/12/22
to Ian Kilpatrick, Philip Jägenstedt, Yoav Weiss, TAMURA, Kent, blink-dev, Chris Harrelson
(I can't count... tkent already gave LGTM1 - but you have 3 now)
Reply all
Reply to author
Forward
0 new messages