NEW 282027
CSS Custom Highlight API doesn't handle text-underline-offset and text-decoration-thickness 
https://bugs.webkit.org/show_bug.cgi?id=282027
Summary CSS Custom Highlight API doesn't handle text-underline-offset and text-decora...
Samuel
Reported 2024-10-23 20:22:01 PDT
Created attachment 473029 [details] Screenshot showing underlined text WebKit supports the `text-underline-offset` and `text-decoration-thickness` properties in general – for example, when applied to a <span>. However, these properties don't work when styling a ::highlight() pseudo-element. According to the working draft CSS Pseudo-Elements Module Level 4, text-decoration **and its associated properties** should be supported on ::highlight(): https://www.w3.org/TR/css-pseudo-4/#highlight-styling This StackOverflow question has a code snippet that demonstrates the issue: https://stackoverflow.com/q/79060854/1349044 I have tested this on Safari 18 and Safari Technology Preview 205 (WebKit 20621.1.2.111.4) on macOS, Safari 17 on iOS 17, and Safari 18 on iOS 18. The issue is present in all versions. I attempted to run the Webkit nightly build to verify the issue there as well, but wasn't able to run it, due to remote management restrictions on my work-provided Mac. I have also tested in Chrome on macOS and on Android. Chrome does not have the issue.
Attachments
Screenshot showing underlined text (49.11 KB, image/png)
2024-10-23 20:22 PDT, Samuel 		no flags
Details
rendering in safari, firefox, chrome (1.38 MB, image/png)
2024-11-07 23:24 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-10-30 20:22:13 PDT
<rdar://problem/138968873>
Karl Dubost
Comment 2 2024-11-07 23:24:26 PST
Created attachment 473184 [details] rendering in safari, firefox, chrome I have 3 different renderings for "which is easy to highlight in an underline style": Safari: thin green underlining Firefox: nothing Chrome: thick green underlining
Karl Dubost
Comment 3 2024-11-07 23:25:00 PST
Safari Technology Preview 206 20621.1.3.21.1 Firefox Nightly 134.0a1 13424.11.7 Google Chrome Canary 132.0.6825.0 6825.0
Samuel
Comment 4 2024-11-08 12:24:33 PST
Thanks – yes, the current released version of Firefox doesn't support the Highlight API at all, so even a regular underline doesn't work there. https://caniuse.com/mdn-api_highlight
Karl Dubost
Comment 5 2024-11-10 22:14:15 PST
Per current spec: https://drafts.csswg.org/css-pseudo-4/#highlight-styling =================== The following properties apply to the highlight pseudo-elements: color background-color text-decoration and its associated properties (including text-underline-position and text-underline-offset) text-shadow stroke-color, fill-color, and stroke-width * ISSUE 2: Are there any other properties that should be included here? * NOTE: Historically (and at the time of writing) only color and background-color have been interoperably supported. * NOTE: The color property sets the color of both the text and all line decorations (underline, overline, line-through) and emphasis marks (text-emphasis) applied to the text by the originating element and its ancestors and descendants. =================== Also https://wpt.fyi/results/css/css-pseudo?label=master&label=experimental&aligned&q=highlight%20safari%3Afail
Karl Dubost
Comment 6 2024-11-10 22:25:35 PST
Note also a similar issue on Bug 257992 and Bug 213554
Note You need to log in before you can comment on or make changes to this bug.