New issue
Advanced search Search tips
Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: May 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocking:
issue 722287



Sign in to add a comment

space-evenly misbehaves with flexbox

Reported by friv...@gmail.com, Apr 4 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:52.0) Gecko/20100101 Firefox/52.0

Steps to reproduce the problem:
1. Open the attached test case

What is the expected behavior?
You should see a green box.

What went wrong?
You see a red box instead.

Did this work before? No 

Does this work in other browsers? No
 This works in Firefox, but fails in Chrome and Safari https://bugs.webkit.org/show_bug.cgi?id=170445

Chrome version: 59  Channel: n/a
OS Version: OS X 10.11
Flash Version: Shockwave Flash 25.0 r0

"justify-content: space-evenly" is implemented for grid layout, but not for flexbox, where instead it behaves as flex-start.

However, since it parses correctly, it is not possible to use the cascade (or @supports) fallback on some other value, making something like this unusable:

.foo {
  display: flex;
  justify-content: space-around; /* fallback if the next line is not supported */
  justify-content: space-evenly;
}

Ideally, space-evenly should be implemented in full for flexbox as well (mozilla already has it), but if that's too consuming for a quick fix, as a stop gap measure, using its default fallback alignment (center) would be much better than flex-start. Using space-around would probably be OK as well, as these two values are somewhat close.

I've attached a test-case (also submitted to wpt https://github.com/w3c/web-platform-tests/pull/5336) that currently fails, and would pass if either a full implementation was done, or if a fallback to either center or space-around was implemented instead.
 
space-evenly-001.html
1.1 KB View Download

Comment 1 by r...@igalia.com, Apr 4 2017

Cc: cbiesin...@chromium.org svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Components: -Blink>CSS Blink>Layout>Flexbox
Status: Untriaged (was: Unconfirmed)

Comment 2 by e...@chromium.org, Apr 6 2017

Labels: -Type-Bug -Pri-2 Pri-3 Type-Compat
Owner: cbiesin...@chromium.org
Status: Assigned (was: Untriaged)
To cbiesinger for further triage.
Labels: -OS-Mac OS-All
None of the "new" keywords from css-align are implemented for flexbox yet.

see also  bug 507690 

Comment 4 by r...@igalia.com, Apr 10 2017

Note that there was an old patch from @jfernandez adding some support that was finally abandoned: https://codereview.chromium.org/1268753002/
Probably it'd be a good moment to bring it back to life.

Comment 5 by e...@chromium.org, Apr 19 2017

Cc: e...@chromium.org
Labels: -Type-Compat -Pri-3 Pri-2 Type-Bug
This came up again at the CSS WG meeting in Tokyo. We should make sure to add support for this in flexbox as we're shipping support for it in grid now.
Owner: jfernan...@igalia.com
Status: Started (was: Assigned)
I'll start working on this, if @cbiesinger don't oppose. I'd need some help for reviews, though.
Happy to review a patch for this!

Comment 8 Deleted

Blocking: 722287
Project Member

Comment 12 by bugdroid1@chromium.org, May 24 2017

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

commit 69568ed51b77ef4a94d96f99134e09223acf6223
Author: jfernandez <jfernandez@igalia.com>
Date: Wed May 24 10:04:53 2017

[css-flex] Implement the space-evenly content-distribution value

The CSS Box Alignment specification defines the <content-distribution>
set as some of the allowed values for the Content Distribution
properties, align-content and justify-content. The 'space-evenly' value
is not among the ones allowed for these properties according to the CSS
Flexible Box specification.

The CSS Flexbible box specification states that it must follow the CSS
Box Alignment specification, so this new value must be considered as
part of an upgraded level of the spec, which should be implemented
eventually.

Since we have already shipped an implementation of the new CSS Box
Alignment values for CSS Grid Layout, we need to implement it for
Flexbox as well.

This is the intent-to-implement-and-ship request approved for this
change:

https://groups.google.com/a/chromium.org/d/msg/blink-dev/_4wD-NXS6Ik/W51KNjTzAAAJ

BUG= 708121 

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

[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/css-properties-expected.txt
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/css-properties.html
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/flex-justify-content.html
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content.html
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.css
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/LayoutTests/css3/flexbox/true-centering.html
[modify] https://crrev.com/69568ed51b77ef4a94d96f99134e09223acf6223/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp

Status: Fixed (was: Started)
This issue should be FIXED now.
Project Member

Comment 14 by bugdroid1@chromium.org, May 24 2017

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

commit ff718d2ad190cf1f81256216c09d388b43f18319
Author: Christian Biesinger <cbiesinger@chromium.org>
Date: Wed May 24 22:39:39 2017

[css-flex] Mark some flexbox wpt tests as passing now

https://codereview.chromium.org/2832503003 (commit
69568ed51b77ef4a94d96f99134e09223acf6223) fixed some
of the imported tests; this marks them as passing.

R=jfernandez@igalia.com
BUG= 708121 

Change-Id: I076ab6b81e7c48886e664fb50175027708cfc919
Reviewed-on: https://chromium-review.googlesource.com/513450
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#474455}
[modify] https://crrev.com/ff718d2ad190cf1f81256216c09d388b43f18319/third_party/WebKit/LayoutTests/TestExpectations

Sign in to add a comment