Bug 282027

Summary: CSS Custom Highlight API doesn't handle text-underline-offset and text-decoration-thickness
Product: WebKit Reporter: Samuel <samuel.h.bradshaw>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: karlcow, koivisto, samuel.h.bradshaw, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 18   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=257992
https://bugs.webkit.org/show_bug.cgi?id=213554
Attachments:
Description Flags
Screenshot showing underlined text
none
rendering in safari, firefox, chrome none

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.