Bug 170445

Summary: space-evenly misbehaves with flexbox
Product: WebKit Reporter: Florian Rivoal <florian>
Component: CSSAssignee: Javier Fernandez <jfernandez>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, hyatt, jfernandez, rego, simon.fraser, svillar, zalan
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.chromium.org/p/chromium/issues/detail?id=708121
Bug Depends on:    
Bug Blocks: 135460    
Attachments:
Description Flags
failing test case
none
Patch
none
Patch
none
Archive of layout-test-results from webkit-cq-01 for mac-elcapitan
none
Patch none

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]
Patch
Comment 2 Dave Hyatt 2017-05-03 10:58:13 PDT
Comment on attachment 308171 [details]
Patch

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

r=me

> 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]
Patch
Comment 4 WebKit Commit Bot 2017-05-09 12:25:59 PDT
Comment on attachment 309516 [details]
Patch

Rejecting attachment 309516 [details] from commit-queue.

New failing tests:
css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html
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]
Patch
Comment 7 WebKit Commit Bot 2017-05-09 13:48:23 PDT
Comment on attachment 309528 [details]
Patch

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.