Bug 227282

Summary: CSS text-decoration: underline for HTML details and summary does not work
Product: WebKit Reporter: Russ <russ>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, hi, kizmarh, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar, WPTImpact
Version: Safari 14   
Hardware: Mac (Intel)   
OS: macOS 11   
URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
See Also: https://bugs.webkit.org/show_bug.cgi?id=257752
https://bugs.webkit.org/show_bug.cgi?id=257832
Bug Depends on:    
Bug Blocks: 252223    
Attachments:
Description Flags
CSS text-decoration: underline for HTML details and summary does not work in Safari but does in others browsers like Firefox
none
Comparison: Chrome, Firefox, Safari
none
Use case: underline summary to suggest that element is clickable none

Description Russ 2021-06-23 01:23:40 PDT
Created attachment 432024 [details]
CSS text-decoration: underline for HTML details and summary does not work in Safari but does in others browsers like Firefox

CSS text-decoration: underline for HTML details and summary does not work in Safari (desktop, mobile and Tech Preview) but does in all the other browsers I have access to.

HTML
<details>
  <summary>Some Words...</summary>
  Some More Words...
</details>

CSS
details {
    text-decoration: underline;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;

}
summary {
    text-decoration: underline;
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}
Comment 1 Russ 2021-06-23 01:27:58 PDT
Goto https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

Add: text-decoration: underline to details or summary elements in Safari.
details {
    text-decoration: underline;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;

}
summary {
   text-decoration: underline;
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

No underline - works in other browsers
Comment 2 Radar WebKit Bug Importer 2021-06-30 01:24:16 PDT
<rdar://problem/79955601>
Comment 3 Ahmad Saleem 2022-08-04 15:22:13 PDT
I am able to reproduce this bug with simpler test case in Safari 15.6 and Safari Technical Preview 150 on macOS 12.5:

Link - https://jsfiddle.net/he9gb7us/

It works across all other browsers - Chrome Canary 106 and Firefox Nightly 105. It was fixed in Chrome in following commit:

Link - https://chromium.googlesource.com/chromium/src.git/+/2c40398185c628f0f858f1838c879f9b81c8d3e7
Comment 4 Vadim Makeev 2023-02-20 04:07:16 PST
Created attachment 465083 [details]
Comparison: Chrome, Firefox, Safari
Comment 5 Vadim Makeev 2023-02-20 04:11:04 PST
Created attachment 465084 [details]
Use case: underline summary to suggest that element is clickable

I have a design where expandable elements are underlined to suggest that they’re clickable. The only way to implement this is to wrap the text into a <span>

<summary>
  <span style="text-decoration: underline">
    Contents
  </span>
</summary>
Comment 6 Ahmad Saleem 2023-06-05 11:21:28 PDT
Fixed it locally by just adding following in return function here:

https://searchfox.org/wubkat/source/Source/WebCore/style/StyleAdjuster.cpp#167

&& parentNode->parentOrShadowHostElement()->isMediaElement();

_________

Happy to do PR unless if someone think above is wrong way to fix it. :-)
Comment 7 Ahmad Saleem 2023-06-06 06:19:31 PDT
(In reply to Ahmad Saleem from comment #6)
> Fixed it locally by just adding following in return function here:
> 
> https://searchfox.org/wubkat/source/Source/WebCore/style/StyleAdjuster.
> cpp#167
> 
> && parentNode->parentOrShadowHostElement()->isMediaElement();
> 
> _________
> 
> Happy to do PR unless if someone think above is wrong way to fix it. :-)

Draft PR - https://github.com/WebKit/WebKit/pull/14694

Let's see what EWS has to say.
Comment 8 EWS 2023-06-06 09:28:39 PDT
Committed 264901@main (03b985167455): <https://commits.webkit.org/264901@main>

Reviewed commits have been landed. Closing PR #14694 and removing active labels.
Comment 9 Alexey Proskuryakov 2023-06-12 22:23:40 PDT
EWS was wrong, and the fix didn't work - see bug 257832.

Do we want to keep the change anyway, or to revert it?