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; }
- 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?
- 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.