auto margins on flexbox should allocate space in the flex direction
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 May 2012 04:08:40 +0000 (04:08 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 May 2012 04:08:40 +0000 (04:08 +0000)
https://bugs.webkit.org/show_bug.cgi?id=83086

Reviewed by Ojan Vafai.

Source/WebCore:

Test: css3/flexbox/flex-flow-auto-margins.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis):
(WebCore):
(WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Update the margins on the RenderBox *after* we do the final child layout.
* rendering/RenderFlexibleBox.h:

LayoutTests:

* css3/flexbox/flex-algorithm-with-margins-expected.txt:
* css3/flexbox/flex-algorithm-with-margins.html: Added safe centering test case.
* css3/flexbox/flex-flow-auto-margins-expected.txt: Added.
* css3/flexbox/flex-flow-auto-margins.html: Added.
* css3/flexbox/flex-pack.html: Fixed old results.

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

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt
LayoutTests/css3/flexbox/flex-algorithm-with-margins.html
LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt [new file with mode: 0644]
LayoutTests/css3/flexbox/flex-flow-auto-margins.html [new file with mode: 0644]
LayoutTests/css3/flexbox/flex-pack.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index fa3a5d9..425783d 100644 (file)
@@ -1,3 +1,16 @@
+2012-05-21  Tony Chang  <tony@chromium.org>
+
+        auto margins on flexbox should allocate space in the flex direction
+        https://bugs.webkit.org/show_bug.cgi?id=83086
+
+        Reviewed by Ojan Vafai.
+
+        * css3/flexbox/flex-algorithm-with-margins-expected.txt:
+        * css3/flexbox/flex-algorithm-with-margins.html: Added safe centering test case.
+        * css3/flexbox/flex-flow-auto-margins-expected.txt: Added.
+        * css3/flexbox/flex-flow-auto-margins.html: Added.
+        * css3/flexbox/flex-pack.html: Fixed old results.
+
 2012-05-21  Abhishek Arya  <inferno@chromium.org>
 
         Unreviewed. Rebaseline for r117865.
index de58cfc..e117468 100644 (file)
@@ -43,7 +43,7 @@ if (window.layoutTestController)
   <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
 </div>
 
-<!-- Margins set to auto have a value of 0. -->
+<!-- Margins set to auto get space only if there's space available after flexing. -->
 <div class="flexbox">
   <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
   <div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto;"></div>
@@ -51,21 +51,25 @@ if (window.layoutTestController)
 </div>
 
 <div class="flexbox">
-  <div data-expected-width="133" style="-webkit-flex: 1 0 0;"></div>
-  <div data-expected-width="233" data-offset-x="133" style="-webkit-flex: 1 0 100px; margin-left: auto;"></div>
-  <div data-expected-width="133" data-offset-x="366" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
+  <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
+  <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 2 0 100px; margin-left: auto;"></div>
+  <div data-expected-width="100" data-offset-x="400" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
 </div>
 
-<!-- Margins set to auto don't have negative flex either. -->
+<!-- Margins set to auto don't have negative flex. -->
 <div class="flexbox">
   <div data-expected-width="150" style="-webkit-flex: 1 1 300px;"></div>
   <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
   <div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 300px;"></div>
 </div>
 
-<!-- Margins set to auto don't center in flexboxen. -->
 <div class="flexbox">
-  <div data-expected-width="300px" data-offset-x="0" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
+  <div data-expected-width="300px" data-offset-x="150" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
+</div>
+
+<!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. -->
+<div class="flexbox">
+  <div data-expected-width="700px" data-offset-x="0" style="-webkit-flex: 0 0 700px; margin: 0 auto;"></div>
 </div>
 
 <div class="flexbox">
diff --git a/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt b/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt
new file mode 100644 (file)
index 0000000..2653b22
--- /dev/null
@@ -0,0 +1,129 @@
+horizontal-tb ltr row physical
+PASS
+horizontal-tb rtl row physical
+PASS
+horizontal-tb ltr column physical
+PASS
+horizontal-tb rtl column physical
+PASS
+horizontal-tb ltr row-reverse physical
+PASS
+horizontal-tb rtl row-reverse physical
+PASS
+horizontal-tb ltr row-reverse physical
+PASS
+horizontal-tb rtl row-reverse physical
+PASS
+horizontal-bt ltr row physical
+PASS
+horizontal-bt rtl row physical
+PASS
+horizontal-bt ltr column physical
+PASS
+horizontal-bt rtl column physical
+PASS
+horizontal-bt ltr row-reverse physical
+PASS
+horizontal-bt rtl row-reverse physical
+PASS
+horizontal-bt ltr row-reverse physical
+PASS
+horizontal-bt rtl row-reverse physical
+PASS
+vertical-lr ltr row physical
+PASS
+vertical-lr rtl row physical
+PASS
+vertical-lr ltr column physical
+PASS
+vertical-lr rtl column physical
+PASS
+vertical-lr ltr row-reverse physical
+PASS
+vertical-lr rtl row-reverse physical
+PASS
+vertical-lr ltr row-reverse physical
+PASS
+vertical-lr rtl row-reverse physical
+PASS
+vertical-rl ltr row physical
+PASS
+vertical-rl rtl row physical
+PASS
+vertical-rl ltr column physical
+PASS
+vertical-rl rtl column physical
+PASS
+vertical-rl ltr row-reverse physical
+PASS
+vertical-rl rtl row-reverse physical
+PASS
+vertical-rl ltr row-reverse physical
+PASS
+vertical-rl rtl row-reverse physical
+PASS
+horizontal-tb ltr row logical
+PASS
+horizontal-tb rtl row logical
+PASS
+horizontal-tb ltr column logical
+PASS
+horizontal-tb rtl column logical
+PASS
+horizontal-tb ltr row-reverse logical
+PASS
+horizontal-tb rtl row-reverse logical
+PASS
+horizontal-tb ltr row-reverse logical
+PASS
+horizontal-tb rtl row-reverse logical
+PASS
+horizontal-bt ltr row logical
+PASS
+horizontal-bt rtl row logical
+PASS
+horizontal-bt ltr column logical
+PASS
+horizontal-bt rtl column logical
+PASS
+horizontal-bt ltr row-reverse logical
+PASS
+horizontal-bt rtl row-reverse logical
+PASS
+horizontal-bt ltr row-reverse logical
+PASS
+horizontal-bt rtl row-reverse logical
+PASS
+vertical-lr ltr row logical
+PASS
+vertical-lr rtl row logical
+PASS
+vertical-lr ltr column logical
+PASS
+vertical-lr rtl column logical
+PASS
+vertical-lr ltr row-reverse logical
+PASS
+vertical-lr rtl row-reverse logical
+PASS
+vertical-lr ltr row-reverse logical
+PASS
+vertical-lr rtl row-reverse logical
+PASS
+vertical-rl ltr row logical
+PASS
+vertical-rl rtl row logical
+PASS
+vertical-rl ltr column logical
+PASS
+vertical-rl rtl column logical
+PASS
+vertical-rl ltr row-reverse logical
+PASS
+vertical-rl rtl row-reverse logical
+PASS
+vertical-rl ltr row-reverse logical
+PASS
+vertical-rl rtl row-reverse logical
+PASS
+
diff --git a/LayoutTests/css3/flexbox/flex-flow-auto-margins.html b/LayoutTests/css3/flexbox/flex-flow-auto-margins.html
new file mode 100644 (file)
index 0000000..5c349e8
--- /dev/null
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html>
+<style>
+.container {
+    position: relative;
+    background-color: pink;
+    outline: 1px solid black;
+    display: inline-block;
+}
+.flexbox {
+    display: -webkit-flex;
+    background-color: grey;
+    width: 100px;
+    height: 100px;
+}
+.title {
+    margin-top: 1em;
+}
+.ltr {
+    direction: ltr;
+}
+.rtl {
+    direction: rtl;
+}
+.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;
+}
+.physical {
+    margin: 10px 20px 30px 40px;
+}
+.physical > div {
+    margin: 13px auto 17px auto;
+}
+.logical {
+    -webkit-margin-before: 10px;
+    -webkit-margin-after: 30px;
+    -webkit-margin-start: 40px;
+    -webkit-margin-end: 20px;
+}
+.logical > div {
+    -webkit-margin-before: auto;
+    -webkit-margin-after: 17px;
+    -webkit-margin-start: auto;
+    -webkit-margin-end: 2px;
+}
+.flexbox > :nth-child(1) {
+    background-color: blue;
+}
+.flexbox > :nth-child(2) {
+    background-color: green;
+}
+.flexbox > :nth-child(3) {
+    background-color: red;
+}
+</style>
+<script>
+if (window.layoutTestController)
+    layoutTestController.dumpAsText();
+</script>
+<script src="resources/flexbox.js"></script>
+<body onload="checkFlexBoxen()">
+
+<script>
+function positionAsString(position)
+{
+    return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
+}
+
+function asString(expectations)
+{
+    return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
+}
+
+var physicalContainerSize = [160, 140];
+var physicalFlexBoxPosition = [40, 10];
+
+var physicalExpectations = {
+    'horizontal-tb': {
+        rtl: {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 23],
+            row: [20, 20, 80, 23],
+            'column-reverse': [20, 20, 80, 23],
+            'row-reverse': [20, 20, 80, 23],
+        },
+        ltr : {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 23],
+            row: [20, 20, 80, 23],
+            'column-reverse': [20, 20, 80, 23],
+            'row-reverse': [20, 20, 80, 23],
+        }
+    },
+    'horizontal-bt': {
+        rtl: {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 73],
+            row: [20, 20, 80, 73],
+            'column-reverse': [20, 20, 80, 73],
+            'row-reverse': [20, 20, 80, 73],
+        },
+        ltr : {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 73],
+            row: [20, 20, 80, 73],
+            'column-reverse': [20, 20, 80, 73],
+            'row-reverse': [20, 20, 80, 73],
+        }
+    },
+    'vertical-lr': {
+        rtl: {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 73],
+            row: [20, 20, 40, 73],
+            'column-reverse': [20, 20, 40, 73],
+            'row-reverse': [20, 20, 40, 23],
+        },
+        ltr : {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 23],
+            row: [20, 20, 40, 23],
+            'column-reverse': [20, 20, 40, 23],
+            'row-reverse': [20, 20, 40, 73],
+        }
+    },
+    'vertical-rl': {
+        rtl: {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 73],
+            row: [20, 20, 120, 73],
+            'column-reverse': [20, 20, 48, 73],
+            'row-reverse': [20, 20, 120, 23],
+        },
+        ltr : {
+            container: physicalContainerSize,
+            flexbox: physicalFlexBoxPosition,
+            column: [20, 20, 80, 23],
+            row: [20, 20, 120, 23],
+            'column-reverse': [20, 20, 48, 23],
+            'row-reverse': [20, 20, 120, 73],
+        }
+    }
+}
+
+var logicalExpectations = {
+    'horizontal-tb': {
+        rtl: {
+            container: [160, 140],
+            flexbox: [20, 10],
+            column: [20, 20, 22, 73],
+            row: [20, 20, 22, 10],
+            'column-reverse': [20, 20, 92, 10],
+            'row-reverse': [20, 20, 22, 10],
+        },
+        ltr : {
+            container: [160, 140],
+            flexbox: [40, 10],
+            column: [20, 20, 118, 73],
+            row: [20, 20, 118, 10],
+            'column-reverse': [20, 20, 48, 10],
+            'row-reverse': [20, 20, 118, 10],
+        }
+    },
+    'horizontal-bt': {
+        rtl: {
+            container: [160, 140],
+            flexbox: [20, 30],
+            column: [20, 20, 22, 47],
+            row: [20, 20, 22, 110],
+            'column-reverse': [20, 20, 92, 47],
+            'row-reverse': [20, 20, 22, 110],
+        },
+        ltr : {
+            container: [160, 140],
+            flexbox: [40, 30],
+            column: [20, 20, 118, 47],
+            row: [20, 20, 118, 110],
+            'column-reverse': [20, 20, 48, 47],
+            'row-reverse': [20, 20, 118, 110],
+        }
+    },
+    'vertical-lr': {
+        rtl: {
+            container: [140, 160],
+            flexbox: [10, 20],
+            column: [20, 20, 73, 22],
+            row: [20, 20, 10, 22],
+            'column-reverse': [20, 20, 23, 92],
+            'row-reverse': [20, 20, 10, 22],
+        },
+        ltr : {
+            container: [140, 160],
+            flexbox: [10, 40],
+            column: [20, 20, 73, 118],
+            row: [20, 20, 10, 118],
+            'column-reverse': [20, 20, 23, 48],
+            'row-reverse': [20, 20, 10, 118],
+        }
+    },
+    'vertical-rl': {
+        rtl: {
+            container: [140, 160],
+            flexbox: [30, 20],
+            column: [20, 20, 47, 22],
+            row: [20, 20, 110, 22],
+            'column-reverse': [20, 20, 47, 92],
+            'row-reverse': [20, 20, 110, 22],
+        },
+        ltr : {
+            container: [140, 160],
+            flexbox: [30, 40],
+            column: [20, 20, 47, 118],
+            row: [20, 20, 110, 118],
+            'column-reverse': [20, 20, 47, 48],
+            'row-reverse': [20, 20, 110, 118],
+        }
+    }
+}
+
+var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
+var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];
+var directions = ['ltr', 'rtl'];
+var marginTypes = ['physical', 'logical'];
+
+marginTypes.forEach(function(marginType) {
+    writingModes.forEach(function(writingMode) {
+        flexFlows.forEach(function(flexFlow) {
+            directions.forEach(function(direction) {
+                var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
+                var title = document.createElement('div');
+                title.className = 'title';
+                title.innerHTML = flexboxClassName;
+                document.body.appendChild(title);
+
+                var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
+                expectations = expectations[writingMode][direction];
+                var flexboxExpectations = positionAsString(expectations.flexbox);
+
+                var flexItemExpectations = asString(expectations[flexFlow]);
+
+                var container = document.createElement('div');
+                container.className = 'container';
+                container.setAttribute('data-expected-width', expectations.container[0]);
+                container.setAttribute('data-expected-height', expectations.container[1]);
+
+                container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
+                    '<div style="height: 20px; width: 20px;" ' + flexItemExpectations + '></div>\n' +
+                '</div>';
+
+                document.body.appendChild(container);
+            })
+        })
+    })
+})
+</script>
+</body>
+</html>
\ No newline at end of file
index f94384e..531fee6 100644 (file)
@@ -96,10 +96,10 @@ if (window.layoutTestController)
 <!-- Make sure we don't crash with no children. -->
 <div class="flexbox" style="-webkit-flex-pack: distribute"></div>
 
