Implement absolutely positioned flex items
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Sep 2012 19:29:51 +0000 (19:29 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Sep 2012 19:29:51 +0000 (19:29 +0000)
https://bugs.webkit.org/show_bug.cgi?id=93798

Reviewed by Ojan Vafai.

Source/WebCore:

Previously, we treated absolutely positioned flex items as a 0x0 placeholder element.
Now we position the 0x0 placeholder where the next item would go. This causes the
following changes:
- justify-content: space-{around,between} no longer change due to the existence of absolutely positioned flex items.
- alignment doesn't change the placement of absolutely positioned flex items.
- auto margins in the alignment direction don't do anything on absolutely positioned flex items.

Test: css3/flexbox/position-absolute-children.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Absolutely positioned flex items should not use this.
(WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): Absolutely positioned flex items should not use this.
(WebCore::initialJustifyContentOffset): If there are no flex items, space-around should center an absolutely positioned flex item.
(WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Helper method for helping to compute space-between and space-around.
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::layoutColumnReverse): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::alignChildren): Treat absolutely positioned children like flex-start.
* rendering/RenderFlexibleBox.h: numberOfInFlowPositionedChildren method.

LayoutTests:

Fix position of absolute flex items and add some additional tests.

* css3/flexbox/align-absolute-child-expected.txt:
* css3/flexbox/align-absolute-child.html: New test cases and update expectations.
* css3/flexbox/position-absolute-child.html: Update expectations.
* css3/flexbox/position-absolute-children-expected.txt: Added.
* css3/flexbox/position-absolute-children.html: Added. Tests having only absolutely positioned children.

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

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/align-absolute-child-expected.txt
LayoutTests/css3/flexbox/align-absolute-child.html
LayoutTests/css3/flexbox/position-absolute-child.html
LayoutTests/css3/flexbox/position-absolute-children-expected.txt [new file with mode: 0644]
LayoutTests/css3/flexbox/position-absolute-children.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index 2c00554..78ffd3b 100644 (file)
@@ -1,3 +1,18 @@
+2012-09-20  Tony Chang  <tony@chromium.org>
+
+        Implement absolutely positioned flex items
+        https://bugs.webkit.org/show_bug.cgi?id=93798
+
+        Reviewed by Ojan Vafai.
+
+        Fix position of absolute flex items and add some additional tests.
+
+        * css3/flexbox/align-absolute-child-expected.txt:
+        * css3/flexbox/align-absolute-child.html: New test cases and update expectations.
+        * css3/flexbox/position-absolute-child.html: Update expectations.
+        * css3/flexbox/position-absolute-children-expected.txt: Added.
+        * css3/flexbox/position-absolute-children.html: Added. Tests having only absolutely positioned children.
+
 2012-09-20  Ojan Vafai  <ojan@chromium.org>
 
         Remove now passing test.
index 18271f4..929843d 100644 (file)
@@ -66,6 +66,10 @@ body {
     direction: ltr;
 }
 
+.wrap {
+    -webkit-flex-wrap: wrap;
+}
+
 .wrap-reverse {
     -webkit-flex-wrap: wrap-reverse;
 }
