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

Description Richard Wang 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>
Comment 1 Michał Gołębiowski-Owczarek 2017-10-31 03:06:01 PDT 
I confirm the issue. Note that Chrome respects `display: flex` on <summary>.
Comment 2 Lea Verou 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...
Comment 4 Ahmad Saleem 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?
Comment 6 Ahmad Saleem 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.