[CSS Grid Layout] overflow-position keyword for align and justify properties.
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 May 2015 01:14:20 +0000 (01:14 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 May 2015 01:14:20 +0000 (01:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=144235

Reviewed by Sergio Villar Senin.

Source/WebCore:

When the alignment subject is larger than the alignment container,
it will overflow. Some alignment modes, if honored in this
situation, may cause data loss; an overflow alignment mode can be
explicitly specified to avoid this.

This patch implements overflow-keyword handling for Grid Layout on
align-self and justify-self properties.

Test: fast/css-grid-layout/grid-align-justify-overflow.html

* rendering/RenderGrid.cpp:
(WebCore::computeOverflowAlignmentOffset):
(WebCore::RenderGrid::rowPositionForChild):
(WebCore::RenderGrid::columnPositionForChild):
(WebCore::RenderGrid::rowAxisPositionForChild): Deleted.
* rendering/style/RenderStyle.cpp:
(WebCore::resolveAlignmentData):
(WebCore::resolveJustificationData):
(WebCore::RenderStyle::resolveAlignment):
(WebCore::RenderStyle::resolveAlignmentOverflow):
(WebCore::RenderStyle::resolveJustification):
(WebCore::RenderStyle::resolveJustificationOverflow):
* rendering/style/RenderStyle.h:

LayoutTests:

Implementation of overflow-keyword handling for Grid Layout on
align-self and justify-self properties.

* fast/css-grid-layout/grid-align-justify-overflow-expected.txt: Added.
* fast/css-grid-layout/grid-align-justify-overflow.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-align-justify-overflow-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h

index 691413b..675ac61 100644 (file)
@@ -1,3 +1,16 @@
+2015-04-30  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] overflow-position keyword for align and justify properties.
+        https://bugs.webkit.org/show_bug.cgi?id=144235
+
+        Reviewed by Sergio Villar Senin.
+
+        Implementation of overflow-keyword handling for Grid Layout on
+        align-self and justify-self properties.
+
+        * fast/css-grid-layout/grid-align-justify-overflow-expected.txt: Added.
+        * fast/css-grid-layout/grid-align-justify-overflow.html: Added.
+
 2015-04-30  Jon Davis  <jond@apple.com>
 
         Web Inspector: console should show an icon for console.info() messages
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow-expected.txt b/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow-expected.txt
new file mode 100644 (file)
index 0000000..ee761ee
--- /dev/null
@@ -0,0 +1,10 @@
+This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html b/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html
new file mode 100644 (file)
index 0000000..755087e
--- /dev/null
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+    margin: 0;
+}
+.grid {
+    -webkit-grid-template-columns: 150px 150px;
+    -webkit-grid-template-rows: 120px 120px 120px;
+    width: -webkit-fit-content;
+    margin-bottom: 20px;
+}
+.cellOverflowWidth {
+    width: 180px;
+    height: 40px;
+}
+.cellOverflowHeight {
+    width: 50px;
+    height: 150px;
+}
+.cellWithNoOverflow {
+    width: 50px;
+    height: 40px;
+}
+.alignItemsCenter { align-items: center; }
+.alignItemsCenterSafe { align-items: center safe; }
+.alignItemsCenterTrue { align-items: center true; }
+.alignItemsEnd { align-items: end; }
+.alignItemsEndSafe { align-items: end safe; }
+.alignItemsEndTrue { align-items: end true; }
+.alignSelfCenter { align-self: center; }
+.alignSelfCenterSafe { align-self: center safe; }
+.alignSelfCenterTrue { align-self: center true; }
+.alignSelfEnd { align-self: end; }
+.alignSelfEndSafe { align-self: end safe; }
+.alignSelfEndTrue { align-self: end true; }
+.justifyItemsCenter { justify-items: center; }
+.justifyItemsCenterSafe { justify-items: center safe; }
+.justifyItemsCenterTrue { justify-items: center true; }
+.justifyItemsEnd { justify-items: end; }
+.justifyItemsEndSafe { justify-items: end safe; }
+.justifyItemsEndTrue { justify-items: end true; }
+.justifySelfCenter { justify-self: center; }
+.justifySelfCenterSafe { justify-self: center safe; }
+.justifySelfCenterTrue { justify-self: center true; }
+.justifySelfEnd { justify-self: end; }
+.thirdRowFirstColumn {
+    background-color: green;
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 3;
+}
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+    <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="135" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid alignItemsCenterTrue justifyItemsCenterTrue" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="120" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid alignItemsEndTrue justifyItemsEndTrue" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterTrue" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterTrue" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
+</html>
index cb96edb..2e41167 100644 (file)
@@ -1,3 +1,34 @@
+2015-04-30  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] overflow-position keyword for align and justify properties.
+        https://bugs.webkit.org/show_bug.cgi?id=144235
+
+        Reviewed by Sergio Villar Senin.
+
+        When the alignment subject is larger than the alignment container,
+        it will overflow. Some alignment modes, if honored in this
+        situation, may cause data loss; an overflow alignment mode can be
+        explicitly specified to avoid this.
+
+        This patch implements overflow-keyword handling for Grid Layout on
+        align-self and justify-self properties.
+
+        Test: fast/css-grid-layout/grid-align-justify-overflow.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::computeOverflowAlignmentOffset):
+        (WebCore::RenderGrid::rowPositionForChild):
+        (WebCore::RenderGrid::columnPositionForChild):
+        (WebCore::RenderGrid::rowAxisPositionForChild): Deleted.
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::resolveAlignmentData):
+        (WebCore::resolveJustificationData):
+        (WebCore::RenderStyle::resolveAlignment):
+        (WebCore::RenderStyle::resolveAlignmentOverflow):
+        (WebCore::RenderStyle::resolveJustification):
+        (WebCore::RenderStyle::resolveJustificationOverflow):
+        * rendering/style/RenderStyle.h:
+
 2015-04-30  Jon Honeycutt  <jhoneycutt@apple.com>
 
         Rebaseline bindings tests results after r183648.