@@ -104,7 +108,7 @@ body {
 
 <div class='flexbox relative align-center'>
     <div data-offset-x=0 data-offset-y=40></div>
-    <div class='absolute' data-offset-x=20 data-offset-y=50></div>
+    <div class='absolute' data-offset-x=20 data-offset-y=0></div>
     <div data-offset-x=20 data-offset-y=40></div>
     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
 </div>
@@ -112,7 +116,7 @@ body {
 <div class="relative">
 <div class='flexbox align-center'>
     <div data-offset-x=10 data-offset-y=40></div>
-    <div class='absolute' data-offset-x=30 data-offset-y=50></div>
+    <div class='absolute' data-offset-x=30 data-offset-y=0></div>
     <div data-offset-x=30 data-offset-y=40></div>
     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
 </div>
@@ -139,8 +143,8 @@ body {
 
 <div class='flexbox relative'>
     <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div>
-    <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=50></div>
-    <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=50></div>
+    <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
+    <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
     <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
 </div>
 
@@ -150,6 +154,24 @@ body {
     <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div>
 </div>
 
+<div class="flexbox wrap relative">
+  <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div>
+  <div class="absolute" data-offset-x=100 data-offset-y=0></div>
+  <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div>
+  <div class="absolute" data-offset-x=50 data-offset-y=50></div>
+  <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div>
+  <div class="absolute" data-offset-x=100 data-offset-y=50></div>
+</div>
+
+<div class="flexbox wrap relative" style="-webkit-align-items: flex-end">
+  <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
+  <div class="absolute" data-offset-x=100 data-offset-y=0></div>
+  <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
+  <div class="absolute" data-offset-x=50 data-offset-y=50></div>
+  <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div>
+  <div class="absolute" data-offset-x=100 data-offset-y=50></div>
+</div>
+
 
 <script>
 var absolute = document.getElementById('placed-absolute');
index dab420f..5f42f9c 100644 (file)
@@ -89,23 +89,23 @@ var expectations = {
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [0, 260, 560] },
-                { offsets: [0, 300, 560] },
-                { offsets: [0, 300, 600] },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 90], crossAxisOffset: 50 },
+                { offsets: [0, 0, 560] },
+                { offsets: [0, 560, 560] },
+                { offsets: [0, 560, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 90], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [580, 300, 0] },
-                { offsets: [560, 280, 0] },
-                { offsets: [560, 260, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, -30], crossAxisOffset: 50 },
+                { offsets: [580, 560, 0] },
+                { offsets: [560, 20, 0] },
+                { offsets: [560, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, -30], crossAxisOffset: 0 },
             ],
         },
         column: {
@@ -113,23 +113,23 @@ var expectations = {
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [0, 20, 80] },
-                { offsets: [0, 60, 80] },
-                { offsets: [0, 60, 120] },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 90], crossAxisOffset: 50 },
+                { offsets: [0, 0, 80] },
+                { offsets: [0, 80, 80] },
+                { offsets: [0, 80, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 90], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [0, 20, 80] },
-                { offsets: [0, 60, 80] },
-                { offsets: [0, 60, 120] },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 90], crossAxisOffset: 10 },
+                { offsets: [0, 0, 80] },
+                { offsets: [0, 80, 80] },
+                { offsets: [0, 80, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 90], crossAxisOffset: 60 },
             ],
         },
         'row-reverse': {
@@ -137,23 +137,23 @@ var expectations = {
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [600, 300, 0] },
-                { offsets: [560, 300, 0] },
-                { offsets: [560, 260, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [600, 560, 0] },
+                { offsets: [560, 40, 0] },
+                { offsets: [560, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [-20, 260, 560] },
-                { offsets: [0, 280, 560] },
-                { offsets: [0, 300, 580] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [-20, 0, 560] },
+                { offsets: [0, 540, 560] },
+                { offsets: [0, 560, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
             ],
         },
         'column-reverse': {
@@ -161,23 +161,23 @@ var expectations = {
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [120, 60, 0] },
-                { offsets: [80, 60, 0] },
-                { offsets: [80, 20, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [120, 80, 0] },
+                { offsets: [80, 40, 0] },
+                { offsets: [80, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [120, 60, 0] },
-                { offsets: [80, 60, 0] },
-                { offsets: [80, 20, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [120, 80, 0] },
+                { offsets: [80, 40, 0] },
+                { offsets: [80, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
             ],
         },
     },
@@ -188,23 +188,23 @@ var expectations = {
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [0, 260, 560] },
-                { offsets: [0, 300, 560] },
-                { offsets: [0, 300, 600] },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 90], crossAxisOffset: 10 },
+                { offsets: [0, 0, 560] },
+                { offsets: [0, 560, 560] },
+                { offsets: [0, 560, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 90], crossAxisOffset: 60 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [580, 300, 0] },
-                { offsets: [560, 280, 0] },
-                { offsets: [560, 260, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, -30], crossAxisOffset: 10 },
+                { offsets: [580, 560, 0] },
+                { offsets: [560, 20, 0] },
+                { offsets: [560, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, -30], crossAxisOffset: 60 },
             ],
         },
         // horizontal-bt flips the main axis direction so the offsets are different from horizontal-tb.
@@ -213,23 +213,23 @@ var expectations = {
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [100, 60, 0] },
-                { offsets: [80, 40, 0] },
-                { offsets: [80, 20, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, -30], crossAxisOffset: 50 },
+                { offsets: [100, 80, 0] },
+                { offsets: [80, 20, 0] },
+                { offsets: [80, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, -30], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [100, 60, 0] },
-                { offsets: [80, 40, 0] },
-                { offsets: [80, 20, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, -30], crossAxisOffset: 10 },
+                { offsets: [100, 80, 0] },
+                { offsets: [80, 20, 0] },
+                { offsets: [80, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, -30], crossAxisOffset: 60 },
             ],
         },
         'row-reverse': {
@@ -237,23 +237,23 @@ var expectations = {
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [600, 300, 0] },
-                { offsets: [560, 300, 0] },
-                { offsets: [560, 260, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [600, 560, 0] },
+                { offsets: [560, 40, 0] },
+                { offsets: [560, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [-20, 260, 560] },
-                { offsets: [0, 280, 560] },
-                { offsets: [0, 300, 580] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [-20, 0, 560] },
+                { offsets: [0, 540, 560] },
+                { offsets: [0, 560, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
             ],
         },
         'column-reverse': {
@@ -261,23 +261,23 @@ var expectations = {
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [-20, 20, 80] },
-                { offsets: [0, 40, 80] },
-                { offsets: [0, 60, 100] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [-20, 0, 80] },
+                { offsets: [0, 60, 80] },
+                { offsets: [0, 80, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [-20, 20, 80] },
-                { offsets: [0, 40, 80] },
-                { offsets: [0, 60, 100] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [-20, 0, 80] },
+                { offsets: [0, 60, 80] },
+                { offsets: [0, 80, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
             ],
         },
     },
@@ -288,23 +288,23 @@ var expectations = {
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [0, 20, 80] },
-                { offsets: [0, 60, 80] },
-                { offsets: [0, 60, 120] },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 90], crossAxisOffset: 10 },
+                { offsets: [0, 0, 80] },
+                { offsets: [0, 80, 80] },
+                { offsets: [0, 80, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 90], crossAxisOffset: 60 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [100, 60, 0] },
-                { offsets: [80, 40, 0] },
-                { offsets: [80, 20, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, -30], crossAxisOffset: 10 },
+                { offsets: [100, 80, 0] },
+                { offsets: [80, 20, 0] },
+                { offsets: [80, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, -30], crossAxisOffset: 60 },
             ],
         },
         column: {
@@ -313,23 +313,23 @@ var expectations = {
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [580, 300, 0] },
-                { offsets: [560, 280, 0] },
-                { offsets: [560, 260, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, -30], crossAxisOffset: 50 },
+                { offsets: [580, 560, 0] },
+                { offsets: [560, 20, 0] },
+                { offsets: [560, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, -30], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [580, 300, 0] },
-                { offsets: [560, 280, 0] },
-                { offsets: [560, 260, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, -30], crossAxisOffset: 10 },
+                { offsets: [580, 560, 0] },
+                { offsets: [560, 20, 0] },
+                { offsets: [560, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, -30], crossAxisOffset: 60 },
             ],
         },
         'row-reverse': {
@@ -337,23 +337,23 @@ var expectations = {
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [120, 60, 0] },
-                { offsets: [80, 60, 0] },
-                { offsets: [80, 20, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [120, 80, 0] },
+                { offsets: [80, 40, 0] },
+                { offsets: [80, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [-20, 20, 80] },
-                { offsets: [0, 40, 80] },
-                { offsets: [0, 60, 100] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [-20, 0, 80] },
+                { offsets: [0, 60, 80] },
+                { offsets: [0, 80, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
             ],
         },
         'column-reverse': {
@@ -361,23 +361,23 @@ var expectations = {
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [-20, 260, 560] },
-                { offsets: [0, 280, 560] },
-                { offsets: [0, 300, 580] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [-20, 0, 560] },
+                { offsets: [0, 540, 560] },
+                { offsets: [0, 560, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [-20, 260, 560] },
-                { offsets: [0, 280, 560] },
-                { offsets: [0, 300, 580] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [-20, 0, 560] },
+                { offsets: [0, 540, 560] },
+                { offsets: [0, 560, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
             ],
         }
     },
@@ -388,23 +388,23 @@ var expectations = {
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [0, 20, 80] },
-                { offsets: [0, 60, 80] },
-                { offsets: [0, 60, 120] },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 90], crossAxisOffset: 50 },
+                { offsets: [0, 0, 80] },
+                { offsets: [0, 80, 80] },
+                { offsets: [0, 80, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 90], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [100, 60, 0] },
-                { offsets: [80, 40, 0] },
-                { offsets: [80, 20, -20] },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, -30], crossAxisOffset: 50 },
+                { offsets: [100, 80, 0] },
+                { offsets: [80, 20, 0] },
+                { offsets: [80, 0, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, -30], crossAxisOffset: 0 },
             ],
         },
         column: {
@@ -413,23 +413,23 @@ var expectations = {
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [0, 260, 560] },
-                { offsets: [0, 300, 560] },
-                { offsets: [0, 300, 600] },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 90], crossAxisOffset: 50 },
+                { offsets: [0, 0, 560] },
+                { offsets: [0, 560, 560] },
+                { offsets: [0, 560, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 90], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
-                { offsets: [0, 260, 560] },
-                { offsets: [0, 300, 560] },
-                { offsets: [0, 300, 600] },
-                { offsets: [10, 10, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 50], crossAxisOffset: 10 },
-                { offsets: [10, 50, 90], crossAxisOffset: 10 },
+                { offsets: [0, 0, 560] },
+                { offsets: [0, 560, 560] },
+                { offsets: [0, 560, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 50], crossAxisOffset: 60 },
+                { offsets: [10, 50, 90], crossAxisOffset: 60 },
             ],
         },
         'row-reverse': {
@@ -437,23 +437,23 @@ var expectations = {
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
-                { offsets: [120, 60, 0] },
-                { offsets: [80, 60, 0] },
-                { offsets: [80, 20, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [120, 80, 0] },
+                { offsets: [80, 40, 0] },
+                { offsets: [80, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
-                { offsets: [-20, 20, 80] },
-                { offsets: [0, 40, 80] },
-                { offsets: [0, 60, 100] },
-                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 10, 50], crossAxisOffset: 50 },
-                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [-20, 0, 80] },
+                { offsets: [0, 60, 80] },
+                { offsets: [0, 80, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 10, 50], crossAxisOffset: 0 },
+                { offsets: [10, 50, 50], crossAxisOffset: 0 },
             ],
         },
         'column-reverse': {
@@ -461,23 +461,23 @@ var expectations = {
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [600, 300, 0] },
-                { offsets: [560, 300, 0] },
-                { offsets: [560, 260, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 50, 10], crossAxisOffset: 50 },
-                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [600, 560, 0] },
+                { offsets: [560, 40, 0] },
+                { offsets: [560, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 50, 10], crossAxisOffset: 0 },
+                { offsets: [50, 10, 10], crossAxisOffset: 0 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
-                { offsets: [600, 300, 0] },
-                { offsets: [560, 300, 0] },
-                { offsets: [560, 260, 0] },
-                { offsets: [90, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 50, 10], crossAxisOffset: 10 },
-                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [600, 560, 0] },
+                { offsets: [560, 40, 0] },
+                { offsets: [560, 0, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 50, 10], crossAxisOffset: 60 },
+                { offsets: [50, 10, 10], crossAxisOffset: 60 },
             ],
         },
     }
