Intent to Ship: CSS paint-order for non-SVG text

1,340 views
Skip to first unread message

Stefan Zager

unread,
Feb 7, 2024, 8:48:31 PMFeb 7
to blink-dev

Contact emails

sza...@chromium.org

Explainer

https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

Specification

https://svgwg.org/svg2-draft/painting.html#PaintOrder

Summary

Adds support for the existing CSS property `paint-order`. This change only affects html (non-SVG) text; SVG text already supports paint-order via attribute or CSS property.



Blink component

Blink>Paint

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility

None



Gecko: Shipped in version 60 (2018)

WebKit: No signal

Web developers: Positive; 48 stars on tracking bug

Other signals:

WebView application risks

None



Debuggability

None



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

Flag name on chrome://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Estimated milestones

123



Anticipated spec changes

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5178467903864832

This intent message was generated by Chrome Platform Status.

Fredrik Söderquist

unread,
Feb 8, 2024, 4:15:03 AMFeb 8
to Stefan Zager, blink-dev
On Thu, Feb 8, 2024 at 2:48 AM Stefan Zager <sza...@chromium.org> wrote:

Contact emails

sza...@chromium.org

Explainer

https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

Specification

https://svgwg.org/svg2-draft/painting.html#PaintOrder

Summary

Adds support for the existing CSS property `paint-order`. This change only affects html (non-SVG) text; SVG text already supports paint-order via attribute or CSS property.



Blink component

Blink>Paint

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility

None



Gecko: Shipped in version 60 (2018)

WebKit: No signal

Also shipped in WebKit (since Safari 11 according to MDN; Safari TP 25 looking at changelog)


/fs

--
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/CAHOQ7J9i%3DwoeX%2Bh%2B1rwpidM%3D5SiMPnCq9fskupy2tDUjXcMAMw%40mail.gmail.com.

Daniel Bratell

unread,
Feb 8, 2024, 5:30:28 AMFeb 8
to Fredrik Söderquist, Stefan Zager, blink-dev

I didn't really get how it affects non-SVG text. The documentation and the examples are all for SVG. Is there HTML text that is also a mix of stroke, fill and marker blitting?

/Daniel

Fredrik Söderquist

unread,
Feb 8, 2024, 5:49:15 AMFeb 8
to Daniel Bratell, Stefan Zager, blink-dev
On Thu, Feb 8, 2024 at 11:30 AM Daniel Bratell <brat...@gmail.com> wrote:

I didn't really get how it affects non-SVG text. The documentation and the examples are all for SVG. Is there HTML text that is also a mix of stroke, fill and marker blitting?

Here's an example for non-SVG (HTML) text: https://jsfiddle.net/4mh71efb/

Getting a stroke on HTML text requires using the -webkit-text-stroke-* family of properties. Markers don't apply to text (same as for SVG text).


/fs

Manuel Rego Casasnovas

unread,
Feb 8, 2024, 7:00:53 AMFeb 8
to Fredrik Söderquist, Daniel Bratell, Stefan Zager, blink-dev
Why is the WPT test marked as tentative?
https://wpt.fyi/results/css/css-fill-stroke/paint-order-001.tentative.html

Not sure if there are more tests or is only that one, but it's failing
in Firefox. What are the interop issues? Are those reported somewhere?

Thanks,
Rego

