How to query for paint-order support on HTML elements with @supports?

Question

Using paint-order and text-stroke (or the prefixed -webkit-text-stroke), one can achieve also boldly stroked texts in Firefox and Safari.

Example:

h1 {
  -webkit-text-stroke: 5px red;
        paint-order: stroke fill;
}

<h1>Text With Outline</h1>

In Chrome, this does not work, as it supports paint-order only on SVG elements. Now, my question: how can I query for the paint-order support on ordinary HTML elements? I want to use text-shadow as a fallback, but using e.g.

@supports not ((paint-order: stroke fill) and (-webkit-text-stroke: 5px $color)) {
        text-shadow:
            0 0 0.1em $color,
            0 0 0.25em $color,
            0 0 0.5em $color;

}

does not work, as Chrome reports paint-order: stroke fill to be supported (because it is, but only on SVG). How do I have to adjust the rule to make this distinction and get the fallback working with CSS's @support?

Answer 1

After some research, it seems paint-order for html text doesnt work in Chrome. It does in all other major browsers. But I came with this solution, using transparent stroke and background clipped:

background: #B276FF;
-webkit-background-clip: text;
-webkit-text-stroke: 40px transparent;
color: black;

This works as expected in al browsers and you dont need to use text-shadow. In my case with big stroke, text-shadow didnt work properly