diff --git a/LayoutTests/css3/flexbox/position-absolute-children-expected.txt b/LayoutTests/css3/flexbox/position-absolute-children-expected.txt
new file mode 100644 (file)
index 0000000..39af1cb
--- /dev/null
@@ -0,0 +1,320 @@
+horizontal-tb ltr row justify-content-flex-start
+PASS
+horizontal-tb ltr row justify-content-flex-end
+PASS
+horizontal-tb ltr row justify-content-center
+PASS
+horizontal-tb ltr row justify-content-space-between
+PASS
+horizontal-tb ltr row justify-content-space-around
+PASS
+horizontal-tb rtl row justify-content-flex-start
+PASS
+horizontal-tb rtl row justify-content-flex-end
+PASS
+horizontal-tb rtl row justify-content-center
+PASS
+horizontal-tb rtl row justify-content-space-between
+PASS
+horizontal-tb rtl row justify-content-space-around
+PASS
+horizontal-tb ltr column justify-content-flex-start
+PASS
+horizontal-tb ltr column justify-content-flex-end
+PASS
+horizontal-tb ltr column justify-content-center
+PASS
+horizontal-tb ltr column justify-content-space-between
+PASS
+horizontal-tb ltr column justify-content-space-around
+PASS
+horizontal-tb rtl column justify-content-flex-start
+PASS
+horizontal-tb rtl column justify-content-flex-end
+PASS
+horizontal-tb rtl column justify-content-center
+PASS
+horizontal-tb rtl column justify-content-space-between
+PASS
+horizontal-tb rtl column justify-content-space-around
+PASS
+horizontal-tb ltr row-reverse justify-content-flex-start
+PASS
+horizontal-tb ltr row-reverse justify-content-flex-end
+PASS
+horizontal-tb ltr row-reverse justify-content-center
+PASS
+horizontal-tb ltr row-reverse justify-content-space-between
+PASS
+horizontal-tb ltr row-reverse justify-content-space-around
+PASS
+horizontal-tb rtl row-reverse justify-content-flex-start
+PASS
+horizontal-tb rtl row-reverse justify-content-flex-end
+PASS
+horizontal-tb rtl row-reverse justify-content-center
+PASS
+horizontal-tb rtl row-reverse justify-content-space-between
+PASS
+horizontal-tb rtl row-reverse justify-content-space-around
+PASS
+horizontal-tb ltr column-reverse justify-content-flex-start
+PASS
+horizontal-tb ltr column-reverse justify-content-flex-end
+PASS
+horizontal-tb ltr column-reverse justify-content-center
+PASS
+horizontal-tb ltr column-reverse justify-content-space-between
+PASS
+horizontal-tb ltr column-reverse justify-content-space-around
+PASS
+horizontal-tb rtl column-reverse justify-content-flex-start
+PASS
+horizontal-tb rtl column-reverse justify-content-flex-end
+PASS
+horizontal-tb rtl column-reverse justify-content-center
+PASS
+horizontal-tb rtl column-reverse justify-content-space-between
+PASS
+horizontal-tb rtl column-reverse justify-content-space-around
+PASS
+horizontal-bt ltr row justify-content-flex-start
+PASS
+horizontal-bt ltr row justify-content-flex-end
+PASS
+horizontal-bt ltr row justify-content-center
+PASS
+horizontal-bt ltr row justify-content-space-between
+PASS
+horizontal-bt ltr row justify-content-space-around
+PASS
+horizontal-bt rtl row justify-content-flex-start
+PASS
+horizontal-bt rtl row justify-content-flex-end
+PASS
+horizontal-bt rtl row justify-content-center
+PASS
+horizontal-bt rtl row justify-content-space-between
+PASS
+horizontal-bt rtl row justify-content-space-around
+PASS
+horizontal-bt ltr column justify-content-flex-start
+PASS
+horizontal-bt ltr column justify-content-flex-end
+PASS
+horizontal-bt ltr column justify-content-center
+PASS
+horizontal-bt ltr column justify-content-space-between
+PASS
+horizontal-bt ltr column justify-content-space-around
+PASS
+horizontal-bt rtl column justify-content-flex-start
+PASS
+horizontal-bt rtl column justify-content-flex-end
+PASS
+horizontal-bt rtl column justify-content-center
+PASS
+horizontal-bt rtl column justify-content-space-between
+PASS
+horizontal-bt rtl column justify-content-space-around
+PASS
+horizontal-bt ltr row-reverse justify-content-flex-start
+PASS
+horizontal-bt ltr row-reverse justify-content-flex-end
+PASS
+horizontal-bt ltr row-reverse justify-content-center
+PASS
+horizontal-bt ltr row-reverse justify-content-space-between
+PASS
+horizontal-bt ltr row-reverse justify-content-space-around
+PASS
+horizontal-bt rtl row-reverse justify-content-flex-start
+PASS
+horizontal-bt rtl row-reverse justify-content-flex-end
+PASS
+horizontal-bt rtl row-reverse justify-content-center
+PASS
+horizontal-bt rtl row-reverse justify-content-space-between
+PASS
+horizontal-bt rtl row-reverse justify-content-space-around
+PASS
+horizontal-bt ltr column-reverse justify-content-flex-start
+PASS
+horizontal-bt ltr column-reverse justify-content-flex-end
+PASS
+horizontal-bt ltr column-reverse justify-content-center
+PASS
+horizontal-bt ltr column-reverse justify-content-space-between
+PASS
+horizontal-bt ltr column-reverse justify-content-space-around
+PASS
+horizontal-bt rtl column-reverse justify-content-flex-start
+PASS
+horizontal-bt rtl column-reverse justify-content-flex-end
+PASS
+horizontal-bt rtl column-reverse justify-content-center
+PASS
+horizontal-bt rtl column-reverse justify-content-space-between
+PASS
+horizontal-bt rtl column-reverse justify-content-space-around
+PASS
+vertical-rl ltr row justify-content-flex-start
+PASS
+vertical-rl ltr row justify-content-flex-end
+PASS
+vertical-rl ltr row justify-content-center
+PASS
+vertical-rl ltr row justify-content-space-between
+PASS
+vertical-rl ltr row justify-content-space-around
+PASS
+vertical-rl rtl row justify-content-flex-start
+PASS
+vertical-rl rtl row justify-content-flex-end
+PASS
+vertical-rl rtl row justify-content-center
+PASS
+vertical-rl rtl row justify-content-space-between
+PASS
+vertical-rl rtl row justify-content-space-around
+PASS
+vertical-rl ltr column justify-content-flex-start
+PASS
+vertical-rl ltr column justify-content-flex-end
+PASS
+vertical-rl ltr column justify-content-center
+PASS
+vertical-rl ltr column justify-content-space-between
+PASS
+vertical-rl ltr column justify-content-space-around
+PASS
+vertical-rl rtl column justify-content-flex-start
+PASS
+vertical-rl rtl column justify-content-flex-end
+PASS
+vertical-rl rtl column justify-content-center
+PASS
+vertical-rl rtl column justify-content-space-between
+PASS
+vertical-rl rtl column justify-content-space-around
+PASS
+vertical-rl ltr row-reverse justify-content-flex-start
+PASS
+vertical-rl ltr row-reverse justify-content-flex-end
+PASS
+vertical-rl ltr row-reverse justify-content-center
+PASS
+vertical-rl ltr row-reverse justify-content-space-between
+PASS
+vertical-rl ltr row-reverse justify-content-space-around
+PASS
+vertical-rl rtl row-reverse justify-content-flex-start
+PASS
+vertical-rl rtl row-reverse justify-content-flex-end
+PASS
+vertical-rl rtl row-reverse justify-content-center
+PASS
+vertical-rl rtl row-reverse justify-content-space-between
+PASS
+vertical-rl rtl row-reverse justify-content-space-around
+PASS
+vertical-rl ltr column-reverse justify-content-flex-start
+PASS
+vertical-rl ltr column-reverse justify-content-flex-end
+PASS
+vertical-rl ltr column-reverse justify-content-center
+PASS
+vertical-rl ltr column-reverse justify-content-space-between
+PASS
+vertical-rl ltr column-reverse justify-content-space-around
+PASS
+vertical-rl rtl column-reverse justify-content-flex-start
+PASS
+vertical-rl rtl column-reverse justify-content-flex-end
+PASS
+vertical-rl rtl column-reverse justify-content-center
+PASS
+vertical-rl rtl column-reverse justify-content-space-between
+PASS
+vertical-rl rtl column-reverse justify-content-space-around
+PASS
+vertical-lr ltr row justify-content-flex-start
+PASS
+vertical-lr ltr row justify-content-flex-end
+PASS
+vertical-lr ltr row justify-content-center
+PASS
+vertical-lr ltr row justify-content-space-between
+PASS
+vertical-lr ltr row justify-content-space-around
+PASS
+vertical-lr rtl row justify-content-flex-start
+PASS
+vertical-lr rtl row justify-content-flex-end
+PASS
+vertical-lr rtl row justify-content-center
+PASS
+vertical-lr rtl row justify-content-space-between
+PASS
+vertical-lr rtl row justify-content-space-around
+PASS
+vertical-lr ltr column justify-content-flex-start
+PASS
+vertical-lr ltr column justify-content-flex-end
+PASS
+vertical-lr ltr column justify-content-center
+PASS
+vertical-lr ltr column justify-content-space-between
+PASS
+vertical-lr ltr column justify-content-space-around
+PASS
+vertical-lr rtl column justify-content-flex-start
+PASS
+vertical-lr rtl column justify-content-flex-end
+PASS
+vertical-lr rtl column justify-content-center
+PASS
+vertical-lr rtl column justify-content-space-between
+PASS
+vertical-lr rtl column justify-content-space-around
+PASS
+vertical-lr ltr row-reverse justify-content-flex-start
+PASS
+vertical-lr ltr row-reverse justify-content-flex-end
+PASS
+vertical-lr ltr row-reverse justify-content-center
+PASS
+vertical-lr ltr row-reverse justify-content-space-between
+PASS
+vertical-lr ltr row-reverse justify-content-space-around
+PASS
+vertical-lr rtl row-reverse justify-content-flex-start
+PASS
+vertical-lr rtl row-reverse justify-content-flex-end
+PASS
+vertical-lr rtl row-reverse justify-content-center
+PASS
+vertical-lr rtl row-reverse justify-content-space-between
+PASS
+vertical-lr rtl row-reverse justify-content-space-around
+PASS
+vertical-lr ltr column-reverse justify-content-flex-start
+PASS
+vertical-lr ltr column-reverse justify-content-flex-end
+PASS
+vertical-lr ltr column-reverse justify-content-center
+PASS
+vertical-lr ltr column-reverse justify-content-space-between
+PASS
+vertical-lr ltr column-reverse justify-content-space-around
+PASS
+vertical-lr rtl column-reverse justify-content-flex-start
+PASS
+vertical-lr rtl column-reverse justify-content-flex-end
+PASS
+vertical-lr rtl column-reverse justify-content-center
+PASS
+vertical-lr rtl column-reverse justify-content-space-between
+PASS
+vertical-lr rtl column-reverse justify-content-space-around
+PASS
diff --git a/LayoutTests/css3/flexbox/position-absolute-children.html b/LayoutTests/css3/flexbox/position-absolute-children.html
new file mode 100644 (file)
index 0000000..d976626
--- /dev/null
@@ -0,0 +1,890 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+    margin: 0;
+}
+
+.title {
+    margin-top: 1em;
+}
+
+.flexbox {
+    display: -webkit-flex;
+    background-color: #aaa;
+    position: relative;
+}
+.flexbox div {
+    border: 0;
+    -webkit-flex: none;
+}
+
+.horizontal-tb {
+    -webkit-writing-mode: horizontal-tb;
+}
+.horizontal-bt {
+    -webkit-writing-mode: horizontal-bt;
+}
+.vertical-rl {
+    -webkit-writing-mode: vertical-rl;
+}
+.vertical-lr {
+    -webkit-writing-mode: vertical-lr;
+}
+
+.row {
+    -webkit-flex-flow: row;
+}
+.row-reverse {
+    -webkit-flex-flow: row-reverse;
+}
+.column {
+    -webkit-flex-flow: column;
+}
+.column-reverse {
+    -webkit-flex-flow: column-reverse;
+}
+
+.flexbox :nth-child(1) {
+    background-color: blue;
+}
+.flexbox :nth-child(2) {
+    background-color: green;
+}
+
+.rtl {
+    direction: rtl;
+}
+.ltr {
+    direction: ltr;
+}
+
+.justify-content-flex-start {
+    -webkit-justify-content: flex-start;
+}
+.justify-content-flex-end {
+    -webkit-justify-content: flex-end;
+}
+.justify-content-center {
+    -webkit-justify-content: center;
+}
+.justify-content-space-between {
+    -webkit-justify-content: space-between;
+}
+.justify-content-space-around {
+    -webkit-justify-content: space-around;
+}
+</style>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.flexbox')">
+<script>
+var expectations = {
+    'horizontal-tb': {
+        'row': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [80, 0],
+                    'child2': [80, 0],
+                },
+                'center': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [40, 0],
+                    'child2': [70, 0],
+                },
+                'flex-end': {
+                    'child1': [-40, 0],
+                    'child2': [-10, 0],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [40, 0],
+                    'child2': [70, 0],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+            },
+        },
+        'column': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [0, 80],
+                    'child2': [0, 80],
+                },
+                'center': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [10, 0],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [10, 80],
+                    'child2': [0, 80],
+                },
+                'center': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [10, 0],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+            },
+        },
+        'row-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [80, 0],
+                    'child2': [80, 0],
+                },
+                'flex-end': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [80, 0],
+                    'child2': [80, 0],
+                },
+                'space-around': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [-40, 0],
+                    'child2': [-10, 0],
+                },
+                'flex-end': {
+                    'child1': [40, 0],
+                    'child2': [70, 0],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [-40, 0],
+                    'child2': [-10, 0],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+            },
+        },
+        'column-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 80],
+                    'child2': [0, 80],
+                },
+                'flex-end': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [0, 80],
+                    'child2': [0, 80],
+                },
+                'space-around': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [10, 80],
+                    'child2': [0, 80],
+                },
+                'flex-end': {
+                    'child1': [10, 0],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [10, 80],
+                    'child2': [0, 80],
+                },
+                'space-around': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+            },
+        },
+    },
+    'horizontal-bt': {
+        'row': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 10],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [80, 10],
+                    'child2': [80, 0],
+                },
+                'center': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [0, 10],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [40, 10],
+                    'child2': [70, 0],
+                },
+                'flex-end': {
+                    'child1': [-40, 10],
+                    'child2': [-10, 0],
+                },
+                'center': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [40, 10],
+                    'child2': [70, 0],
+                },
+                'space-around': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+            },
+        },
+        'column': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 40],
+                    'child2': [0, 70],
+                },
+                'flex-end': {
+                    'child1': [0, -40],
+                    'child2': [0, -10],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [0, 40],
+                    'child2': [0, 70],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [10, 40],
+                    'child2': [0, 70],
+                },
+                'flex-end': {
+                    'child1': [10, -40],
+                    'child2': [0, -10],
+                },
+                'center': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [10, 40],
+                    'child2': [0, 70],
+                },
+                'space-around': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+            },
+        },
+        'row-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [80, 10],
+                    'child2': [80, 0],
+                },
+                'flex-end': {
+                    'child1': [0, 10],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [80, 10],
+                    'child2': [80, 0],
+                },
+                'space-around': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [-40, 10],
+                    'child2': [-10, 0],
+                },
+                'flex-end': {
+                    'child1': [40, 10],
+                    'child2': [70, 0],
+                },
+                'center': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [-40, 10],
+                    'child2': [-10, 0],
+                },
+                'space-around': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+            },
+        },
+        'column-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, -40],
+                    'child2': [0, -10],
+                },
+                'flex-end': {
+                    'child1': [0, 40],
+                    'child2': [0, 70],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [0, -40],
+                    'child2': [0, -10],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [10, -40],
+                    'child2': [0, -10],
+                },
+                'flex-end': {
+                    'child1': [10, 40],
+                    'child2': [0, 70],
+                },
+                'center': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [10, -40],
+                    'child2': [0, -10],
+                },
+                'space-around': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+            },
+        },
+    },
+    'vertical-rl': {
+        'row': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [10, 0],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [10, 80],
+                    'child2': [0, 80],
+                },
+                'center': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [10, 0],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [10, 40],
+                    'child2': [0, 70],
+                },
+                'flex-end': {
+                    'child1': [10, -40],
+                    'child2': [0, -10],
+                },
+                'center': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [10, 40],
+                    'child2': [0, 70],
+                },
+                'space-around': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+            },
+        },
+        'column': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [40, 0],
+                    'child2': [70, 0],
+                },
+                'flex-end': {
+                    'child1': [-40, 0],
+                    'child2': [-10, 0],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [40, 0],
+                    'child2': [70, 0],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [40, 10],
+                    'child2': [70, 0],
+                },
+                'flex-end': {
+                    'child1': [-40, 10],
+                    'child2': [-10, 0],
+                },
+                'center': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [40, 10],
+                    'child2': [70, 0],
+                },
+                'space-around': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+            },
+        },
+        'row-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [10, 80],
+                    'child2': [0, 80],
+                },
+                'flex-end': {
+                    'child1': [10, 0],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [10, 80],
+                    'child2': [0, 80],
+                },
+                'space-around': {
+                    'child1': [10, 40],
+                    'child2': [0, 40],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [10, -40],
+                    'child2': [0, -10],
+                },
+                'flex-end': {
+                    'child1': [10, 40],
+                    'child2': [0, 70],
+                },
+                'center': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [10, -40],
+                    'child2': [0, -10],
+                },
+                'space-around': {
+                    'child1': [10, 0],
+                    'child2': [0, 30],
+                },
+            },
+        },
+        'column-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [-40, 0],
+                    'child2': [-10, 0],
+                },
+                'flex-end': {
+                    'child1': [40, 0],
+                    'child2': [70, 0],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [-40, 0],
+                    'child2': [-10, 0],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [30, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [-40, 10],
+                    'child2': [-10, 0],
+                },
+                'flex-end': {
+                    'child1': [40, 10],
+                    'child2': [70, 0],
+                },
+                'center': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+                'space-between': {
+                    'child1': [-40, 10],
+                    'child2': [-10, 0],
+                },
+                'space-around': {
+                    'child1': [0, 10],
+                    'child2': [30, 0],
+                },
+            },
+        },
+    },
+    'vertical-lr': {
+        'row': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [0, 80],
+                    'child2': [0, 80],
+                },
+                'center': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [0, 40],
+                    'child2': [0, 70],
+                },
+                'flex-end': {
+                    'child1': [0, -40],
+                    'child2': [0, -10],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [0, 40],
+                    'child2': [0, 70],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+            },
+        },
+        'column': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [80, 0],
+                    'child2': [80, 0],
+                },
+                'center': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [0, 10],
+                    'child2': [0, 0],
+                },
+                'flex-end': {
+                    'child1': [80, 10],
+                    'child2': [80, 0],
+                },
+                'center': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [0, 10],
+                    'child2': [0, 0],
+                },
+                'space-around': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+            },
+        },
+        'row-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [0, 80],
+                    'child2': [0, 80],
+                },
+                'flex-end': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+                'space-between': {
+                    'child1': [0, 80],
+                    'child2': [0, 80],
+                },
+                'space-around': {
+                    'child1': [0, 40],
+                    'child2': [0, 40],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [0, -40],
+                    'child2': [0, -10],
+                },
+                'flex-end': {
+                    'child1': [0, 40],
+                    'child2': [0, 70],
+                },
+                'center': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+                'space-between': {
+                    'child1': [0, -40],
+                    'child2': [0, -10],
+                },
+                'space-around': {
+                    'child1': [0, 0],
+                    'child2': [0, 30],
+                },
+            },
+        },
+        'column-reverse': {
+            'ltr': {
+                'flex-start': {
+                    'child1': [80, 0],
+                    'child2': [80, 0],
+                },
+                'flex-end': {
+                    'child1': [0, 0],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [80, 0],
+                    'child2': [80, 0],
+                },
+                'space-around': {
+                    'child1': [40, 0],
+                    'child2': [40, 0],
+                },
+            },
+            'rtl': {
+                'flex-start': {
+                    'child1': [80, 10],
+                    'child2': [80, 0],
+                },
+                'flex-end': {
+                    'child1': [0, 10],
+                    'child2': [0, 0],
+                },
+                'center': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+                'space-between': {
+                    'child1': [80, 10],
+                    'child2': [80, 0],
+                },
+                'space-around': {
+                    'child1': [40, 10],
+                    'child2': [40, 0],
+                },
+            },
+        },
+    },
+};
+
+var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
+var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
+var directions = ['ltr', 'rtl'];
+var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];
+
+function mainAxisDirection(writingMode, flexDirection)
+{
+    if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
+        || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
+        return 'width';
+    return 'height';
+}
+
+function addChild(flexbox, mainAxis, crossAxis, mainAxisLength, crossAxisLength, expectations)
+{
+    var child = document.createElement('div');
+    child.setAttribute('style', mainAxis + ': ' + mainAxisLength + 'px;'
+        + crossAxis + ': ' + crossAxisLength + 'px; position: absolute;');
+
+    child.setAttribute("data-expected-" + mainAxis, mainAxisLength);
+    child.setAttribute("data-expected-" + crossAxis, crossAxisLength);
+    child.setAttribute("data-offset-x", expectations[0]);
+    child.setAttribute("data-offset-y", expectations[1]);
+
+    flexbox.appendChild(child);
+}
+
+writingModes.forEach(function(writingMode) {
+    flexDirections.forEach(function(flexDirection) {
+        directions.forEach(function(direction) {
+            justifyContents.forEach(function(justifyContent) {
+                var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent;
+                var title = document.createElement('div');
+                title.className = 'title';
+                title.innerHTML = flexboxClassName;
+                document.body.appendChild(title);
+
+                var mainAxis = mainAxisDirection(writingMode, flexDirection);
+                var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
+
+                var flexbox = document.createElement('div');
+                flexbox.className = 'flexbox ' + flexboxClassName;
+                flexbox.setAttribute('style', mainAxis + ': 80px;' + crossAxis + ': 20px');
+
+                var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px' : '-webkit-margin-start: 5px';
+
+                var testExpectations = expectations[writingMode][flexDirection][direction][justifyContent];
+                addChild(flexbox, mainAxis, crossAxis, 40, 10, testExpectations['child1']);
+                addChild(flexbox, mainAxis, crossAxis, 10, 20, testExpectations['child2']);
+
+                document.body.appendChild(flexbox);
+            })
+        })
+    })
+})
+
+</script>
+
+</body>
index ceda78c..3d3589e 100644 (file)
@@ -1,3 +1,29 @@
+2012-09-20  Tony Chang  <tony@chromium.org>
+
+        Implement absolutely positioned flex items
+        https://bugs.webkit.org/show_bug.cgi?id=93798
+
+        Reviewed by Ojan Vafai.
+
+        Previously, we treated absolutely positioned flex items as a 0x0 placeholder element.
+        Now we position the 0x0 placeholder where the next item would go. This causes the
+        following changes:
+        - justify-content: space-{around,between} no longer change due to the existence of absolutely positioned flex items.
+        - alignment doesn't change the placement of absolutely positioned flex items.
+        - auto margins in the alignment direction don't do anything on absolutely positioned flex items.
+
+        Test: css3/flexbox/position-absolute-children.html
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Absolutely positioned flex items should not use this.
+        (WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): Absolutely positioned flex items should not use this.
+        (WebCore::initialJustifyContentOffset): If there are no flex items, space-around should center an absolutely positioned flex item.
+        (WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Helper method for helping to compute space-between and space-around.
+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Fix spacing when space-between or space-around.
+        (WebCore::RenderFlexibleBox::layoutColumnReverse): Fix spacing when space-between or space-around.
+        (WebCore::RenderFlexibleBox::alignChildren): Treat absolutely positioned children like flex-start.
+        * rendering/RenderFlexibleBox.h: numberOfInFlowPositionedChildren method.
+
 2012-09-20  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed, rolling out r129144.
index 1417690..abc73dd 100644 (file)
@@ -689,14 +689,15 @@ bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(RenderBox* child)
 
 LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
 {
-    LayoutUnit childCrossExtent = 0;
-    if (!child->isOutOfFlowPositioned())
-        childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
+    ASSERT(!child->isOutOfFlowPositioned());
+    LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
     return lineCrossAxisExtent - childCrossExtent;
 }
 
 bool RenderFlexibleBox::updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace)
 {
+    ASSERT(!child->isOutOfFlowPositioned());
+
     bool isHorizontal = isHorizontalFlow();
     Length start = isHorizontal ? child->style()->marginTop() : child->style()->marginLeft();
     Length end = isHorizontal ? child->style()->marginBottom() : child->style()->marginRight();
@@ -899,7 +900,7 @@ static LayoutUnit initialJustifyContentOffset(LayoutUnit availableFreeSpace, EJu
     if (justifyContent == JustifySpaceAround) {
         if (availableFreeSpace > 0 && numberOfChildren)
             return availableFreeSpace / (2 * numberOfChildren);
-        if (availableFreeSpace < 0)
+        else
             return availableFreeSpace / 2;
     }
     return 0;
@@ -958,25 +959,37 @@ static EAlignItems alignmentForChild(RenderBox* child)
     return align;
 }
 
+size_t RenderFlexibleBox::numberOfInFlowPositionedChildren(const OrderedFlexItemList& children) const
+{
+    size_t count = 0;
+    for (size_t i = 0; i < children.size(); ++i) {
+        RenderBox* child = children[i];
+        if (!child->isOutOfFlowPositioned())
+            ++count;
+    }
+    return count;
+}
+
 void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>& lineContexts)
 {
     ASSERT(childSizes.size() == children.size());
 
+    size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
     LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
     LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
-    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());
+    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
     if (style()->flexDirection() == FlowRowReverse)
         mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
 
     LayoutUnit totalMainExtent = mainAxisExtent();
     LayoutUnit maxAscent = 0, maxDescent = 0; // Used when align-items: baseline.
     LayoutUnit maxChildCrossAxisExtent = 0;
