space-evenly misbehaves with flexbox
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 May 2017 20:48:20 +0000 (20:48 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 May 2017 20:48:20 +0000 (20:48 +0000)
https://bugs.webkit.org/show_bug.cgi?id=170445

Reviewed by David Hyatt.

Source/WebCore:

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.

No new tests, but several new test cases added.

* rendering/RenderFlexibleBox.cpp:
(WebCore::initialJustifyContentOffset):
(WebCore::justifyContentSpaceBetweenChildren):
(WebCore::initialAlignContentOffset):
(WebCore::alignContentSpaceBetweenChildren):

LayoutTests:

Added test cases for the 'space-evenly' value for align-content and justify-content.

* css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt:
* css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html:
* css3/flexbox/css-properties-expected.txt:
* css3/flexbox/css-properties.html:
* css3/flexbox/flex-justify-content-expected.txt:
* css3/flexbox/flex-justify-content.html:
* css3/flexbox/multiline-align-content-expected.txt:
* css3/flexbox/multiline-align-content-horizontal-column-expected.txt:
* css3/flexbox/multiline-align-content-horizontal-column.html:
* css3/flexbox/multiline-align-content.html:
* css3/flexbox/resources/flexbox.css:
(.align-content-space-around):
(.justify-content-space-around):
* css3/flexbox/true-centering-expected.txt:
* css3/flexbox/true-centering.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@216536 268f45cc-cd09-0410-ab3c-d52691b4dbfc

16 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt
LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html
LayoutTests/css3/flexbox/css-properties-expected.txt
LayoutTests/css3/flexbox/css-properties.html
LayoutTests/css3/flexbox/flex-justify-content-expected.txt
LayoutTests/css3/flexbox/flex-justify-content.html
LayoutTests/css3/flexbox/multiline-align-content-expected.txt
LayoutTests/css3/flexbox/multiline-align-content-horizontal-column-expected.txt
LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html
LayoutTests/css3/flexbox/multiline-align-content.html
LayoutTests/css3/flexbox/resources/flexbox.css
LayoutTests/css3/flexbox/true-centering-expected.txt
LayoutTests/css3/flexbox/true-centering.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp

index 950750a..bb0199a 100644 (file)
@@ -1,3 +1,28 @@
+2017-05-09  Javier Fernandez  <jfernandez@igalia.com>
+
+        space-evenly misbehaves with flexbox
+        https://bugs.webkit.org/show_bug.cgi?id=170445
+
+        Reviewed by David Hyatt.
+
+        Added test cases for the 'space-evenly' value for align-content and justify-content.
+
+        * css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt:
+        * css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html:
+        * css3/flexbox/css-properties-expected.txt:
+        * css3/flexbox/css-properties.html:
+        * css3/flexbox/flex-justify-content-expected.txt:
+        * css3/flexbox/flex-justify-content.html:
+        * css3/flexbox/multiline-align-content-expected.txt:
+        * css3/flexbox/multiline-align-content-horizontal-column-expected.txt:
+        * css3/flexbox/multiline-align-content-horizontal-column.html:
+        * css3/flexbox/multiline-align-content.html:
+        * css3/flexbox/resources/flexbox.css:
+        (.align-content-space-around):
+        (.justify-content-space-around):
+        * css3/flexbox/true-centering-expected.txt:
+        * css3/flexbox/true-centering.html:
+
 2017-05-09  Matt Lewis  <jlewis3@apple.com>
 
         Unreviewed, rolling out r216508.
index aa60fa0..c6a3006 100644 (file)
@@ -11,6 +11,7 @@ PASS .default, .verticalWriting 9
 PASS .default, .verticalWriting 10 
 PASS .default, .verticalWriting 11 
 PASS .default, .verticalWriting 12 
+PASS .default, .verticalWriting 13 
 Test for BUG=324178: Chrome incorrectly honors "align-content" in "flex-wrap: wrap" flex containers that only have a single line
 
 This text should be at the top of its container
@@ -19,6 +20,7 @@ This text should be at the top of its container
 This text should be at the top of its container
 This text should be at the top of its container
 This text should be at the top of its container
+This text should be at the top of its container
 This text should be at the left of its container
 This text should be at the left of its container
 This text should be at the left of its container
index e278337..43f30da 100644 (file)
@@ -43,6 +43,9 @@
 <div class="default" style="align-content: space-around">
 <div data-offset-y="0">This text should be at the top of its container</div>
 </div>
+<div class="default" style="align-content: space-evenly">
+<div data-offset-y="0">This text should be at the top of its container</div>
+</div>
 <div class="default" style="align-content: stretch">
 <div data-offset-y="0">This text should be at the top of its container</div>
 </div>
index 32a83c2..9880226 100644 (file)
@@ -26,6 +26,8 @@ PASS flexbox.style.justifyContent is "center"
 PASS window.getComputedStyle(flexbox, null).justifyContent is "center"
 PASS flexbox.style.justifyContent is "space-between"
 PASS window.getComputedStyle(flexbox, null).justifyContent is "space-between"
+PASS flexbox.style.justifyContent is "space-evenly"
+PASS window.getComputedStyle(flexbox, null).justifyContent is "space-evenly"
 PASS flexbox.style.justifyContent is ""
 PASS window.getComputedStyle(flexbox, null).justifyContent is "normal"
 PASS flexbox.style.alignSelf is ""
@@ -210,6 +212,8 @@ PASS flexbox.style.alignContent is "space-between"
 PASS window.getComputedStyle(flexbox, null).alignContent is "space-between"
 PASS flexbox.style.alignContent is "space-around"
 PASS window.getComputedStyle(flexbox, null).alignContent is "space-around"
+PASS flexbox.style.alignContent is "space-evenly"
+PASS window.getComputedStyle(flexbox, null).alignContent is "space-evenly"
 PASS flexbox.style.alignContent is "stretch"
 PASS window.getComputedStyle(flexbox, null).alignContent is "stretch"
 PASS flexbox.style.alignContent is ""
index 344129f..b95bb5a 100644 (file)
@@ -75,6 +75,10 @@ flexbox.style.justifyContent = 'space-between';
 shouldBeEqualToString('flexbox.style.justifyContent', 'space-between');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'space-between');
 
