Bug 290307 – CSS Custom Highlight fails for some document structures

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

For example:

```html
<div id=idDiv>Webkit<div>!</div></div>
<style>
  body { font-size: 80px; }
  ::highlight(my-highlight) {
    background-color: #ffa;
  }
</style>
<script>
  const range = new Range()
  range.setStart(idDiv.firstChild, 0)
  range.setEnd(idDiv.firstChild, 1)
  const highlight = new Highlight(range)
  CSS.highlights.set("my-highlight", highlight)
</script>
```

This script will highlight the first letter ‘W’. But it fails on webkit （checked on iOS 18.3.2).
But delete the `<div>!</div>` and it works again!

[Radar WebKit Bug Importer]

<rdar://problem/148245032>

[Oleksandr]

Thanks for the report! We're facing a similar issue in our app, too. The workaround we found was wrapping the text node in a `span`:
```html
<div id=idDiv><span>Webkit</span><div>!</div></div>

<style>
  body { font-size: 80px; }
  ::highlight(my-highlight) {
    background-color: #ffa;
  }
</style>

<script>
  const range = new Range();
  range.setStart(idDiv.firstElementChild.firstChild, 0);
  range.setEnd(idDiv.firstElementChild.firstChild, 1);
  const highlight = new Highlight(range);
  CSS.highlights.set("my-highlight", highlight);
</script>
```

Sandbox - https://developer.mozilla.org/en-US/play?id=qdi5DuY0K0d8V2ZaDTowgUEPF1MQBtZmh2X4bQoVP%2F7q%2FydeZZ5yHDUuHbI3rFFBr5fmwgDlC0cc74kH

[Karl Dubost]

*** Bug 320445 has been marked as a duplicate of this bug. ***

[Vitor Roriz]

Pull request: https://github.com/WebKit/WebKit/pull/76783

[Vitor Roriz]

Pull request: https://github.com/WebKit/WebKit/pull/76332

[EWS]

Committed 323588@main (ab4c4fa09297): <https://commits.webkit.org/323588@main>

Reviewed commits have been landed. Closing PR #76332 and removing active labels.

[Vitor Roriz]

Submitted web-platform-tests pull request: https://github.com/vitorroriz/wpt/pull/1

[Tim Nguyen (:ntim)]

https://github.com/web-platform-tests/wpt/pull/63948