[Webkit-unassigned] [Bug 167111] New: <summary> does not respect display: flex

Mon Jan 16 22:31:05 PST 2017

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

            Bug ID: 167111
           Summary: <summary> does not respect display: flex
    Classification: Unclassified
           Product: WebKit
           Version: Safari 10
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: richardwa at google.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 299020
  --> https://bugs.webkit.org/attachment.cgi?id=299020&action=review
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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170117/83827169/attachment.html>