Bug 170445 - space-evenly misbehaves with flexbox
Summary: space-evenly misbehaves with flexbox
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Javier Fernandez
Depends on:
Blocks: 135460
  Show dependency treegraph
Reported: 2017-04-04 02:45 PDT by Florian Rivoal
Modified: 2017-05-24 13:30 PDT (History)
7 users (show)

See Also:

failing test case (1.08 KB, text/html)
2017-04-04 02:45 PDT, Florian Rivoal
no flags Details
Patch (28.71 KB, patch)
2017-04-25 17:24 PDT, Javier Fernandez
no flags Details | Formatted Diff | Diff
Patch (28.70 KB, patch)
2017-05-09 11:19 PDT, Javier Fernandez
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from webkit-cq-01 for mac-elcapitan (955.29 KB, application/zip)
2017-05-09 12:26 PDT, WebKit Commit Bot
no flags Details
Patch (28.70 KB, patch)
2017-05-09 13:00 PDT, Javier Fernandez
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Florian Rivoal 2017-04-04 02:45:44 PDT
Created attachment 306166 [details]
failing test case

"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.
Comment 1 Javier Fernandez 2017-04-25 17:24:18 PDT
Created attachment 308171 [details]
Comment 2 Dave Hyatt 2017-05-03 10:58:13 PDT
Comment on attachment 308171 [details]

View in context: https://bugs.webkit.org/attachment.cgi?id=308171&action=review


> LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html:47
> +<div data-offset-y="0">This text should be at the top of it's container</div>

Remove the apostrophe in it's. Shouldn't be there.
Comment 3 Javier Fernandez 2017-05-09 11:19:30 PDT
Created attachment 309516 [details]
Comment 4 WebKit Commit Bot 2017-05-09 12:25:59 PDT
Comment on attachment 309516 [details]

Rejecting attachment 309516 [details] from commit-queue.

New failing tests:
Full output: http://webkit-queues.webkit.org/results/3706929
Comment 5 WebKit Commit Bot 2017-05-09 12:26:01 PDT
Created attachment 309521 [details]
Archive of layout-test-results from webkit-cq-01 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the commit-queue.
Bot: webkit-cq-01  Port: mac-elcapitan  Platform: Mac OS X 10.11.6
Comment 6 Javier Fernandez 2017-05-09 13:00:13 PDT
Created attachment 309528 [details]
Comment 7 WebKit Commit Bot 2017-05-09 13:48:23 PDT
Comment on attachment 309528 [details]

Clearing flags on attachment: 309528

Committed r216536: <http://trac.webkit.org/changeset/216536>
Comment 8 WebKit Commit Bot 2017-05-09 13:48:25 PDT
All reviewed patches have been landed.  Closing bug.