Bug 157323

Summary:

Implement <details>/<summary> disclosure triangle as a list item

Product:

WebKit

Reporter:

L. David Baron <dbaron>

Component:

Layout and Rendering

Assignee:

Tim Nguyen (:ntim) <ntim>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ahmad.saleem792, bharris9, bogdan.brinza, bugzilla, collimarco91, hi, karlcow, kizmarh, mail, me, nileshprajapati, qznebula, richardwa, rik, robertwbradford, rolandsteiner, sime.vidas, simon.fraser, sjhobson, syserplus, vertigoback, webkit-bug-importer, webkit, webkit.org

Priority:

Keywords:

BrowserCompat, FromImplementor, InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=218897
https://bugs.webkit.org/show_bug.cgi?id=245156

Bug Depends on:

Bug Blocks:

252223

Attachments:

Description	Flags
WebPageTest screenshot with two disclosure symbols	none
Job board with two disclosure symbols	none
current rendering in 3 browsers	none

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>

Karl Dubost

Comment 7 2022-06-14 20:29:17 PDT

Some details: https://searchfox.org/wubkat/search?q=webkit-details-marker&path=&case=false&regexp=false https://caniuse.com/css-marker-pseudo https://www.w3.org/TR/css-pseudo-4/#marker-pseudo

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 12 2022-08-19 05:26:41 PDT

SeeAlso https://searchfox.org/wubkat/search?q=DetailsMarker&path=&case=false&regexp=false

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.