[css-pseudo-4] Other properties that should be included in styling highlights

[tigt]

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

ISSUE 1 Are there any other properties that should be included here?

Thinking about making ::highlight() work in Contrast-Mode, it seems like the following should be included:

• outline and its sub-properties
• border-width, -color, -style, -radius, and the assorted border-image properties
• padding to support drawing outline/border-* properties further away
• box-decoration-break (and I would argue for it to default to clone)

There’s also prior art for this in Electron-based text editors, such as this in VS Code: microsoft/vscode#54074

[tabatkins]

We can't include any properties that affect layout, as they'd reveal precisely how the pseudo-element is nested/split relative to the real elements it crosses. Only the tree-abiding pseudos can take those. So border-* and padding-* are both out.

outline and box-decoration-break don't affect layout, but do still reveal where the pseudo is split, so they're out as well, unfortunately.

(That is, if you had markup like <span><em>foo b</em><strong>a</strong></span>r, and you highlighted "bar", how exactly does the element tree look? The ::highlight pseudo clearly has to be split into three pieces, to catch each letter separately. But does it nest inside or outside the strong element? Does the answer change if you highlight just "ar"? There are many questions like this, and working out the full set of answers is terrible drudgework, especially when you have several non-tree-abiding pseudo-elements potentially overlapping as well. And if you take the easy way out and say "it always nests as deeply as possible, with a particular specified ordering", then you get results that probably aren't what people would actually expect, like highlighting "foobar" in fo<em>ob</em>ar producing three elements rather than one.)

[tigt]

Ah, makes sense. I assumed it was an independent “overlay” element that was on its own topmost plane.

That said, is there a way to handle the High-Contrast use-case you can think of? Maybe I’m missing an obvious answer

[samuelbradshaw]

I think I understand the limitation around not affecting layout, but I'm not sure if I completely understand what it means for a style to "reveal where the pseudo-element is split."

Would border-radius (to round the corners of a highlight) be out?

[bmeck]

I'm working on a web extension and we want to be able to highlight some badges; is there a workaround that we could pursue if outline is not viable? Right now it doesn't seem possible to highlight <img> in a meaningful way