Intent to Ship: Nested pseudo elements styling

[Daniil Sakhapov]

Contact emails

sakh...@chromium.org

Explainer

Nested pseudo elements styling allows to style ::before::marker and ::after::marker pseudo elements and will be essential to style ::column::scroll-marker pseudo elements for the carousel project (https://github.com/flackr/carousel/tree/main/fragmentation).

Specification

https://www.w3.org/TR/css-pseudo-4/#marker-pseudo

Summary

Allows to style pseudo elements that are nested inside other pseudo elements. So far, support is defined for: ::before::marker ::after::marker With ::column::scroll-marker being supported in the future.

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1109)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/425)

Web developers: No signals

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

Yes

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

Yes

https://wpt.fyi/css/css-pseudo/marker-font-variant-numeric-normal.html ::column::scroll-marker tests are in wpt_internal for now

Flag name on about://flags

CSSNestedPseudoElements

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/373478544

Estimated milestones

DevTrial on desktop	131
DevTrial on Android	131

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5199947786616832?gate=5142809487867904

This intent message was generated by Chrome Platform Status.

[Daniel Clark]

Should a TAG review be requested for this? It could also include the planned work for ::column::scroll-marker.

 

-- Dan

 

From: Daniil Sakhapov <sakh...@chromium.org>
Sent: Wednesday, November 6, 2024 5:55 AM
To: blink-dev <blin...@chromium.org>
Subject: [EXTERNAL] [blink-dev] Intent to Ship: Nested pseudo elements styling

 

You don't often get email from sakh...@chromium.org. Learn why this is important

--
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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAH3Z929iEAnq5wwKSU0ppqE1-CxL%3DcGqLWifrXRTgXRRF9yNrQ%40mail.gmail.com.

[Mike Taylor]

IMHO, this change is simple enough that a TAG review doesn't seem worthwhile.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MW4PR00MB14533DE60B1B8A067174B08CC55C2%40MW4PR00MB1453.namprd00.prod.outlook.com.

[obr...@igalia.com]

While https://wpt.fyi/css/css-pseudo/marker-font-variant-numeric-normal.html uses nested ::marker, it's not the main point of the test.

In fact I was thinking of editing that test to allow it to pass on implementations that do not support nested ::marker, but never got to do it.

So I think you should add tests specifically for this.

Also, I don't recall whether the flag allowed nested pseudo-elements in getComputedStyle, but I tend to think it should.

See https://github.com/w3c/csswg-drafts/issues/4456, it may need a quick CSSWG resolution to align with what was resolved for web animations.

-- Oriol Brufau

El dia dimecres, 6 de novembre del 2024 a les 13:55:58 UTC, sakh...@chromium.org va escriure:

[Mike Taylor]

LGTM1 % requesting the debuggability bit in your chromestatus entry.

--

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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/29ec2779-4beb-4a5d-9d80-9e848376d85an%40chromium.org.

[Chris Harrelson]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6658c1a9-995e-412d-83bc-8a2f0c294229%40chromium.org.

[Daniil Sakhapov]

Re: TAG review - we'll have a general TAG review for Carousel project, I'll include nested pseudos there.

Re tests: I'll add nested markers styling WPT tests.

Re getComputedStyle: thanks for pointing it out, I'll follow the issue since you've marked it as Agenda+

Re debuggability: I need to work with DevTools team to properly support displaying nested markers here, so won't ship without it.

среда, 13 ноября 2024 г. в 17:45:32 UTC+1, Chris Harrelson:

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/29ec2779-4beb-4a5d-9d80-9e848376d85an%40chromium.org.

--
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+unsubscribe@chromium.org.

[Domenic Denicola]

Any updates on getting a proper web platform test for this feature?

[Daniil Sakhapov]

Added now in https://github.com/web-platform-tests/wpt/pull/49292

понедельник, 18 ноября 2024 г. в 08:38:56 UTC+1, Domenic Denicola:

[一丝]

Does `::details-content::before::marker` support? 

以上

一丝

Daniil Sakhapov <sakh...@chromium.org> 于2024年11月21日周四 18:31写道：

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/29ec2779-4beb-4a5d-9d80-9e848376d85an%40chromium.org.

--
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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6658c1a9-995e-412d-83bc-8a2f0c294229%40chromium.org.

--

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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/90ef19c8-d27a-4348-b9d1-a3e8a3b15dcfn%40chromium.org.

[obr...@igalia.com]

BTW, I remembered that I added a parsing test in the past: https://wpt.fyi/results/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html

[Domenic Denicola]

LGTM3

[obr...@igalia.com]

https://github.com/w3c/csswg-drafts/issues/4456 resolved to allow multiple pseudo-elements in getComputedStyle.

I think it would be good to ship that ideally in the same release as this, or at least not much later.