+    size_t seenInFlowPositionedChildren = 0;
     bool shouldFlipMainAxis = !isColumnFlow() && !isLeftToRightFlow();
     for (size_t i = 0; i < children.size(); ++i) {
         RenderBox* child = children[i];
         if (child->isOutOfFlowPositioned()) {
             prepareChildForPositionedLayout(child, mainAxisOffset, crossAxisOffset, FlipForRowReverse);
-            mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
             continue;
         }
         LayoutUnit childPreferredSize = childSizes[i] + mainAxisBorderAndPaddingExtentForChild(child);
@@ -1012,7 +1025,9 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
         setFlowAwareLocationForChild(child, childLocation);
         mainAxisOffset += childMainExtent + flowAwareMarginEndForChild(child);
 
-        mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
+        ++seenInFlowPositionedChildren;
+        if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
+            mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
     }
 
     if (isColumnFlow())
@@ -1022,27 +1037,28 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
         // We have to do an extra pass for column-reverse to reposition the flex items since the start depends
         // on the height of the flexbox, which we only know after we've positioned all the flex items.
         updateLogicalHeight();
-        layoutColumnReverse(children, childSizes, crossAxisOffset, availableFreeSpace);
+        layoutColumnReverse(children, crossAxisOffset, availableFreeSpace);
     }
 
     lineContexts.append(LineContext(crossAxisOffset, maxChildCrossAxisExtent, children.size(), maxAscent));
     crossAxisOffset += maxChildCrossAxisExtent;
 }
 
