Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Issue 708121 space-evenly misbehaves with flexbox
Starred by 2 users Reported by friv...@gmail.com, Apr 4 Back to list
Status: Fixed
Owner:
Closed: May 24
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocking:
issue 722287



Sign in to add a comment
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
Cc: cbiesin...@chromium.org svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Components: -Blink>CSS Blink>Layout>Flexbox
Status: Untriaged
Labels: -Type-Bug -Pri-2 Pri-3 Type-Compat
Owner: cbiesin...@chromium.org
Status: Assigned
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 
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.
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
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
Comment 11 by jfernan...@igalia.com, May 23 (2 days ago)
Blocking: 722287
Project Member Comment 12 by bugdroid1@chromium.org, May 24 (2 days ago)
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

Comment 13 by jfernan...@igalia.com, May 24 (2 days ago)
Status: Fixed
This issue should be FIXED now.
Project Member Comment 14 by bugdroid1@chromium.org, Yesterday (38 hours ago)
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