Bug 249594 – HTML details marker does not update when CSS display: contents is applied

• Status: NEW
• Component: Layout and Rendering

[Šime Vidas]

Steps to reproduce:

1. Open https://jsbin.com/yaxizom/edit?html,css,output
2. Click “Details”

What happened:

The triangle marker ▶︎ does not change.

What should have happened:

The marker should have turned down (▼). It does in Chrome and Firefox.

[Šime Vidas]

I’ve checked how VoiceOver is affected. The collapsed state is announced, but the expanded state isn’t.

[Karl Dubost]

In the section https://drafts.csswg.org/css-display/#unbox

> Appendix B: Effects of display: contents on Unusual Elements
> Some elements aren’t rendered purely by CSS box concepts; 
> for example, replaced elements (such as img), many form 
> controls (such as input), and SVG elements.
> 
> This appendix defines how they interact with display: contents.
> 
> HTML Elements
>
> … cut for brevity …
> 
> button
> details
> fieldset
> These elements don’t have any special behavior; display: contents 
> simply removes their principal box, and their contents render as normal.
> 



https://searchfox.org/wubkat/rev/05f693e31a84e598a51d00bf3505f1e10049bbc5/Source/WebCore/html/HTMLSummaryElement.cpp

[Radar WebKit Bug Importer]

<rdar://problem/103539240>

[Karl Dubost]

I wonder if it's related to 
https://searchfox.org/wubkat/rev/05f693e31a84e598a51d00bf3505f1e10049bbc5/Source/WebCore/rendering/RenderDetailsMarker.cpp#143-155

[Darin Senneff]

Confirmed that this is still present in Safari 17.1 on MacOS.

Adding the CSS "display: contents;" on the 'details' element causes the disclosure triangle to remain pointing sideways in both open and expanded states.