Repository navigation
[css-pseudo] questions about text decorations on highlight pseudos #6022
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.
Activity
[-][css-pseudo] questions about text-decoration properties on highlight pseudos[/-][+][css-pseudo] questions about text decorations on highlight pseudos[/+]delan commentedon Feb 19, 2021
(heads up: i’m going on leave shortly, so i probably won’t reply until i’m back around 7 march)
fantasai commentedon Mar 16, 2021
Afaict, the drawing order is:
.foo -
cyan solid line-through (base text decoration color overridden by highlight 'color')
cyan text (base text color overridden by highlight 'color')
green background (background introduced by ::selection)
orange background (background introduced by ::target-text)
.bar -
blue wavy line-through (decoration introduced by .bar::selection)
red dotted line-through (decoration introduced by .bar::target-text)
yyy solid line-through (base text decoration color overridden by highlight 'color')
yyy text (base text color overridden by highlight 'color')
green background (background introduced by ::selection)
orange background (background introduced by ::target-text)
frivoal commentedon Mar 16, 2021
So that's indeed 1=d and 2=d. The spec is probably not ambiguous about it, but not 100% obvious either. We should make some edits to make that clearer. Coming soon…
[css-pseudo-4] Clarify antecedents. #6022
fantasai commentedon Mar 16, 2021
@delan OK, checked in edits to clarify. Let me know if it's acceptable yet. :)
delan commentedon Mar 16, 2021
Thanks @fantasai + @frivoal! Those edits are a good start, though I can see a few more opportunities for clarification.
We might want to somehow clarify that #highlight-text applies to all other decorations in the broader css-text-decor sense — including emphasis marks, but excluding shadows — in the normative text (in addition to the parenthetical in the note).
To prevent a misunderstanding like 1=a 2=a, we might also want to add an informative note like the following:
I used line-through in my original examples to simplify them, but that left me with two questions:
For example (topmost last):
delan commentedon Mar 31, 2021
Just following up on this (@frivoal + @fantasai), any updates? Once those two questions are answered, I can align highlight-painting-003.html with the spec.
fantasai commentedon Apr 2, 2021
Let me run this past the CSSWG. Proposed behavior is d), following z-index ordering defined in https://www.w3.org/TR/CSS2/zindex.html#each-box
4 remaining items
fantasai commentedon Apr 8, 2021
So for clarity, we resolved on the UA having the choice of:
[css-pseudo-4] Clarify painting order of highlight text decoration, a…
fantasai commentedon Dec 30, 2021
Edited in. @delan would you mind reviewing, and if it looks good to you, close out the issue? :)
delan commentedon Dec 30, 2021
delan commentedon Jan 5, 2022
@fantasai thanks again for the edits! I’ve proposed some minor tweaks in #6666, but otherwise I’m happy with the new text.