-void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
+void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
 {
     // This is similar to the logic in layoutAndPlaceChildren, except we place the children
     // starting from the end of the flexbox. We also don't need to layout anything since we're
     // just moving the children to a new position.
+    size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
     LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
-    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());
+    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
     mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
 
+    size_t seenInFlowPositionedChildren = 0;
     for (size_t i = 0; i < children.size(); ++i) {
         RenderBox* child = children[i];
         if (child->isOutOfFlowPositioned()) {
             child->layer()->setStaticBlockPosition(mainAxisOffset);
-            mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
             continue;
         }
         mainAxisOffset -= mainAxisExtentForChild(child) + flowAwareMarginEndForChild(child);
@@ -1053,7 +1069,10 @@ void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children,
             child->repaintDuringLayoutIfMoved(oldRect);
 
         mainAxisOffset -= flowAwareMarginStartForChild(child);
-        mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
+
+        ++seenInFlowPositionedChildren;
+        if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
+            mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
     }
 }
 
@@ -1141,6 +1160,12 @@ void RenderFlexibleBox::alignChildren(OrderIterator& iterator, const WTF::Vector
 
         for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) {
             ASSERT(child);
+            if (child->isOutOfFlowPositioned()) {
+                if (style()->flexWrap() == FlexWrapReverse)
+                    adjustAlignmentForChild(child, lineCrossAxisExtent);
+                continue;
+            }
+
             if (updateAutoMarginsInCrossAxis(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child)))
                 continue;
 
index 7533c58..fafa8be 100644 (file)
@@ -130,8 +130,9 @@ private:
 
     void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize);
     void prepareChildForPositionedLayout(RenderBox* child, LayoutUnit mainAxisOffset, LayoutUnit crossAxisOffset, PositionedLayoutMode);
+    size_t numberOfInFlowPositionedChildren(const OrderedFlexItemList&) const;
     void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>&);
-    void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
+    void layoutColumnReverse(const OrderedFlexItemList&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
     void alignFlexLines(OrderIterator&, WTF::Vector<LineContext>&);
     void alignChildren(OrderIterator&, const WTF::Vector<LineContext>&);
     void applyStretchAlignmentToChild(RenderBox*, LayoutUnit lineCrossAxisExtent);