-<!-- margin:auto does nothing here. -->
+<!-- margin:auto applies before packing. -->
 <div class="flexbox" style="-webkit-flex-pack: end">
-  <div data-expected-width="100" data-offset-x="300" style="width: 100px;"></div>
-  <div data-expected-width="100" data-offset-x="400" style="width: 100px; margin-right: auto"></div>
+  <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
+  <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin-right: auto"></div>
   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
 </div>
 
index e26a884..9a889b2 100644 (file)
@@ -1,3 +1,19 @@
+2012-05-21  Tony Chang  <tony@chromium.org>
+
+        auto margins on flexbox should allocate space in the flex direction
+        https://bugs.webkit.org/show_bug.cgi?id=83086
+
+        Reviewed by Ojan Vafai.
+
+        Test: css3/flexbox/flex-flow-auto-margins.html
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis):
+        (WebCore):
+        (WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis):
+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Update the margins on the RenderBox *after* we do the final child layout.
+        * rendering/RenderFlexibleBox.h:
+
 2012-05-21  Gyuyoung Kim  <gyuyoung.kim@samsung.com>
 
         [EFL] Add inital mediaControlsEflfullscreen.css for fullscreen control UI
index efa2eb7..fd8c9ed 100644 (file)
@@ -642,6 +642,52 @@ void RenderFlexibleBox::layoutFlexItems(FlexOrderIterator& iterator, WTF::Vector
     }
 }
 
