RESOLVED FIXED 157323
Implement <details>/<summary> disclosure triangle as a list item 
https://bugs.webkit.org/show_bug.cgi?id=157323
Summary Implement <details>/<summary> disclosure triangle as a list item
L. David Baron
Reported 2016-05-03 14:01:35 PDT
Following https://github.com/whatwg/html/issues/722 , HTML now defines styling of the disclosure triangle of <summary> by making <summary> a list-item, and allowing it to be styled with list-style-* and (in the future, when it's supported) ::marker. WebKit currently supports ::-webkit-details-marker for styling the <summary>'s triangle, but does not make it a list-item or support the list-style-* properties. It should do so to match the update to the spec. Gecko is planning to ship support for <summary> doing it as described in the spec (see https://bugzilla.mozilla.org/show_bug.cgi?id=1226455). The Chromium bug on switching to the spec's behavior is https://bugs.chromium.org/p/chromium/issues/detail?id=590014 . See the test page at https://bug1226455.bmoattachments.org/attachment.cgi?id=8747989
Attachments
WebPageTest screenshot with two disclosure symbols (1.24 MB, image/png)
2022-06-14 15:26 PDT, Anthony Ricaud 		no flags
Details
Job board with two disclosure symbols (23.24 KB, image/png)
2022-08-18 14:18 PDT, Anthony Ricaud 		no flags
Details
current rendering in 3 browsers (102.50 KB, image/png)
2022-08-19 01:00 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Richard Wang
Comment 1 2017-01-16 22:11:09 PST
At the moment the current rendering as block is correct per the HTML 5.1 recommendation (dated 1 November 2016). See https://www.w3.org/TR/html51/rendering.html#non-replaced-elements-flow-content
L. David Baron
Comment 2 2017-01-16 22:52:52 PST
The more actively-maintained WHATWG spec has been updated: https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements to reflect the discussion cited in comment 0.
Robert Bradford
Comment 3 2021-04-20 09:53:51 PDT
Is this something still being considered? I noticed https://chromestatus.com/feature/6730096436051968
Anthony Ricaud
Comment 4 2022-06-14 15:24:37 PDT
Anecdotally, I'm seeing more and more websites with two disclosure symbols. Latest example: https://www.webpagetest.org/result/220614_BiDc20_CG9/
Anthony Ricaud
Comment 5 2022-06-14 15:26:24 PDT
Created attachment 460241 [details] WebPageTest screenshot with two disclosure symbols
Radar WebKit Bug Importer
Comment 6 2022-06-14 15:29:10 PDT
<rdar://problem/95148788>
Anthony Ricaud
Comment 8 2022-06-14 23:34:25 PDT
> Some details: Pun intended? :) To be explicit, the webcompat issue I'm seeing is because websites use either variations of those rules that WebKit does not understand: .something summary { list-item: none; } /* or */ .something summary { display: block; /* anything but list-item */ } I'm removing "(potentially with ::marker in the future)" from the title to reflect that.
Anthony Ricaud
Comment 9 2022-08-18 14:18:58 PDT
Created attachment 461722 [details] Job board with two disclosure symbols
Karl Dubost
Comment 10 2022-08-19 01:00:50 PDT
Created attachment 461730 [details] current rendering in 3 browsers Safari 16.0 Firefox Nightly 105.0a1 Google Chrome Canary 106.0.5248.0 Only Safari shows the double arrows.
Karl Dubost
Comment 11 2022-08-19 05:17:59 PDT
data:text/html,<!doctype html><html><details><summary style="display:inline-block">foo<summary></details> or data:text/html,<!doctype html><html><details><summary style="list-style:none">foo<summary></details> Basically anything which change the display in a way that will remove `display: list-item` * Arrow in Safari, * No arrow in Firefox and Chrome Chrome https://github.com/chromium/chromium/blob/f38d5c61ec138ba6ba45777007dbe69ab3c7326f/third_party/blink/renderer/core/html/resources/html.css#L1348-L1352 ``` details > summary:first-of-type { display: list-item; counter-increment: list-item 0; list-style: disclosure-closed inside; } ``` Firefox https://searchfox.org/mozilla-central/rev/4a10f85ebca1c22c803d0253a82fe39514ba0b53/layout/style/res/html.css#781-800 ``` /* details & summary */ details > summary:-moz-native-anonymous { /* TODO(krosylight): Remove this when fixing bug 1308080 */ user-select: none; } details > summary:is(:first-of-type, :-moz-native-anonymous) { display: list-item; counter-increment: list-item 0; list-style: disclosure-closed inside; } details[open] > summary:is(:first-of-type, :-moz-native-anonymous) { list-style-type: disclosure-open; } details > summary:first-of-type > *|* { /* Cancel "list-style-position: inside" inherited from summary. */ list-style-position: initial; } ``` Safari https://searchfox.org/wubkat/rev/340573c924b370891b7a0794ef39d4995d3670ee/Source/WebCore/css/html.css#1339-1352 ``` summary { display: block; } summary::-webkit-details-marker { display: inline-block; width: 0.66em; height: 0.66em; margin-right: 0.4em; } ```
Karl Dubost
Comment 13 2022-08-19 05:28:46 PDT
https://searchfox.org/wubkat/rev/340573c924b370891b7a0794ef39d4995d3670ee/Source/WebCore/html/HTMLSummaryElement.cpp#67-71 :) ``` RenderPtr<RenderElement> HTMLSummaryElement::createElementRenderer(RenderStyle&& style, const RenderTreePosition&) { // <summary> elements with display:list-item should not be rendered as list items because they'd end up with two markers before the text (one from summary element and the other as a list item). return RenderElement::createFor(*this, WTFMove(style), { RenderElement::ConstructBlockLevelRendererFor::ListItem, RenderElement::ConstructBlockLevelRendererFor::Inline, RenderElement::ConstructBlockLevelRendererFor::TableOrTablePart }); } ```
Karl Dubost
Comment 14 2022-09-09 09:47:04 PDT
*** Bug 227712 has been marked as a duplicate of this bug. ***
Karl Dubost
Comment 15 2023-02-14 23:49:00 PST
*** Bug 239691 has been marked as a duplicate of this bug. ***
Karl Dubost
Comment 16 2024-01-10 07:19:57 PST
*** Bug 267330 has been marked as a duplicate of this bug. ***
Matthias Zöchling
Comment 17 2024-02-13 13:48:05 PST
Being able to use ::marker instead of ::-webkit-details-marker would be a good first step. With this ticket, i.e. when implemented as a list item, things like list-style-position:outside become possible: https://codepen.io/cssence/pen/bGZQBox
Tim Nguyen (:ntim)
Comment 18 2024-10-07 09:31:16 PDT
Pull request: https://github.com/WebKit/WebKit/pull/34778
EWS
Comment 19 2024-11-20 13:29:37 PST
Committed 286869@main (cd2f382c7dc0): <https://commits.webkit.org/286869@main> Reviewed commits have been landed. Closing PR #34778 and removing active labels.
Tim Nguyen (:ntim)
Comment 20 2024-11-23 11:17:47 PST
*** Bug 61426 has been marked as a duplicate of this bug. ***
Tim Nguyen (:ntim)
Comment 21 2024-11-23 11:18:53 PST
*** Bug 61766 has been marked as a duplicate of this bug. ***
Tim Nguyen (:ntim)
Comment 22 2024-11-23 11:20:56 PST
*** Bug 166870 has been marked as a duplicate of this bug. ***
Tim Nguyen (:ntim)
Comment 23 2024-11-23 11:31:05 PST
*** Bug 264381 has been marked as a duplicate of this bug. ***
Tim Nguyen (:ntim)
Comment 24 2024-11-23 11:32:32 PST
*** Bug 277573 has been marked as a duplicate of this bug. ***
Tim Nguyen (:ntim)
Comment 25 2024-11-23 11:33:33 PST
*** Bug 249594 has been marked as a duplicate of this bug. ***
Tim Nguyen (:ntim)
Comment 26 2024-11-23 11:35:28 PST
*** Bug 257745 has been marked as a duplicate of this bug. ***
Ahmad Saleem
Comment 27 2024-11-23 18:26:40 PST
*** Bug 257832 has been marked as a duplicate of this bug. ***
Ahmad Saleem
Comment 28 2024-12-29 19:13:25 PST
*** Bug 257752 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.