Bug 167111 - <summary> does not respect display: flex
Summary: <summary> does not respect display: flex
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 10
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, WPTImpact
Depends on:
Blocks: 252223
  Show dependency tree / graph
 
Reported: 2017-01-16 22:31 PST by Richard Wang
Modified: 2023-06-15 13:55 PDT (History)
10 users (show)

See Also:

Attachments
Screenshot of the issue (130.49 KB, image/png)
2017-01-16 22:31 PST, Richard Wang 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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.