index 6733cb8..38a1a85 100644 (file)
@@ -1238,6 +1238,26 @@ void RenderGrid::populateGridPositions(const GridSizingData& sizingData)
         m_rowPositions[i + 1] = m_rowPositions[i] + sizingData.rowTracks[i].baseSize();
 }
 
+static inline LayoutUnit computeOverflowAlignmentOffset(OverflowAlignment overflow, LayoutUnit trackBreadth, LayoutUnit childBreadth)
+{
+    LayoutUnit offset = trackBreadth - childBreadth;
+    switch (overflow) {
+    case OverflowAlignmentSafe:
+        // If overflow is 'safe', we have to make sure we don't overflow the 'start'
+        // edge (potentially cause some data loss as the overflow is unreachable).
+        return std::max<LayoutUnit>(0, offset);
+    case OverflowAlignmentTrue:
+    case OverflowAlignmentDefault:
+        // If we overflow our alignment container and overflow is 'true' (default), we
+        // ignore the overflow and just return the value regardless (which may cause data
+        // loss as we overflow the 'start' edge).
+        return offset;
+    }
+
+    ASSERT_NOT_REACHED();
+    return 0;
+}
+
 bool RenderGrid::allowedToStretchLogicalHeightForChild(const RenderBox& child) const
 {
     return child.style().logicalHeight().isAuto() && !child.style().marginBeforeUsing(&style()).isAuto() && !child.style().marginAfterUsing(&style()).isAuto();
@@ -1385,8 +1405,7 @@ LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
     LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
     LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
     LayoutUnit startPosition = startOfRow + marginBeforeForChild(child);
-    // FIXME: This should account for the grid item's <overflow-position>.
-    LayoutUnit offsetFromStartPosition = endOfRow - startOfRow - child.logicalHeight() - child.marginLogicalHeight();
+    LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, child.logicalHeight() + child.marginLogicalHeight());
 
     switch (columnAxisPositionForChild(child)) {
     case GridAxisStart:
@@ -1408,8 +1427,7 @@ LayoutUnit RenderGrid::columnPositionForChild(const RenderBox& child) const
     LayoutUnit startOfColumn = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()];
     LayoutUnit endOfColumn = m_columnPositions[coordinate.columns.resolvedFinalPosition.next().toInt()];
     LayoutUnit startPosition = startOfColumn + marginStartForChild(child);
