Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(813)

Unified Diff: Source/core/layout/LayoutGrid.cpp

Issue 1233983003: [CSS Grid Layout] Implement auto-margin alignment for grid (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@horizontal-stretch
Patch Set: Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « Source/core/layout/LayoutGrid.h ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/core/layout/LayoutGrid.cpp
diff --git a/Source/core/layout/LayoutGrid.cpp b/Source/core/layout/LayoutGrid.cpp
index a8a928d7173f648d46693679fbe4d72e522607a9..7a3eb7b91c0aa3f32d94094c717de1f8040d5ba6 100644
--- a/Source/core/layout/LayoutGrid.cpp
+++ b/Source/core/layout/LayoutGrid.cpp
@@ -1268,6 +1268,8 @@ void LayoutGrid::layoutGridItems()
SubtreeLayoutScope layoutScope(*child);
if (oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth || (oldOverrideContainingBlockContentLogicalHeight != overrideContainingBlockContentLogicalHeight && child->hasRelativeLogicalHeight()))
layoutScope.setNeedsLayout(child, LayoutInvalidationReason::GridChanged);
+ else
+ resetAutoMarginsAndLogicalTopInColumnAxis(*child);
child->setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
child->setOverrideContainingBlockContentLogicalHeight(overrideContainingBlockContentLogicalHeight);
@@ -1279,6 +1281,10 @@ void LayoutGrid::layoutGridItems()
child->layoutIfNeeded();
+ // We need pending layouts to be done in order to compute auto-margins properly.
+ updateAutoMarginsInColumnAxisIfNeeded(*child);
+ updateAutoMarginsInRowAxisIfNeeded(*child);
+
#if ENABLE(ASSERT)
const GridCoordinate& coordinate = cachedGridCoordinate(*child);
ASSERT(coordinate.columns.resolvedInitialPosition.toInt() < sizingData.columnTracks.size());
@@ -1585,6 +1591,109 @@ void LayoutGrid::applyStretchAlignmentToChildIfNeeded(LayoutBox& child)
}
}
+// TODO(lajava): This logic is shared by LayoutFlexibleBox, so it should be moved to LayoutBox.
+bool LayoutGrid::hasAutoMarginsInColumnAxis(const LayoutBox& child) const
+{
+ if (isHorizontalWritingMode())
+ return child.style()->marginTop().isAuto() || child.style()->marginBottom().isAuto();
+ return child.style()->marginLeft().isAuto() || child.style()->marginRight().isAuto();
+}
+
+// TODO(lajava): This logic is shared by LayoutFlexibleBox, so it should be moved to LayoutBox.
+bool LayoutGrid::hasAutoMarginsInRowAxis(const LayoutBox& child) const
+{
+ if (isHorizontalWritingMode())
+ return child.style()->marginLeft().isAuto() || child.style()->marginRight().isAuto();
+ return child.style()->marginTop().isAuto() || child.style()->marginBottom().isAuto();
+}
+
+// TODO(lajava): This logic is shared by LayoutFlexibleBox, so it should be moved to LayoutBox.
+void LayoutGrid::resetAutoMarginsAndLogicalTopInColumnAxis(LayoutBox& child)
+{
+ if (hasAutoMarginsInColumnAxis(child) || child.needsLayout()) {
+ child.clearOverrideLogicalContentHeight();
+ child.updateLogicalHeight();
+ if (isHorizontalWritingMode()) {
+ if (child.style()->marginTop().isAuto())
+ child.setMarginTop(0);
+ if (child.style()->marginBottom().isAuto())
+ child.setMarginBottom(0);
+ } else {
+ if (child.style()->marginLeft().isAuto())
+ child.setMarginLeft(0);
+ if (child.style()->marginRight().isAuto())
+ child.setMarginRight(0);
+ }
+
+ }
+}
+
+// TODO(lajava): This logic is shared by LayoutFlexibleBox, so it should be moved to LayoutBox.
+void LayoutGrid::updateAutoMarginsInRowAxisIfNeeded(LayoutBox& child)
+{
+ ASSERT(!child.isOutOfFlowPositioned());
+
+ LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalWidth() - child.logicalWidth();
+ if (availableAlignmentSpace <= 0)
+ return;
+
+ bool isHorizontal = isHorizontalWritingMode();
+ Length topOrLeft = isHorizontal ? child.style()->marginLeft() : child.style()->marginTop();
+ Length bottomOrRight = isHorizontal ? child.style()->marginRight() : child.style()->marginBottom();
+ if (topOrLeft.isAuto() && bottomOrRight.isAuto()) {
+ if (isHorizontal) {
+ child.setMarginLeft(availableAlignmentSpace / 2);
+ child.setMarginRight(availableAlignmentSpace / 2);
+ } else {
+ child.setMarginTop(availableAlignmentSpace / 2);
+ child.setMarginBottom(availableAlignmentSpace / 2);
+ }
+ } else if (topOrLeft.isAuto()) {
+ if (isHorizontal)
+ child.setMarginLeft(availableAlignmentSpace);
+ else
+ child.setMarginTop(availableAlignmentSpace);
+ } else if (bottomOrRight.isAuto()) {
+ if (isHorizontal)
+ child.setMarginRight(availableAlignmentSpace);
+ else
+ child.setMarginBottom(availableAlignmentSpace);
+ }
+}
+
+// TODO(lajava): This logic is shared by LayoutFlexibleBox, so it should be moved to LayoutBox.
+void LayoutGrid::updateAutoMarginsInColumnAxisIfNeeded(LayoutBox& child)
+{
+ ASSERT(!child.isOutOfFlowPositioned());
+
+ LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalHeight() - child.logicalHeight();
+ if (availableAlignmentSpace <= 0)
+ return;
+
+ bool isHorizontal = isHorizontalWritingMode();
+ Length topOrLeft = isHorizontal ? child.style()->marginTop() : child.style()->marginLeft();
+ Length bottomOrRight = isHorizontal ? child.style()->marginBottom() : child.style()->marginRight();
+ if (topOrLeft.isAuto() && bottomOrRight.isAuto()) {
+ if (isHorizontal) {
+ child.setMarginTop(availableAlignmentSpace / 2);
+ child.setMarginBottom(availableAlignmentSpace / 2);
+ } else {
+ child.setMarginLeft(availableAlignmentSpace / 2);
+ child.setMarginRight(availableAlignmentSpace / 2);
+ }
+ } else if (topOrLeft.isAuto()) {
+ if (isHorizontal)
+ child.setMarginTop(availableAlignmentSpace);
+ else
+ child.setMarginLeft(availableAlignmentSpace);
+ } else if (bottomOrRight.isAuto()) {
+ if (isHorizontal)
+ child.setMarginBottom(availableAlignmentSpace);
+ else
+ child.setMarginRight(availableAlignmentSpace);
+ }
+}
+
GridAxisPosition LayoutGrid::columnAxisPositionForChild(const LayoutBox& child) const
{
bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
@@ -1682,6 +1791,8 @@ LayoutUnit LayoutGrid::rowPositionForChild(const LayoutBox& child) const
const GridCoordinate& coordinate = cachedGridCoordinate(child);
LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
LayoutUnit startPosition = startOfRow + marginBeforeForChild(child);
+ if (hasAutoMarginsInColumnAxis(child))
+ return startPosition;
GridAxisPosition axisPosition = columnAxisPositionForChild(child);
switch (axisPosition) {
case GridAxisStart:
@@ -1703,6 +1814,8 @@ LayoutUnit LayoutGrid::columnPositionForChild(const LayoutBox& child) const
const GridCoordinate& coordinate = cachedGridCoordinate(child);
LayoutUnit startOfColumn = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()];
LayoutUnit startPosition = startOfColumn + marginStartForChild(child);
+ if (hasAutoMarginsInRowAxis(child))
+ return startPosition;
GridAxisPosition axisPosition = rowAxisPositionForChild(child);
switch (axisPosition) {
case GridAxisStart:
« no previous file with comments | « Source/core/layout/LayoutGrid.h ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698