Bug 157323 - Implement <details>/<summary> disclosure triangle as a list item
Summary: Implement <details>/<summary> disclosure triangle as a list item
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, FromImplementor, InRadar
: 227712 239691 267330 (view as bug list)
Depends on:
Blocks: 252223
  Show dependency treegraph
Reported: 2016-05-03 14:01 PDT by L. David Baron
Modified: 2024-02-13 13:48 PST (History)
14 users (show)

See Also:

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

Note You need to log in before you can comment on or make changes to this bug.
Description L. David Baron 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
Comment 1 Richard Wang 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
Comment 2 L. David Baron 2017-01-16 22:52:52 PST
The more actively-maintained WHATWG spec has been updated:
to reflect the discussion cited in comment 0.
Comment 3 Robert Bradford 2021-04-20 09:53:51 PDT
Is this something still being considered? I noticed https://chromestatus.com/feature/6730096436051968
Comment 4 Anthony Ricaud 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/
Comment 5 Anthony Ricaud 2022-06-14 15:26:24 PDT
Created attachment 460241 [details]
WebPageTest screenshot with two disclosure symbols
Comment 6 Radar WebKit Bug Importer 2022-06-14 15:29:10 PDT
Comment 8 Anthony Ricaud 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.
Comment 9 Anthony Ricaud 2022-08-18 14:18:58 PDT
Created attachment 461722 [details]
Job board with two disclosure symbols
Comment 10 Karl Dubost 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.
Comment 11 Karl Dubost 2022-08-19 05:17:59 PDT
data:text/html,<!doctype html><html><details><summary style="display:inline-block">foo<summary></details>


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


details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: disclosure-closed inside;


/* 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;


summary {
    display: block;

summary::-webkit-details-marker {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    margin-right: 0.4em;
Comment 13 Karl Dubost 2022-08-19 05:28:46 PDT


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 });
Comment 14 Karl Dubost 2022-09-09 09:47:04 PDT
*** Bug 227712 has been marked as a duplicate of this bug. ***
Comment 15 Karl Dubost 2023-02-14 23:49:00 PST
*** Bug 239691 has been marked as a duplicate of this bug. ***
Comment 16 Karl Dubost 2024-01-10 07:19:57 PST
*** Bug 267330 has been marked as a duplicate of this bug. ***
Comment 17 Matthias Zöchling 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: