space-evenly misbehaves with flexbox
Reported by
friv...@gmail.com,
Apr 4 2017
|
|||||||
Issue descriptionUserAgent: 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.
,
Apr 6 2017
To cbiesinger for further triage.
,
Apr 7 2017
None of the "new" keywords from css-align are implemented for flexbox yet. see also bug 507690
,
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.
,
Apr 19 2017
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.
,
Apr 19 2017
I'll start working on this, if @cbiesinger don't oppose. I'd need some help for reviews, though.
,
Apr 19 2017
Happy to review a patch for this!
,
Apr 21 2017
,
May 5 2017
,
May 23 2017
,
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
,
May 24 2017
This issue should be FIXED now.
,
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
,
Dec 28
Happy to review a patch None of the "new" keywords from css-align are implemented for flexbox https://www.wdfshare.com/how-to-survive-2-full-crack.html |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by r...@igalia.com
, Apr 4 2017Components: -Blink>CSS Blink>Layout>Flexbox
Status: Untriaged (was: Unconfirmed)