New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 603928 link

Starred by 9 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Oct 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Compat



Sign in to add a comment

Flexbox does not apply correctly to summary element

Reported by oliverj...@gmail.com, Apr 15 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36

Example URL:
http://jsbin.com/dijeho/1/edit?html,css,js,output

Steps to reproduce the problem:
1. Add display: flex to a summary element (inside of a details element)

What is the expected behavior?
The elements should be laid out horizontally.

What went wrong?
They are laid out vertically and it is not possible to change this.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? N/A 

Chrome version: 49.0.2623.112  Channel: n/a
OS Version: OS X 10.11.3
Flash Version: Shockwave Flash 21.0 r0
 

Comment 1 by rsesek@chromium.org, Apr 15 2016

Components: Blink>Layout>Flexbox
Components: -Blink>Layout>Flexbox Blink>Layout
Labels: -OS-Mac OS-All
Status: Untriaged (was: Unconfirmed)
Hmm, indeed:
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLSummaryElement.cpp&q=htmlsummarye&sq=package:chromium&l=50
LayoutObject* HTMLSummaryElement::createLayoutObject(const ComputedStyle&)
{
    return new LayoutBlockFlow(this);

I wonder why it does that?

Comment 4 by e...@chromium.org, Apr 18 2016

Cc: cbiesin...@chromium.org
Status: Available (was: Untriaged)

Comment 5 by ramy...@samsung.com, May 10 2016

Is there any specific reason, for summary element to be considered as inline-block when declared display:inline ?

https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/LayoutTests/fast/html/details-inline.html

If it's ok to consider display:inline as inline, looks like we can use generic createObject.
Oh, good point. We likely have to keep that.

But we could always check style()->display() here and create flex if appropriate.

Comment 7 Deleted

Looks like we can't solve it with html.css because per that testcase, display: inline should become inline-block too.
Labels: Hotlist-Interop
Discussion here: https://mobile.twitter.com/LeaVerou/status/762258892743184386
Cc: glebl@chromium.org
 Issue 635284  has been merged into this issue.
It has not been pointed out so far, so I feel free to do it. This worked on Iceweasel 38.8.0 (Debian Jessie 8.2) and Firefox 48.0 (Kubuntu 14.04).

Of course Iceweasel is Firefox but I don't know which version it matches.
Project Member

Comment 13 by bugdroid1@chromium.org, Oct 5 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b711bbea21e196179a525c1588004ca4f60d025d

commit b711bbea21e196179a525c1588004ca4f60d025d
Author: xing.xu <xing.xu@intel.com>
Date: Tue Oct 04 23:53:58 2016

Support display:flex for 'summary'

BUG= 603928 
R=skobes@chromium.org, cbiesinger@chromium.org

Review-Url: https://codereview.chromium.org/2373963002
Cr-Commit-Position: refs/heads/master@{#423008}

[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-flex-expected.html
[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-flex.html
[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-grid-expected.html
[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-grid.html
[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-inline-flex-expected.html
[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-inline-flex.html
[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-inline-grid-expected.html
[add] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/LayoutTests/fast/html/summary-display-inline-grid.html
[modify] https://crrev.com/b711bbea21e196179a525c1588004ca4f60d025d/third_party/WebKit/Source/core/html/HTMLSummaryElement.cpp

Status: Fixed (was: Available)

Sign in to add a comment