+flexbox.style.justifyContent = 'space-evenly';
+shouldBeEqualToString('flexbox.style.justifyContent', 'space-evenly');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'space-evenly');
+
 flexbox.style.justifyContent = '';
 shouldBeEqualToString('flexbox.style.justifyContent', '');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'normal');
@@ -301,6 +305,10 @@ flexbox.style.alignContent = 'space-around';
 shouldBeEqualToString('flexbox.style.alignContent', 'space-around');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-around');
 
+flexbox.style.alignContent = 'space-evenly';
+shouldBeEqualToString('flexbox.style.alignContent', 'space-evenly');
+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-evenly');
+
 flexbox.style.alignContent = 'stretch';
 shouldBeEqualToString('flexbox.style.alignContent', 'stretch');
 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'stretch');
index 2087e8f..34db1db 100644 (file)
@@ -14,4 +14,9 @@ PASS .flexbox 12
 PASS .flexbox 13 
 PASS .flexbox 14 
 PASS .flexbox 15 
+PASS .flexbox 16 
+PASS .flexbox 17 
+PASS .flexbox 18 
+PASS .flexbox 19 
+PASS .flexbox 20 
 
index 2704a0f..e2d2262 100644 (file)
@@ -96,6 +96,31 @@ body {
 <!-- Make sure we don't crash with no children. -->
 <div class="flexbox" style="justify-content: space-around"></div>
 
+<div class="flexbox" style="justify-content: space-evenly">
+  <div data-expected-width="100" data-offset-x="75" style="flex: 1 0 0; max-width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="425" style="width: 100px;"></div>
+</div>
+
+<div class="flexbox" style="justify-content: space-evenly">
+  <div data-expected-width="200" data-offset-x="0" style="flex: 1 100px;"></div>
+  <div data-expected-width="200" data-offset-x="200" style="flex: 1 100px;"></div>
+  <div data-expected-width="200" data-offset-x="400" style="flex: 1 100px;"></div>
+</div>
+
+<!-- If there's only one child, we justify-content: center. -->
+<div class="flexbox" style="justify-content: space-evenly">
+  <div data-expected-width="100" data-offset-x="250" style="flex: 1 0 0; max-width: 100px;"></div>
+</div>
+
+<!-- True centering on overflow. -->
+<div class="flexbox" style="justify-content: space-evenly">
+  <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></div>
+</div>
+
+<!-- Make sure we don't crash with no children. -->
+<div class="flexbox" style="justify-content: space-evenly"></div>
+
 <!-- margin:auto applies before justify-content. -->
 <div class="flexbox" style="justify-content: flex-end">
   <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
index 8a5a774..17cca22 100644 (file)
@@ -35,6 +35,14 @@ PASS .flexbox 33
 PASS .flexbox 34 
 PASS .flexbox 35 
 PASS .flexbox 36 
+PASS .flexbox 37 
+PASS .flexbox 38 
+PASS .flexbox 39 
+PASS .flexbox 40 
+PASS .flexbox 41 
+PASS .flexbox 42 
+PASS .flexbox 43 
+PASS .flexbox 44 
 Test to make sure that align-content works properly.
 
 
index fe0f123..3126819 100644 (file)
@@ -47,52 +47,68 @@ PASS .flexbox 45
 PASS .flexbox 46 
 PASS .flexbox 47 
 PASS .flexbox 48 
+PASS .flexbox 49 
+PASS .flexbox 50 
+PASS .flexbox 51 
+PASS .flexbox 52 
+PASS .flexbox 53 
+PASS .flexbox 54 
+PASS .flexbox 55 
+PASS .flexbox 56 
 horizontal-tb ltr column wrap align-content-flex-start
 horizontal-tb ltr column wrap align-content-flex-end
 horizontal-tb ltr column wrap align-content-center
 horizontal-tb ltr column wrap align-content-space-between
 horizontal-tb ltr column wrap align-content-space-around
+horizontal-tb ltr column wrap align-content-space-evenly
 horizontal-tb ltr column wrap align-content-stretch
 horizontal-tb ltr column wrap-reverse align-content-flex-start
 horizontal-tb ltr column wrap-reverse align-content-flex-end
 horizontal-tb ltr column wrap-reverse align-content-center
 horizontal-tb ltr column wrap-reverse align-content-space-between
 horizontal-tb ltr column wrap-reverse align-content-space-around
+horizontal-tb ltr column wrap-reverse align-content-space-evenly
 horizontal-tb ltr column wrap-reverse align-content-stretch
 horizontal-tb rtl column wrap align-content-flex-start
 horizontal-tb rtl column wrap align-content-flex-end
 horizontal-tb rtl column wrap align-content-center
 horizontal-tb rtl column wrap align-content-space-between
 horizontal-tb rtl column wrap align-content-space-around
+horizontal-tb rtl column wrap align-content-space-evenly
 horizontal-tb rtl column wrap align-content-stretch
 horizontal-tb rtl column wrap-reverse align-content-flex-start
 horizontal-tb rtl column wrap-reverse align-content-flex-end
 horizontal-tb rtl column wrap-reverse align-content-center
 horizontal-tb rtl column wrap-reverse align-content-space-between
 horizontal-tb rtl column wrap-reverse align-content-space-around
+horizontal-tb rtl column wrap-reverse align-content-space-evenly
 horizontal-tb rtl column wrap-reverse align-content-stretch
 horizontal-tb ltr column-reverse wrap align-content-flex-start
 horizontal-tb ltr column-reverse wrap align-content-flex-end
 horizontal-tb ltr column-reverse wrap align-content-center
 horizontal-tb ltr column-reverse wrap align-content-space-between
 horizontal-tb ltr column-reverse wrap align-content-space-around
+horizontal-tb ltr column-reverse wrap align-content-space-evenly
 horizontal-tb ltr column-reverse wrap align-content-stretch
 horizontal-tb ltr column-reverse wrap-reverse align-content-flex-start
 horizontal-tb ltr column-reverse wrap-reverse align-content-flex-end
 horizontal-tb ltr column-reverse wrap-reverse align-content-center
 horizontal-tb ltr column-reverse wrap-reverse align-content-space-between
 horizontal-tb ltr column-reverse wrap-reverse align-content-space-around
+horizontal-tb ltr column-reverse wrap-reverse align-content-space-evenly
 horizontal-tb ltr column-reverse wrap-reverse align-content-stretch
 horizontal-tb rtl column-reverse wrap align-content-flex-start
 horizontal-tb rtl column-reverse wrap align-content-flex-end
 horizontal-tb rtl column-reverse wrap align-content-center
 horizontal-tb rtl column-reverse wrap align-content-space-between
 horizontal-tb rtl column-reverse wrap align-content-space-around
+horizontal-tb rtl column-reverse wrap align-content-space-evenly
 horizontal-tb rtl column-reverse wrap align-content-stretch
 horizontal-tb rtl column-reverse wrap-reverse align-content-flex-start
 horizontal-tb rtl column-reverse wrap-reverse align-content-flex-end
 horizontal-tb rtl column-reverse wrap-reverse align-content-center
 horizontal-tb rtl column-reverse wrap-reverse align-content-space-between
 horizontal-tb rtl column-reverse wrap-reverse align-content-space-around
+horizontal-tb rtl column-reverse wrap-reverse align-content-space-evenly
 horizontal-tb rtl column-reverse wrap-reverse align-content-stretch
 
index c6ff618..c0d9cf8 100644 (file)
@@ -47,6 +47,9 @@
 .align-content-space-around {
     align-content: space-around;
 }
+.align-content-space-evenly {
+    align-content: space-evenly;
+}
 .align-content-stretch {
     align-content: stretch;
 }
@@ -74,6 +77,7 @@ var expectations = {
                     'center': [200, 300],
                     'space-between': [0, 500],
                     'space-around': [100, 400],
+                    'space-evenly': [133, 367],
                     'stretch': [0, 300],
                 },
                 'wrap-reverse': {
@@ -82,6 +86,7 @@ var expectations = {
                     'center': [300, 200],
                     'space-between': [500, 0],
                     'space-around': [400, 100],
+                    'space-evenly': [367, 133],
                     'stretch': [300, 0],
                 },
             },
@@ -92,6 +97,7 @@ var expectations = {
                     'center': [300, 200],
                     'space-between': [500, 0],
                     'space-around': [400, 100],
+                    'space-evenly': [367, 133],
                     'stretch': [300, 0],
                 },
                 'wrap-reverse': {
@@ -100,6 +106,7 @@ var expectations = {
                     'center': [200, 300],
                     'space-between': [0, 500],
                     'space-around': [100, 400],
+                    'space-evenly': [133, 367],
                     'stretch': [0, 300],
                 },
             },
@@ -113,6 +120,7 @@ var expectations = {
                     'center': [200, 300],
                     'space-between': [0, 500],
                     'space-around': [100, 400],
+                    'space-evenly': [133, 367],
                     'stretch': [0, 300],
                 },
                 'wrap-reverse': {
@@ -121,6 +129,7 @@ var expectations = {
                     'center': [300, 200],
                     'space-between': [500, 0],
                     'space-around': [400, 100],
+                    'space-evenly': [367, 133],
                     'stretch': [300, 0],
                 },
             },
@@ -131,6 +140,7 @@ var expectations = {
                     'center': [300, 200],
                     'space-between': [500, 0],
                     'space-around': [400, 100],
+                    'space-evenly': [367, 133],
                     'stretch': [300, 0],
                 },
                 'wrap-reverse': {
@@ -139,6 +149,7 @@ var expectations = {
                     'center': [200, 300],
                     'space-between': [0, 500],
                     'space-around': [100, 400],
+                    'space-evenly': [133, 367],
                     'stretch': [0, 300],
                 },
             },
@@ -172,7 +183,7 @@ var writingModes = ['horizontal-tb'];
 var flexDirections = ['column', 'column-reverse'];
 var directions = ['ltr', 'rtl'];
 var wraps = ['wrap', 'wrap-reverse'];
-var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'];
+var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch'];
 
 writingModes.forEach(function(writingMode) {
     flexDirections.forEach(function(flexDirection) {
index db0854d..a40fa6c 100644 (file)
   <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
 </div>
 
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly">
+  <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div>
+</div>
+
 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
   <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
   <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
   <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
 </div>
 
+<!-- If we overflow, we should true center. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+  <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
+</div>
+
 <!-- Stretch should only grow, not shrink. -->
 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
   <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
 </div>
 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
 </div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+</div>
 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
 </div>
 
 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
   <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
 </div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
+</div>
 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
   <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
 </div>
   <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
 </div>
 
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly">
+  <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
   <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
   <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
   <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
 </div>
 
+<!-- If we overflow, we should true center. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;">
+  <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
 <!-- Stretch should only grow, not shrink. -->
 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
   <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
 </div>
 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
 </div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
+</div>
 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
 </div>
 
 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
   <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
 </div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
+</div>
 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
   <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
 </div>
index 83502cd..6b0e581 100644 (file)
     -webkit-align-content: space-around;
     align-content: space-around;
 }
+.align-content-space-around {
+    -webkit-align-content: space-evenly;
+    align-content: space-evenly;
+}
 .align-content-stretch {
     -webkit-align-content: stretch;
     align-content: stretch;
     -webkit-justify-content: space-around;
     justify-content: space-around;
 }
+.justify-content-space-around {
+    -webkit-justify-content: space-evenly;
+    justify-content: space-evenly;
+}
index 3ad53c9..e75780b 100644 (file)
@@ -30,6 +30,7 @@ PASS .flexbox 28
 PASS .flexbox 29 
 PASS .flexbox 30 
 PASS .flexbox 31 
+PASS .flexbox 32 
 horizontal-tb ltr row
 horizontal-tb rtl row
 horizontal-tb ltr column
index 248f8b3..839083b 100644 (file)
     <div data-offset-x="50" data-offset-y="-5"></div>
 </div>
 
+<div class="flexbox" style="align-items: center; justify-content: space-evenly;">
+    <div data-offset-x="-10" data-offset-y="-5"></div>
+    <div data-offset-x="50" data-offset-y="-5"></div>
+</div>
+
 <div class="flexbox" style="align-items: flex-start; justify-content: flex-start;">
     <div data-offset-x=0 data-offset-y=0></div>
     <div data-offset-x=60 data-offset-y=0></div>
index 657839b..70d22a1 100644 (file)
@@ -1,3 +1,33 @@
+2017-05-09  Javier Fernandez  <jfernandez@igalia.com>
+
+        space-evenly misbehaves with flexbox
+        https://bugs.webkit.org/show_bug.cgi?id=170445
+
+        Reviewed by David Hyatt.
+
+        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.
+
+        No new tests, but several new test cases added.
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::initialJustifyContentOffset):
+        (WebCore::justifyContentSpaceBetweenChildren):
+        (WebCore::initialAlignContentOffset):
+        (WebCore::alignContentSpaceBetweenChildren):
+
 2017-05-09  Michael Catanzaro  <mcatanzaro@igalia.com>
 
         Avoid -Wformat warnings in RenderLayerCompositor.cpp and RenderLayerBacking.cpp
index 7f80cc4..28f8836 100644 (file)
@@ -1291,6 +1291,12 @@ static LayoutUnit initialJustifyContentOffset(LayoutUnit availableFreeSpace, Con
         else
             return availableFreeSpace / 2;
     }
+    if (justifyContentDistribution == ContentDistributionSpaceEvenly) {
+        if (availableFreeSpace > 0 && numberOfChildren)
+            return availableFreeSpace / (numberOfChildren + 1);
+        // Fallback to 'center'
+        return availableFreeSpace / 2;
+    }
     return 0;
 }
 
@@ -1301,6 +1307,8 @@ static LayoutUnit justifyContentSpaceBetweenChildren(LayoutUnit availableFreeSpa
             return availableFreeSpace / (numberOfChildren - 1);
         if (justifyContentDistribution == ContentDistributionSpaceAround)
             return availableFreeSpace / numberOfChildren;
+        if (justifyContentDistribution == ContentDistributionSpaceEvenly)
+            return availableFreeSpace / (numberOfChildren + 1);
     }
     return 0;
 }
@@ -1646,6 +1654,12 @@ static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, Conte
         if (availableFreeSpace < 0)
             return availableFreeSpace / 2;
     }
+    if (alignContentDistribution == ContentDistributionSpaceEvenly) {
+        if (availableFreeSpace > 0)
+            return availableFreeSpace / (numberOfLines + 1);
+        // Fallback to 'center'
+        return availableFreeSpace / 2;
+    }
     return LayoutUnit();
 }
 
@@ -1656,6 +1670,8 @@ static LayoutUnit alignContentSpaceBetweenChildren(LayoutUnit availableFreeSpace
             return availableFreeSpace / (numberOfLines - 1);
         if (alignContentDistribution == ContentDistributionSpaceAround || alignContentDistribution == ContentDistributionStretch)
             return availableFreeSpace / numberOfLines;
+        if (alignContentDistribution == ContentDistributionSpaceEvenly)
+            return availableFreeSpace / (numberOfLines + 1);
     }
     return LayoutUnit();
 }