Bug 227282 – CSS text-decoration: underline for HTML details and summary does not work

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

[Russ]

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;
}

[Russ]

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

[Radar WebKit Bug Importer]

<rdar://problem/79955601>

[Ahmad Saleem]

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

[Vadim Makeev]

Created attachment 465083 [details]
Comparison: Chrome, Firefox, Safari

[Vadim Makeev]

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>

[Ahmad Saleem]

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. :-)

[Ahmad Saleem]

(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.

[EWS]

Committed 264901@main (03b985167455): <https://commits.webkit.org/264901@main>

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

[Alexey Proskuryakov]

EWS was wrong, and the fix didn't work - see bug 257832.

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