Intent to Ship: Last Laseline Item Alignment

[Ian Kilpatrick]

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]

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]

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? 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqFn76swgKd%3DguZJdXr656Ox5ZOG1SQwDB%2B877L9G08JRw%40mail.gmail.com.

[Ian Kilpatrick]

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

 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfVo7bM0GHGuvcwcCNuuAbE0%3DH6tipmcHzsqPybCXFtsKg%40mail.gmail.com.

[Mike Taylor]

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?

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJL3UpSeh7ut1KYx-uSMK7_uS2EkVPF8fa-Ku5ucMELx3JfR4Q%40mail.gmail.com.

[Ian Kilpatrick]

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 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6a3ebb96-40c9-615c-2c8e-8bf2e844de65%40chromium.org.

[Philip Jägenstedt]

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.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJL3UpTgOPZFJcB3DxU7B5Qe0soN%3Do5tV-TcQcntNm8bprc%2BoQ%40mail.gmail.com.

[Ian Kilpatrick]

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

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYctYhJLcFGyPD2uZ1D%3Ds7%2BHjXJe4BBLR43b68hwxiMjRA%40mail.gmail.com.

[Mike Taylor]

Thanks - LGTM1.

[Chris Harrelson]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a74589bf-80d2-7d80-4680-f47100c24b2d%40chromium.org.

[Mike Taylor]

(I can't count... tkent already gave LGTM1 - but you have 3 now)