On 08/02/2024 11:48, Fredrik Söderquist wrote:
> On Thu, Feb 8, 2024 at 11:30 AM Daniel Bratell <brat...@gmail.com
> <mailto:brat...@gmail.com>> wrote:
>
> __
>
> I didn't really get how it affects non-SVG text. The documentation
> and the examples are all for SVG. Is there HTML text that is also a
> mix of stroke, fill and marker blitting?
>
> Here's an example for non-SVG (HTML) text:
> https://jsfiddle.net/4mh71efb/ <https://jsfiddle.net/4mh71efb/>
>
> Getting a stroke on HTML text requires using the -webkit-text-stroke-*
> family of properties. Markers don't apply to text (same as for SVG text).
>
>
> /fs
>
> /Daniel
>
> On 2024-02-08 10:14, Fredrik Söderquist wrote:
>> On Thu, Feb 8, 2024 at 2:48 AM Stefan Zager <sza...@chromium.org
>> <mailto:sza...@chromium.org>> wrote:
>>
>>
>> Contact emails
>>
>> sza...@chromium.org <mailto:sza...@chromium.org>
>>
>>
>> Explainer
>>
>> https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
>> <https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order>
>>
>>
>> Specification
>>
>> https://svgwg.org/svg2-draft/painting.html#PaintOrder
>> <https://svgwg.org/svg2-draft/painting.html#PaintOrder>
>>
>>
>> Summary
>>
>> Adds support for the existing CSS property `paint-order`. This
>> change only affects html (non-SVG) text; SVG text already
>> supports paint-order via attribute or CSS property.
>>
>>
>>
>> Blink component
>>
>> Blink>Paint
>> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3EPaint>
>>
>>
>> TAG review
>>
>> None
>>
>>
>> TAG review status
>>
>> Not applicable
>>
>>
>> Risks
>>
>>
>>
>> Interoperability and Compatibility
>>
>> None
>>
>>
>>
>> /Gecko/: Shipped in version 60 (2018)
>>
>> /WebKit/: No signal
>>
>>
>> Also shipped in WebKit (since Safari 11 according to MDN; Safari
>> TP 25 looking at changelog)
>>
>>
>> /fs
>>
>>
>> /Web developers/: Positive; 48 stars on tracking bug
>>
>> /Other signals/:
>>
>>
>> WebView application risks
>>
>> None
>>
>>
>>
>> Debuggability
>>
>> None
>>
>>
>>
>> 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
>> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?
>>
>> Yes
>>
>>
>> Flag name on chrome://flags
>>
>> None
>>
>>
>> Finch feature name
>>
>> None
>>
>>
>> Non-finch justification
>>
>> None
>>
>>
>> Requires code in //chrome?
>>
>> False
>>
>>
>> Estimated milestones
>>
>> 123
>>
>>
>>
>> Anticipated spec changes
>>
>> None
>>
>>
>> Link to entry on the Chrome Platform Status
>>
>> https://chromestatus.com/feature/5178467903864832
>> <https://chromestatus.com/feature/5178467903864832>
>>
>> This intent message was generated by Chrome Platform Status
>> <https://chromestatus.com/>.
>> --
>> 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
>> <mailto:blink-dev+...@chromium.org>.
>> To view this discussion on the web visit
>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J9i%3DwoeX%2Bh%2B1rwpidM%3D5SiMPnCq9fskupy2tDUjXcMAMw%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J9i%3DwoeX%2Bh%2B1rwpidM%3D5SiMPnCq9fskupy2tDUjXcMAMw%40mail.gmail.com?utm_medium=email&utm_source=footer>.
>>
>> --
>> 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
>> <mailto:blink-dev+...@chromium.org>.
>> To view this discussion on the web visit
>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRsC%3DiYN%3D5iKfpYF99c62gqb_1nw4PnFQpawECXiQp7WQ%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRsC%3DiYN%3D5iKfpYF99c62gqb_1nw4PnFQpawECXiQp7WQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.
>
> --
> 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
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRVOYp268B4xTcY8N_Ft2mzZL8kt5dMADKoL1nu-iz7AA%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRVOYp268B4xTcY8N_Ft2mzZL8kt5dMADKoL1nu-iz7AA%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Stefan Zager

unread,
Feb 9, 2024, 3:01:00 AMFeb 9
to Manuel Rego Casasnovas, Fredrik Söderquist, Daniel Bratell, Stefan Zager, blink-dev
On Thu, Feb 8, 2024 at 4:00 AM Manuel Rego Casasnovas <re...@igalia.com> wrote:
Why is the WPT test marked as tentative?
https://wpt.fyi/results/css/css-fill-stroke/paint-order-001.tentative.html

Not sure if there are more tests or is only that one, but it's failing
in Firefox. What are the interop issues? Are those reported somewhere?

Looks like an implementation-specific line-breaking issue in the Firefox runs, but the text rendering appears consistent with webkit and chromium.

I'm unaware of any interop issues.

Manuel Rego Casasnovas

unread,
Feb 12, 2024, 6:03:04 AMFeb 12
to Stefan Zager, Fredrik Söderquist, Daniel Bratell, blink-dev
LGTM1.

Good to know it's a different issue in Firefox.

Now that all browsers will be supporting this, please could you make the
test non tentative?

JFYI, I've filled an issue so the MDN documentation gets updated to also
include the HTML case: https://github.com/mdn/content/issues/32236

Cheers,
Rego

