Summary: | Implement <details>/<summary> disclosure triangle as a list item | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | L. David Baron <dbaron> | ||||||||
Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||||
Status: | NEW --- | ||||||||||
Severity: | Normal | CC: | bugzilla, collimarco91, karlcow, kizmarh, me, nileshprajapati, qznebula, richardwa, rik, robertwbradford, simon.fraser, syserplus, webkit-bug-importer, webkit, webkit.org | ||||||||
Priority: | P2 | 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
L. David Baron
2016-05-03 14:01:35 PDT
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 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. Is this something still being considered? I noticed https://chromestatus.com/feature/6730096436051968 Anecdotally, I'm seeing more and more websites with two disclosure symbols. Latest example: https://www.webpagetest.org/result/220614_BiDc20_CG9/ Created attachment 460241 [details]
WebPageTest screenshot with two disclosure symbols
Some details: https://searchfox.org/wubkat/search?q=webkit-details-marker&path=&case=false®exp=false https://caniuse.com/css-marker-pseudo https://www.w3.org/TR/css-pseudo-4/#marker-pseudo > 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.
Created attachment 461722 [details]
Job board with two disclosure symbols
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.
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; } ``` 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 }); } ``` *** Bug 227712 has been marked as a duplicate of this bug. *** *** Bug 239691 has been marked as a duplicate of this bug. *** *** Bug 267330 has been marked as a duplicate of this bug. *** 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 |