Skip to content

[css-pseudo] questions about text decorations on highlight pseudos #6022

Closed

Description

Image for: Description

https://drafts.csswg.org/css-pseudo-4/#highlight-text

Given the following content, with both the ::selection and ::target-text highlights marked {between the braces}:

<span class="foo">before {foo</span>
<span class="bar">bar} after</span>
.foo, .bar { text-decoration: yellow solid line-through; }
::target-text /* :root or *, doesn’t matter */ { background-color: orange; }
::selection /* :root or *, doesn’t matter */ { background-color: green; }
.foo::selection { color: cyan; text-decoration-color: magenta; /* no text-decoration-line */ }
.bar::target-text { color: xxx; text-decoration: red dotted line-through; }
.bar::selection { color: yyy; text-decoration: blue wavy line-through; }
  1. What should be painted at “foo” and in what order (topmost last)?
    • a) yellow solid, orange, green, cyan “foo”
    • b) orange, green, cyan “foo”
    • c) orange, green, cyan “foo”, yellow solid
    • d) orange, green, cyan “foo”, cyan solid
    • e) orange, green, cyan “foo”, magenta solid
    • f) something else?
  2. What should be painted at “bar” and in what order (topmost last)?
    • a) yellow solid, orange, red dotted, green, yyy “bar”, blue wavy
    • b) orange, red dotted, green, yyy “bar”, blue wavy
    • c) orange, green, yyy “bar”, yellow solid, red dotted, blue wavy
    • d) orange, green, yyy “bar”, yyy solid, red dotted, blue wavy
    • e) orange, green, yyy “bar”, yyy solid, yyy dotted, blue wavy
    • f) something else?

See also: resolution and edits, and my two follow-up questions, and their resolution.

I thought the answer was 1=b 2=b at first, so that’s how I wrote the ref for css/css-pseudo/highlight-painting-003.html (permalink), but after reading the spec and more closely, I’m starting to think it’s 1=d 2=d?

I’ve included 1=e above because I stumbled upon this Chromium patch (bug 1110393) today, which changes the color of originating element decorations to the ::selection’s text-decoration-color where that highlight is active. I suppose that change was a mistake or from before the current spec, because it sounds like it’s compliant when (and only when) text-decoration-color is currentColor?

Either way, I feel like we can improve the clarity of this section, given that I’m so unsure of the expected behaviour for scenarios like these. For example, there are several instances of “its” and “their” that could be more explicit, and some non-normative examples would be nice.

(cc @frivoal + @mrego)

Metadata

Image for: Metadata

Metadata

Image for: Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

Image for: Issue actions