[css-grid] Treat 'auto' as 0px when compute non-laid out item's margins

We must treat any 'auto' margin as 0px during the tracks sizing algorithm, as the CSS Grid spec states: - https://drafts.csswg.org/css-grid/#auto-margins Additionally, we have an utility function to compute the grid item's margins when the item still needs to layout. We used the function CommputedStyle::hasMarings to decide whether such margin computation worths. However, we need that function to operate on a specific axis, hence I added a new function adding such logic. Bug: 788471 Change-Id: I5d4e4fc435aa1ffea0003a9a88cfd7a3c1bca114 Reviewed-on: https://chromium-review.googlesource.com/789830 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#519673}

[css-grid] Treat 'auto' as 0px when compute non-laid out item's margins
We must treat any 'auto' margin as 0px during the tracks sizing algorithm, as the CSS Grid spec states: - https://drafts.csswg.org/css-grid/#auto-margins Additionally, we have an utility function to compute the grid item's margins when the item still needs to layout. We used the function CommputedStyle::hasMarings to decide whether such margin computation worths. However, we need that function to operate on a specific axis, hence I added a new function adding such logic. Bug: 788471 Change-Id: I5d4e4fc435aa1ffea0003a9a88cfd7a3c1bca114 Reviewed-on: https://chromium-review.googlesource.com/789830 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#519673}
534ecb7b · Javier Fernandez · Commit Bot · 6c24932c · 534ecb7b · 534ecb7b
Commit 534ecb7b authored Nov 28, 2017 by Javier Fernandez Committed by Commit Bot Nov 28, 2017
3 changed files
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/auto-margins-ignored-during-track-sizing-expected.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/auto-margins-ignored-during-track-sizing-expected.html
+<!DOCTYPE html>
+<style>
+body { overflow: hidden; }
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.margin { margin-top: 10px; }
+.center { justify-self: center; }
+.i1 { background: magenta;  }
+.i2 { background: cyan; }
+.i3 { background: yellow; }
+.i4 { background: lime; }
+</style>
+<p>This test pass if the 3 items in the first row have the same size filling the whole viewport's width and the item in the second row is centered in the first column.<p>
+<div class="grid">
+  <div class="i1">
+    In a few questions, you will get an expert-designed investment portfolio to fit your financial needs.
+  </div>
+  <div class="i2">
+    Open and fund your account with 10,000 or more and we will put your money to work.
+  </div>
+  <div class="i3">
+    We will take it from here, monitoring your portfolio daily to help keep it on track.
+  </div>
+  <div class="i4 margin center">Learn More</a>
+</div>
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/auto-margins-ignored-during-track-sizing.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/auto-margins-ignored-during-track-sizing.html
+<!DOCTYPE html>
+<link rel="match" href="auto-margins-ignored-during-track-sizing-expected.html">
+<style>
+body { overflow: hidden; }
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.margin-center {
+  margin-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.i1 { background: magenta;  }
+.i2 { background: cyan; }
+.i3 { background: yellow; }
+.i4 { background: lime; }
+</style>
+<p>This test pass if the 3 items in the first row have the same size filling the whole viewport's width and the item in the second row is centered in the first column.<p>
+<div class="grid">
+  <div class="i1">
+    In a few questions, you will get an expert-designed investment portfolio to fit your financial needs.
+  </div>
+  <div class="i2">
+    Open and fund your account with 10,000 or more and we will put your money to work.
+  </div>
+  <div class="i3">
+    We will take it from here, monitoring your portfolio daily to help keep it on track.
+  </div>
+  <div class="i4 margin-center">Learn More</a>
+</div>
--- a/third_party/WebKit/Source/core/layout/GridLayoutUtils.cpp
+++ b/third_party/WebKit/Source/core/layout/GridLayoutUtils.cpp
@@ -8,14 +8,40 @@

 namespace blink {

+static inline bool MarginStartIsAuto(const LayoutBox& child,
+                                     GridTrackSizingDirection direction) {
+  return direction == kForColumns ? child.StyleRef().MarginStart().IsAuto()
+                                  : child.StyleRef().MarginBefore().IsAuto();
+}
+
+static inline bool MarginEndIsAuto(const LayoutBox& child,
+                                   GridTrackSizingDirection direction) {
+  return direction == kForColumns ? child.StyleRef().MarginEnd().IsAuto()
+                                  : child.StyleRef().MarginAfter().IsAuto();
+}
+
+static bool ChildHasMargin(const LayoutBox& child,
+                           GridTrackSizingDirection direction) {
+  // Length::IsZero returns true for 'auto' margins, which is aligned with the
+  // purpose of this function.
+  if (direction == kForColumns) {
+    return !child.StyleRef().MarginStart().IsZero() ||
+           !child.StyleRef().MarginEnd().IsZero();
+  }
+  return !child.StyleRef().MarginBefore().IsZero() ||
+         !child.StyleRef().MarginAfter().IsZero();
+}
+
 static LayoutUnit ComputeMarginLogicalSizeForChild(
    const LayoutGrid& grid,
    MarginDirection for_direction,
    const LayoutBox& child) {
-  if (!child.StyleRef().HasMargin())
+  bool is_inline_direction = for_direction == kInlineDirection;
+  GridTrackSizingDirection direction =
+      is_inline_direction ? kForColumns : kForRows;
+  if (!ChildHasMargin(child, direction))
    return LayoutUnit();

-  bool is_inline_direction = for_direction == kInlineDirection;
  LayoutUnit margin_start;
  LayoutUnit margin_end;
  LayoutUnit logical_size =
@@ -31,7 +57,10 @@ static LayoutUnit ComputeMarginLogicalSizeForChild(
      logical_size, margin_start, margin_end, margin_start_length,
      margin_end_length);

-  return margin_start + margin_end;
+  return MarginStartIsAuto(child, direction)
+             ? margin_end
+             : MarginEndIsAuto(child, direction) ? margin_start
+                                                 : margin_start + margin_end;
 }

 LayoutUnit GridLayoutUtils::MarginLogicalWidthForChild(const LayoutGrid& grid,