On 09/02/2024 09:00, Stefan Zager wrote:
>
>
> On Thu, Feb 8, 2024 at 4:00 AM Manuel Rego Casasnovas <re...@igalia.com
> <mailto:re...@igalia.com>> wrote:
>
> Why is the WPT test marked as tentative?
> https://wpt.fyi/results/css/css-fill-stroke/paint-order-001.tentative.html <https://wpt.fyi/results/css/css-fill-stroke/paint-order-001.tentative.html>
>
> Not sure if there are more tests or is only that one, but it's failing
> in Firefox. What are the interop issues? Are those reported somewhere?
>
>
> Looks like an implementation-specific line-breaking issue in the Firefox
> runs, but the text rendering appears consistent with webkit and chromium.
>
> I'm unaware of any interop issues.
>
>
> Thanks,
>    Rego
>
> On 08/02/2024 11:48, Fredrik Söderquist wrote:
> > On Thu, Feb 8, 2024 at 11:30 AM Daniel Bratell
> <brat...@gmail.com <mailto:brat...@gmail.com>
> > <mailto:brat...@gmail.com <mailto:brat...@gmail.com>>> wrote:
> >
> >     __
> >
> >     I didn't really get how it affects non-SVG text. The
> documentation
> >     and the examples are all for SVG. Is there HTML text that is
> also a
> >     mix of stroke, fill and marker blitting?
> >
> > Here's an example for non-SVG (HTML) text:
> > https://jsfiddle.net/4mh71efb/ <https://jsfiddle.net/4mh71efb/>
> <https://jsfiddle.net/4mh71efb/ <https://jsfiddle.net/4mh71efb/>>
> >
> > Getting a stroke on HTML text requires using the
> -webkit-text-stroke-*
> > family of properties. Markers don't apply to text (same as for
> SVG text).
> >
> >
> > /fs
> >
> >     /Daniel
> >
> >     On 2024-02-08 10:14, Fredrik Söderquist wrote:
> >>     On Thu, Feb 8, 2024 at 2:48 AM Stefan Zager
> <sza...@chromium.org <mailto:sza...@chromium.org>
> >>     <mailto:sza...@chromium.org <mailto:sza...@chromium.org>>>
> wrote:
> >>
> >>
> >>                 Contact emails
> >>
> >> sza...@chromium.org <mailto:sza...@chromium.org>
> <mailto:sza...@chromium.org <mailto:sza...@chromium.org>>
> >>
> >>
> >>                 Explainer
> >>
> >> https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
> <https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order>
> >>
>  <https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
> <https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order>>
> >>
> >>
> >>                 Specification
> >>
> >> https://svgwg.org/svg2-draft/painting.html#PaintOrder
> <https://svgwg.org/svg2-draft/painting.html#PaintOrder>
> >>         <https://svgwg.org/svg2-draft/painting.html#PaintOrder
> <https://svgwg.org/svg2-draft/painting.html#PaintOrder>>
> >>
> >>
> >>                 Summary
> >>
> >>         Adds support for the existing CSS property
> `paint-order`. This
> >>         change only affects html (non-SVG) text; SVG text already
> >>         supports paint-order via attribute or CSS property.
> >>
> >>
> >>
> >>                 Blink component
> >>
> >>         Blink>Paint
> >>
>  <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3EPaint <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3EPaint>>
> >>
> >>
> >>                 TAG review
> >>
> >>         None
> >>
> >>
> >>                 TAG review status
> >>
> >>         Not applicable
> >>
> >>
> >>                 Risks
> >>
> >>
> >>
> >>                 Interoperability and Compatibility
> >>
> >>         None
> >>
> >>
> >>
> >>         /Gecko/: Shipped in version 60 (2018)
> >>
> >>         /WebKit/: No signal
> >>
> >>
> >>     Also shipped in WebKit (since Safari 11 according to MDN; Safari
> >>     TP 25 looking at changelog)
> >>
> >>
> >>     /fs
> >>
> >>
> >>         /Web developers/: Positive; 48 stars on tracking bug
> >>
> >>         /Other signals/:
> >>
> >>
> >>                 WebView application risks
> >>
> >>         None
> >>
> >>
> >>
> >>                 Debuggability
> >>
> >>         None
> >>
> >>
> >>
> >>                 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
> >>
>  <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>>?
> >>
> >>         Yes
> >>
> >>
> >>                 Flag name on chrome://flags
> >>
> >>         None
> >>
> >>
> >>                 Finch feature name
> >>
> >>         None
> >>
> >>
> >>                 Non-finch justification
> >>
> >>         None
> >>
> >>
> >>                 Requires code in //chrome?
> >>
> >>         False
> >>
> >>
> >>                 Estimated milestones
> >>
> >>         123
> >>
> >>
> >>
> >>                 Anticipated spec changes
> >>
> >>         None
> >>
> >>
> >>                 Link to entry on the Chrome Platform Status
> >>
> >> https://chromestatus.com/feature/5178467903864832
> <https://chromestatus.com/feature/5178467903864832>
> >>         <https://chromestatus.com/feature/5178467903864832
> <https://chromestatus.com/feature/5178467903864832>>
> >>
> >>         This intent message was generated by Chrome Platform Status
> >>         <https://chromestatus.com/ <https://chromestatus.com/>>.
> >>         --
> >>         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
> <mailto:blink-dev%2Bunsu...@chromium.org>
> >>         <mailto:blink-dev+...@chromium.org
> <mailto:blink-dev%2Bunsu...@chromium.org>>.
> >>         To view this discussion on the web visit
> >>
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J9i%3DwoeX%2Bh%2B1rwpidM%3D5SiMPnCq9fskupy2tDUjXcMAMw%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J9i%3DwoeX%2Bh%2B1rwpidM%3D5SiMPnCq9fskupy2tDUjXcMAMw%40mail.gmail.com> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J9i%3DwoeX%2Bh%2B1rwpidM%3D5SiMPnCq9fskupy2tDUjXcMAMw%40mail.gmail.com?utm_medium=email&utm_source=footer <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J9i%3DwoeX%2Bh%2B1rwpidM%3D5SiMPnCq9fskupy2tDUjXcMAMw%40mail.gmail.com?utm_medium=email&utm_source=footer>>.
> >>
> >>     --
> >>     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
> <mailto:blink-dev%2Bunsu...@chromium.org>
> >>     <mailto:blink-dev+...@chromium.org
> <mailto:blink-dev%2Bunsu...@chromium.org>>.
> >>     To view this discussion on the web visit
> >>
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRsC%3DiYN%3D5iKfpYF99c62gqb_1nw4PnFQpawECXiQp7WQ%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRsC%3DiYN%3D5iKfpYF99c62gqb_1nw4PnFQpawECXiQp7WQ%40mail.gmail.com> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRsC%3DiYN%3D5iKfpYF99c62gqb_1nw4PnFQpawECXiQp7WQ%40mail.gmail.com?utm_medium=email&utm_source=footer <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRsC%3DiYN%3D5iKfpYF99c62gqb_1nw4PnFQpawECXiQp7WQ%40mail.gmail.com?utm_medium=email&utm_source=footer>>.
> >
> > --
> > 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
> <mailto:blink-dev%2Bunsu...@chromium.org>
> > <mailto:blink-dev+...@chromium.org
> <mailto:blink-dev%2Bunsu...@chromium.org>>.
> > To view this discussion on the web visit
> >
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRVOYp268B4xTcY8N_Ft2mzZL8kt5dMADKoL1nu-iz7AA%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRVOYp268B4xTcY8N_Ft2mzZL8kt5dMADKoL1nu-iz7AA%40mail.gmail.com> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRVOYp268B4xTcY8N_Ft2mzZL8kt5dMADKoL1nu-iz7AA%40mail.gmail.com?utm_medium=email&utm_source=footer <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRVOYp268B4xTcY8N_Ft2mzZL8kt5dMADKoL1nu-iz7AA%40mail.gmail.com?utm_medium=email&utm_source=footer>>.
>
> --
> 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
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J_hJtjZof9-WSCJq2zmD3LkPpv5k5wnO8r2XFutqfzgTw%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHOQ7J_hJtjZof9-WSCJq2zmD3LkPpv5k5wnO8r2XFutqfzgTw%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Manuel Rego Casasnovas

