Bug 307455 – CSS Custom Highlight API incompatible on Flexbox nodes

• Component: Layout and Rendering
• Status: NEW

[Zach Leatherman]

Using the Custom Highlight API on a `display: flex` or `display: inline-flex` node doesn’t render the highlighted ranges.

e.g. `<div style="display: flex">I want to highlight some text in here</div>`

Reproduction: https://codepen.io/zachleat/pen/MYeZYEN fails in Safari 26.2 and Safari Technology Preview Release 236 (WebKit 21625.1.1.19.1). Works as expected in Firefox 147 and Chrome 144.

Just for completeness, a link to the Custom Highlight API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

[Zach Leatherman]

Current workaround is to add an additional child node: `<div style="display: flex"><div>I can reliably highlight text in here</div></div>`

[Anthony Ricaud]

Created attachment 478306 [details]
Testcase

I've adapted Zach's testcase by:
- Adding grid and table examples: to check if it was flex specific or a larger issue. It is a larger issue.
- Add variants of each with a "real" element: after adding the other cases, I had a hunch it might be related to flex/grid/table creating "anonymous elements" to lay things out. Those variants tend to confirm my hunch (although I'm sure "anonymous elements" ain't the correct term).
- Removing inline-flex: With the other examples I added, I felt it was an unnecessary variant to keep.

I haven't removed the flex reference from the title of the bug because I wasn't sure what to put instead.

[Karl Dubost]

Thanks, Zac and Anthony. Very useful test case.

[Radar WebKit Bug Importer]

<rdar://problem/170181823>

[Karl Dubost]

I have created a WPT test for it. 
https://github.com/WebKit/WebKit/pull/58456
That I will export to web-platform-test as soon as it has been reviewed.