-    // FIXME: This should account for the grid item's <overflow-position>.
-    LayoutUnit offsetFromStartPosition = endOfColumn - startOfColumn - child.logicalWidth() - child.marginLogicalWidth();
+    LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, child.logicalWidth() + child.marginLogicalWidth());
 
     switch (rowAxisPositionForChild(child)) {
     case GridAxisStart:
index e73f929..96c4a09 100644 (file)
@@ -39,6 +39,7 @@
 #include "StyleInheritedData.h"
 #include "StyleResolver.h"
 #include "StyleScrollSnapPoints.h"
+#include "StyleSelfAlignmentData.h"
 #include <wtf/MathExtras.h>
 #include <wtf/StdLibExtras.h>
 #include <algorithm>
@@ -171,19 +172,40 @@ ALWAYS_INLINE RenderStyle::RenderStyle(const RenderStyle& o)
 {
 }
 
-ItemPosition RenderStyle::resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
+static inline StyleSelfAlignmentData resolveAlignmentData(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
 {
     // The auto keyword computes to the parent's align-items computed value, or to "stretch", if not set or "auto".
     if (childStyle.alignSelfPosition() == ItemPositionAuto)
-        return (parentStyle.alignItemsPosition() == ItemPositionAuto) ? resolvedAutoPositionForRenderer : parentStyle.alignItemsPosition();
-    return childStyle.alignSelfPosition();
+        return (parentStyle.alignItemsPosition() == ItemPositionAuto) ? StyleSelfAlignmentData(resolvedAutoPositionForRenderer, OverflowAlignmentDefault) : parentStyle.alignItems();
+    return childStyle.alignSelf();
 }
 
-ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForLayoutObject)
+static inline StyleSelfAlignmentData resolveJustificationData(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
 {
+    // The auto keyword computes to the parent's justify-items computed value, or to "stretch", if not set or "auto".
     if (childStyle.justifySelfPosition() == ItemPositionAuto)
-        return (parentStyle.justifyItemsPosition() == ItemPositionAuto) ? resolvedAutoPositionForLayoutObject : parentStyle.justifyItemsPosition();
-    return childStyle.justifySelfPosition();
+        return (parentStyle.justifyItemsPosition() == ItemPositionAuto) ? StyleSelfAlignmentData(resolvedAutoPositionForRenderer, OverflowAlignmentDefault) : parentStyle.justifyItems();
+    return childStyle.justifySelf();
+}
+
+ItemPosition RenderStyle::resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
+{
+    return resolveAlignmentData(parentStyle, childStyle, resolvedAutoPositionForRenderer).position();
+}
+
+OverflowAlignment RenderStyle::resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)
+{
+    return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();
+}
+
+ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
+{
+    return resolveJustificationData(parentStyle, childStyle, resolvedAutoPositionForRenderer).position();
+}
+
+OverflowAlignment RenderStyle::resolveJustificationOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)
+{
+    return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();
 }
 
 void RenderStyle::inheritFrom(const RenderStyle* inheritParent, IsAtShadowBoundary isAtShadowBoundary)
index 8bbd51a..51d3cb1 100644 (file)
@@ -492,7 +492,9 @@ public:
     static Ref<RenderStyle> createStyleInheritingFromPseudoStyle(const RenderStyle& pseudoStyle);
 
     static ItemPosition resolveAlignment(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
-    static ItemPosition resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForLayoutObject);
+    static OverflowAlignment resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle);
+    static ItemPosition resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer);
+    static OverflowAlignment resolveJustificationOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle);
 
     enum IsAtShadowBoundary {
         AtShadowBoundary,