[csswg-drafts] [css-highlights] Highlight cascade behavior for shadows is rather unfortunate. (#13376)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-highlights] Highlight cascade behavior for shadows is rather unfortunate. ==
Consider this test-case:

```html
<!DOCTYPE html>
<style>
#target {
  text-shadow: 10px 10px 10px;

  &::selection {
    color: green;
  }
}
</style>
<p id="target" style="font-size: 50px">What color is my shadow?</p>
<script>
  getSelection().selectAllChildren(target);
</script>
```

Gecko renders a green shadow because we don't implement the highlight cascade stuff. Chrome and WebKit renders a black shadow (reasonable, and what the spec calls for).

But now consider that I want to draw a green shadow for my selected text:

```html
<!DOCTYPE html>
<style>
#target {
  text-shadow: 10px 10px 10px;

  &::selection {
    text-shadow: 10px 10px 10px green;
    color: green;
  }
}
</style>
<p id="target" style="font-size: 50px">What color is my shadow?</p>
<script>
  getSelection().selectAllChildren(target);
</script>
```

Now WebKit and Gecko draw the green shadow (good, but not per spec). Chromium draws the green shadow _atop the black one_. This is what the spec says to do. IIUC the three behaviors are:

 * Chromium implements  the spec to the letter, but I think it causes unfortunate behavior.
 * Gecko inherits the text shadow from `#target` into `::selection`, and if the shadow exists it overrides the regular text's shadow.
 * WebKit draws the selection's shadow only if specified in the `::selection` style itself (but in that case it also skips the main text's decoration).

I think the Chromium behavior is rather unfortunate because there's no way to "undo" the regular shadow only for the selected text.

I was thinking we could draw a parallel with text-decoration maybe? But behavior there is all over the place:

```html
<!DOCTYPE html>
<style>
#target {
  text-shadow: 10px 10px 10px;
  text-decoration: underline;

  &::selection {
    text-shadow: 10px 10px 10px red;
    text-decoration: overline;
    color: green;
  }
}
</style>
<p id="target" style="font-size: 50px">What color is my shadow?</p>
<script>
  getSelection().selectAllChildren(target);
</script>
```

Blink draws both the `#target` and `::selection` decorations with the `::selection` color. Gecko draws both with the `#target` color. WebKit doesn't support text decoration in `::selection`.

I think for shadows the current behavior is rather bad, because they tend to have alpha so it just looks terrible and you can't work around it.

I _think_ the better behavior would be that if any highlight style had a `text-shadow` specified, then the regular text shadow wouldn't be drawn. (That'd match WebKit wrt shadows).

I think text-decorations would probably want to do the same for consistency with it? But not sure, I guess that'd remove the underline from a link when there's a `::grammar-error`, which is probably undesired.

cc @schenney-chromium 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13376 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 21 January 2026 15:52:47 UTC