Bug 167111

Summary: <summary> does not respect display: flex
Product: WebKit Reporter: Richard Wang <richardwa>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, akeerthi, bfulgham, iam, lea, m.goleb+bugzilla, philip, rniwa, simon.fraser, zalan
Priority: P2 Keywords: BrowserCompat, WPTImpact
Version: Safari 10   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 252223    
Attachments:
Description Flags
Screenshot of the issue none

Richard Wang
Reported 2017-01-16 22:31:05 PST
Created attachment 299020 [details] Screenshot of the issue Applying display: flex; to a <summary> element doesn't render the children as flex items. Instead they appear to render as if the <summary> element was display: block, the current default at time of writing. HTML for reproduction: <!DOCTYPE html> <html> <head> <title>&lt;summary&gt; flex demo</title> <style> details { background: #eee; } summary { background: #dee; } h3 { background: #ede; } .foo { background: #eed; } </style> </head> <body> <h2>No flex styles</h2> <details> <summary> <h3>Hello</h3> <div class="foo">There</div> </summary> <div>Woah!</div> </details> <h2>&lt;summary&gt; as display: block;</h2> <details> <summary style="display: block;"> <h3>Hello</h3> <div class="foo">There</div> </summary> <div>Woah!</div> </details> <h2>&lt;summary&gt; as display: flex;</h2> <details> <summary style="display: flex;"> <h3 style="flex: 1 1 auto;">Hello</h3> <div class="foo" style="flex: 0 0 auto;">There</div> </summary> <div>Woah!</div> </details> <h2>&lt;div&gt; inside &lt;summary&gt; as display: flex;</h2> <details> <summary> <div style="display: flex;"> <h3 style="flex: 1 1 auto;">Hello</h3> <div class="foo" style="flex: 0 0 auto;">There</div> </div> </summary> <div>Woah!</div> </details> </body> </html>
Attachments
Screenshot of the issue (130.49 KB, image/png)
2017-01-16 22:31 PST, Richard Wang 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Michał Gołębiowski-Owczarek
Comment 1 2017-10-31 03:06:01 PDT
I confirm the issue. Note that Chrome respects `display: flex` on <summary>.
Lea Verou
Comment 2 2018-06-12 12:01:17 PDT
Another testcase: http://dabblet.com/gist/e4042d6b12973f1e4583bf32c4bc7e14 It doesn't look like display: flex is ignored, it certainly has an effect, just not the intended one...
Ahmad Saleem
Comment 4 2023-05-20 03:44:33 PDT
I tried similar to Blink: https://chromium.googlesource.com/chromium/src.git/+/b711bbea21e196179a525c1588004ca4f60d025d ______ 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). DisplayType display = style.display(); if (display == DisplayType::Flex || display == DisplayType::Grid || display == DisplayType::InlineFlex || display == DisplayType::InlineGrid) return RenderElement::createFor(*this, WTFMove(style)); return RenderElement::createFor(*this, WTFMove(style), { RenderElement::ConstructBlockLevelRendererFor::ListItem, RenderElement::ConstructBlockLevelRendererFor::Inline, RenderElement::ConstructBlockLevelRendererFor::TableOrTablePart }); } _____ Although above didn't work. It compiles but no progression. @Aditya, @Ryosuke - any tip or help?
Ahmad Saleem
Comment 6 2023-06-15 13:55:55 PDT
Still passing WPT with STP172. So marking as 'RESOLVED CONFIGURATION CHANGED', please reopen if it is still not fixed.
Note You need to log in before you can comment on or make changes to this bug.