+LayoutUnit RenderFlexibleBox::autoMarginOffsetInMainAxis(const OrderedFlexItemList& children, LayoutUnit& availableFreeSpace)
+{
+    if (availableFreeSpace <= 0)
+        return 0;
+
+    int numberOfAutoMargins = 0;
+    bool isHorizontal = isHorizontalFlow();
+    for (size_t i = 0; i < children.size(); ++i) {
+        RenderBox* child = children[i];
+        if (child->isPositioned())
+            continue;
+        if (isHorizontal) {
+            if (child->style()->marginLeft().isAuto())
+                ++numberOfAutoMargins;
+            if (child->style()->marginRight().isAuto())
+                ++numberOfAutoMargins;
+        } else {
+            if (child->style()->marginTop().isAuto())
+                ++numberOfAutoMargins;
+            if (child->style()->marginBottom().isAuto())
+                ++numberOfAutoMargins;
+        }
+    }
+    if (!numberOfAutoMargins)
+        return 0;
+
+    LayoutUnit sizeOfAutoMargin = availableFreeSpace / numberOfAutoMargins;
+    availableFreeSpace = 0;
+    return sizeOfAutoMargin;
+}
+
+void RenderFlexibleBox::updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset)
+{
+    if (isHorizontalFlow()) {
+        if (child->style()->marginLeft().isAuto())
+            child->setMarginLeft(autoMarginOffset);
+        if (child->style()->marginRight().isAuto())
+            child->setMarginRight(autoMarginOffset);
+    } else {
+        if (child->style()->marginTop().isAuto())
+            child->setMarginTop(autoMarginOffset);
+        if (child->style()->marginBottom().isAuto())
+            child->setMarginBottom(autoMarginOffset);
+    }
+}
+
 LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
 {
     LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
@@ -673,9 +719,8 @@ void RenderFlexibleBox::computeMainAxisPreferredSizes(bool relayoutChildren, Fle
             child->layoutIfNeeded();
         }
 
-        // We set the margins because we want to make sure 'auto' has a margin
-        // of 0 and because if we're not auto sizing, we don't do a layout that
-        // computes the start/end margins.
+        // Before running the flex algorithm, 'auto' has a margin of 0.
+        // Also, if we're not auto sizing, we don't do a layout that computes the start/end margins.
         if (isHorizontalFlow()) {
             child->setMarginLeft(minimumValueForLength(child->style()->marginLeft(), flexboxAvailableContentExtent, renderView));
             child->setMarginRight(minimumValueForLength(child->style()->marginRight(), flexboxAvailableContentExtent, renderView));
@@ -881,6 +926,8 @@ static EFlexAlign flexAlignForChild(RenderBox* child)
 void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>& lineContexts)
 {
     ASSERT(childSizes.size() == children.size());
+
+    LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
     LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
     mainAxisOffset += initialPackingOffset(availableFreeSpace, style()->flexPack(), childSizes.size());
     if (style()->flexDirection() == FlowRowReverse)
@@ -902,6 +949,8 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
         child->setChildNeedsLayout(true);
         child->layoutIfNeeded();
 
+        updateAutoMarginsInMainAxis(child, autoMarginOffset);
+
         LayoutUnit childCrossAxisMarginBoxExtent;
         if (flexAlignForChild(child) == AlignBaseline) {
             LayoutUnit ascent = marginBoxAscentForChild(child);
index 6c21b04..4181411 100644 (file)
@@ -101,6 +101,8 @@ private:
     LayoutUnit preferredMainAxisContentExtentForChild(RenderBox* child) const;
 
     void layoutFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&);
+    LayoutUnit autoMarginOffsetInMainAxis(const OrderedFlexItemList&, LayoutUnit& availableFreeSpace);
+    void updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset);
     void repositionLogicalHeightDependentFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
 
     LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox*);