unread,
Feb 12, 2024, 6:05:27 AMFeb 12
to Stefan Zager, Fredrik Söderquist, Daniel Bratell, blink-dev
Oops, before we can approve you have to fill the other review gates at
chromestatus, e.g.
https://chromestatus.com/feature/5178467903864832?gate=5166816630669312

Could you make sure you request the review for all the gates: Privacy,
Security, Enterprise, Debuggability and Testing?

Thanks!
Rego

Stefan Zager

unread,
Feb 12, 2024, 2:06:00 PMFeb 12
to Manuel Rego Casasnovas, Stefan Zager, Fredrik Söderquist, Daniel Bratell, blink-dev
Done (requested N/A).

Chris Harrelson

unread,
Feb 15, 2024, 6:15:27 PMFeb 15
to Stefan Zager, Manuel Rego Casasnovas, Fredrik Söderquist, Daniel Bratell, blink-dev
LGTM2, conditioned on also making the tests Rego mentioned non-tentative.

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/CAHOQ7J83x%3DaRij0Gh1Yof25rxypxE8QM1L3k%2BYykfVXdCweDHg%40mail.gmail.com.

Mike Taylor

unread,
Feb 15, 2024, 9:15:36 PMFeb 15
to Chris Harrelson, Stefan Zager, Manuel Rego Casasnovas, Fredrik Söderquist, Daniel Bratell, blink-dev

LGTM3, with the same conditions from Chris.

Stefan Zager

unread,
Feb 27, 2024, 2:11:05 PMFeb 27
to Mike Taylor, Chris Harrelson, Stefan Zager, Manuel Rego Casasnovas, Fredrik Söderquist, Daniel Bratell, blink-dev
I removed 'tentative' from the test name (PR).
Reply all
Reply to author
Forward
0 new messages