2020577 - Changing `-webkit-text-stroke-color` on `::selection` has no effect

Status: NEW

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Ana Tudor]

Attachment: sel_stroke_collage.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Steps to reproduce:

Consider an element with some text.

<div>some text more text</div>

Give the text an orange stroke (I've also blown up its font-size to make everything more obvious):

div {
	-webkit-text-stroke: 8px darkorange;
	font: 900 clamp(2rem, 30vw, 25rem)/ 1.035cap sans-serif;
}

Set custom background-color and -webkit-text-stroke-color for the ::selection case - both these properties are allowed on ::selection.

div::selection {
	background: teal;
	-webkit-text-stroke-color: violet
}

Actual results:

In Firefox, the ::selection background is indeed teal now, but the stroke remains orange, it doesn't change to violet as expected. Tested in both stable and Nightly.

Expected results:

I would expect the ::selection to have a teal background and a violet stroke.

This is what happens in Safari. Chrome has an even bigger issue.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

I think this is invalid per spec? https://drafts.csswg.org/css-pseudo-4/#highlight-styling:

Vendor-prefixed properties such as -webkit-text-fill-color are not applicable to the highlight pseudo-elements.

Or am I missing something?

Comment 3

[Jan Jaeschke [:jjaschke]]

I think per spec and web-platform tests chrome’s behavior should be correct. Bug 2020693 aims to align Firefox to this behavior.