Chromium

WebKit is implementing it as well:
https://bugs.webkit.org/show_bug.cgi?id=168601

The latest WebKit from https://webkit.org/build-archives/ now also supports "paint-order: stroke fill" for HTML text (as Firefox Nightly does). Try eg the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order .

P.S. Even the latest Safari!

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

[Monorail components: -Blink>CSS Blink>SVG]

Regarding "Components: -Blink>CSS Blink>SVG"

The title of this ticket is

"Support paint-order for HTML text" 😀

Supporting it for SVG is great but is a separate objective (and perhaps Chrome already supports it for SVG?)

Firefox Nightly supports paint-order for HTML text
https://twitter.com/TobiReif/status/966711161390497792
as does Safari.

I hope that Chrome will support paint-order for HTML text as well.

Spec ticket:
https://github.com/w3c/fxtf-drafts/issues/107

Firefox tickets:
https://bugzilla.mozilla.org/show_bug.cgi?id=1426146
https://bugzilla.mozilla.org/show_bug.cgi?id=1435684

Safari tickets:
https://bugs.webkit.org/show_bug.cgi?id=183077
https://bugs.webkit.org/show_bug.cgi?id=168601

Test page:
https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
-> the demo.

> ...perhaps Chrome already supports it for SVG?

Chrome/Blink has supported for a number of years now.

It seems Blink>Paint may be be a more appropriate component. (Only changes to paint code should be strictly required AFAIK.)

[Monorail components: -Blink>SVG Blink>Paint]

> Chrome/Blink has supported for a number of years now.

That's great 😀 I hope that Chrome will support paint-order for HTML text as well.

Is it planned to support paint-order for HTML text? That would be really nice 😀

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Sounds like we would want this, but it would need the whole intent process (not hard given other browsers support it). Not super high on our list of priorities.

It got implemented in WebKit and Firefox, I hope it will get implemented in Chromium as well :)

WebKit and Firefox support it, so as soon as Chrome implements it, web developers could use it :)

Without this feature, `text-stroke` make the text ugly, so this CSS is not useful.

Text stroke is matter when you render text above photo type image(eg. video subtitle), text stroke increase enough contrast between the text and the image.

This is important for web developers.

It is important for web design, see https://twitter.com/TobiReif/status/966711161390497792
and eg https://css-tricks.com/text-stroke-stuck-middle/ .

Please assign a higher priority to this.

This is implemented already in most browsers, I would love to see it on Chrome. This is very useful for readability and accessibility purposes, such as adding text on top of images or subtitles on top of videos.

If not going to support paint-order on text could the support queries correctly reflect the lack of support?

Example:
@supports (paint-order: stroke fill) and (-webkit-text-stroke: 1px black) {}

this support query passes on chrome and the styles are applied but they do nothing because paint order doesn't work

I too was looking for support for this CSS property so that we don't have to keep using text-shadow workarounds which don't look as good. It surprised me that Chrome was the browser lagging behind on support for this, even Safari supports it.
I hope Chrome follows all major browsers that have already implemented this so we can have better readability using only CSS.

[Empty comment from Monorail migration]

Attaching a testcase of this (htmlpaintorder.html).

It seems that this feature depends on -webkit-text-stroke which is used on ~1% of pages (https://chromestatus.com/metrics/css/timeline/popularity/323) and is supported in all browsers.

While the code in this area has changed since the WebKit fork, fixing this can likely follow https://bugs.webkit.org/attachment.cgi?id=302292&action=prettypatch.

Thanks! Great to see some progress.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src/+/283e9960734e5d077f8c9e091b24ec59cdac9488

commit 283e9960734e5d077f8c9e091b24ec59cdac9488
Author: Stephen Chenney <schenney@chromium.org>
Date: Mon Jul 11 20:35:34 2022

[WPT] Triage assorted WPT tests (and others)

Triage css/css-fill-stroke and css/mediaqueries tests.
Also scroll-animations.

Bug: 1343361,815111,1343366,1343368
Change-Id: I802f163a14abe7ad1197dc669fcb4e25f0bd5b61
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3753058
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Auto-Submit: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1022868}

[modify] https://crrev.com/283e9960734e5d077f8c9e091b24ec59cdac9488/third_party/blink/web_tests/TestExpectations

I hope that Chrome will support paint-order for HTML text as well.

When this get implemented? 2023 already for god's sake.

Would also love if this could get assigned a higher priority. `text-stroke` is borderline useless without this feature, and at this point Chromium is basically holding back most of the web from having better text styling.

Here's an extra test case for those who come across this and don't feel like downloading the html from the test case shared earlier: https://codepen.io/data-enabler/pen/ymRwzv

Stefan is going to take a look at this in Q1.

Awesome, thank you!

This issue was migrated from crbug.com/chromium/815111?no_tracker_redirect=1

[Monorail components added to Component Tags custom field.]

Yay, thanks!

Project: chromium/src
Branch: main

commit 7974459a377275ae15703895f575c6a22781d6b5
Author: Stefan Zager <szager@chromium.org>
Date:   Mon Feb 26 19:43:31 2024

    Remove 'tentative' from paint-order-001.html WPT
   
    This feature has shipped in Gecko, WebKit, and chromium.
   
    Bug: chromium:41372165
    Change-Id: I7d8facc1f24d9fd998167d856b0213cd39076670
    Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5323303
    Auto-Submit: Stefan Zager <szager@chromium.org>
    Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
    Commit-Queue: Stefan Zager <szager@chromium.org>
    Cr-Commit-Position: refs/heads/main@{#1265373}

M       third_party/blink/web_tests/external/wpt/css/css-fill-stroke/paint-order-001.html

https://chromium-review.googlesource.com/5323303