[GridNG] Basic 'grid-gap', 'grid-column-gap' and 'grid-row-gap support

In this change the function GridGap() is implemented to get the row or
column gap of the grid. If the gap is not defined, then the function
returns 0. This result is added to the current_inline_offset and
current_block_offset. A unit test was also introduced to validate the
result.

Bug: 1045599
Change-Id: I7e1c86db5bb266131fa2bdc9720674794ac1edf8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2430486
Commit-Queue: Ana Sollano Kim <ansollan@microsoft.com>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811455}

third_party/blink/renderer/core/layout/ng/grid/ng_grid_layout_algorithm.cc

@@ -479,6 +479,9 @@ void NGGridLayoutAlgorithm::PlaceGridItems() {
   NGGridChildIterator iterator(Node());
   LayoutUnit current_inline_offset, current_block_offset;
 
+  LayoutUnit column_grid_gap = GridGap(GridTrackSizingDirection::kForColumns);
+  LayoutUnit row_grid_gap = GridGap(GridTrackSizingDirection::kForRows);
+
   for (auto row_set_iterator = TrackCollection(kForRows).GetSetIterator();
        !row_set_iterator.IsAtEnd(); row_set_iterator.MoveToNextSet()) {
     LayoutUnit row_base_size = row_set_iterator.CurrentSet().BaseSize();
@@ -520,12 +523,9 @@ void NGGridLayoutAlgorithm::PlaceGridItems() {
       container_builder_.AddChild(
           result->PhysicalFragment(),
           {current_inline_offset, current_block_offset});
-
-      // TODO(kschmi): row-gap and column-gap should be accounted for in
-      // inline and block positioning.
-      current_inline_offset += column_base_size;
+      current_inline_offset += column_base_size + column_grid_gap;
     }
-    current_block_offset += row_base_size;
+    current_block_offset += row_base_size + row_grid_gap;
   }
 
   // TODO(kschmi): There should not be any remaining children, as grid auto
@@ -544,4 +544,22 @@ void NGGridLayoutAlgorithm::PlaceGridItems() {
   }
 }
 
+LayoutUnit NGGridLayoutAlgorithm::GridGap(
+    GridTrackSizingDirection track_direction) {
+  const base::Optional<Length>& gap =
+      track_direction == kForColumns ? Style().ColumnGap() : Style().RowGap();
+  if (!gap)
+    return LayoutUnit();
+
+  LayoutUnit available_size = track_direction == kForColumns
+                                  ? ChildAvailableSize().inline_size
+                                  : ChildAvailableSize().block_size;
+
+  // TODO (ansollan): handle block axis % resolution for grid-gap with
+  // auto-sized grids.
+  if (gap->IsPercentOrCalc() && available_size == kIndefiniteSize)
+    return LayoutUnit();
+  return ValueForLength(*gap, available_size);
+}
+
 }  // namespace blink

third_party/blink/renderer/core/layout/ng/grid/ng_grid_layout_algorithm.h

@@ -120,6 +120,8 @@ class CORE_EXPORT NGGridLayoutAlgorithm
 
   // Lays out and computes inline and block offsets for grid items.
   void PlaceGridItems();
+  // Gets the row or column gap of the grid.
+  LayoutUnit GridGap(GridTrackSizingDirection track_direction);
 
   GridTrackSizingDirection AutoFlowDirection() const;
 

third_party/blink/renderer/core/layout/ng/grid/ng_grid_layout_algorithm_test.cc

@@ -1039,4 +1039,171 @@ TEST_F(NGGridLayoutAlgorithmTest, FixedSizePositioningAutoRows) {
   EXPECT_EQ(expectation, dump);
 }
 
+TEST_F(NGGridLayoutAlgorithmTest, GridWithGap) {
+  if (!RuntimeEnabledFeatures::LayoutNGGridEnabled())
+    return;
+
+  LoadAhem();
+  SetBodyInnerHTML(R"HTML(
+    <style>
+      body {
+        font: 10px/1 Ahem;
+      }
+
+      #grid {
+        display: grid;
+        width: 200px;
+        height: 200px;
+        grid-template-columns: 100px 100px;
+        grid-template-rows: 100px 100px;
+        grid-gap: 10px;
+      }
+
+      .grid_item {
+        width: 100px;
+        height: 100px;
+        background-color: gray;
+      }
+
+    </style>
+    <div id="wrapper">
+      <div id="grid">
+        <div class="grid_item">1</div>
+        <div class="grid_item">2</div>
+        <div class="grid_item">3</div>
+        <div class="grid_item">4</div>
+      </div>
+    </div>
+  )HTML");
+  String dump = DumpFragmentTree(GetElementById("wrapper"));
+
+  String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
+  offset:unplaced size:1000x200
+    offset:0,0 size:200x200
+      offset:0,0 size:100x100
+        offset:0,0 size:10x10
+      offset:110,0 size:100x100
+        offset:0,0 size:10x10
+      offset:0,110 size:100x100
+        offset:0,0 size:10x10
+      offset:110,110 size:100x100
+        offset:0,0 size:10x10
+)DUMP";
+  EXPECT_EQ(expectation, dump);
+}
+
+TEST_F(NGGridLayoutAlgorithmTest, GridWithPercentGap) {
+  if (!RuntimeEnabledFeatures::LayoutNGGridEnabled())
+    return;
+
+  LoadAhem();
+  SetBodyInnerHTML(R"HTML(
+    <style>
+      body {
+        font: 10px/1 Ahem;
+      }
+
+      #grid {
+        display: grid;
+        width: 100px;
+        height: 50px;
+        grid-column-gap: 50%;
+        grid-row-gap: 75%;
+        grid-template-columns: 100px 200px;
+        grid-template-rows: 100px 100px;
+      }
+      .grid-item-odd {
+        width: 100px;
+        height: 100px;
+        background: gray;
+      }
+      .grid-item-even {
+        width: 200px;
+        height: 100px;
+        background: green;
+      }
+    </style>
+    <div id="wrapper">
+      <div id="grid">
+        <div class="grid-item-odd">1</div>
+         <div class="grid-item-even">2</div>
+         <div class="grid-item-odd">3</div>
+         <div class="grid-item-even">4</div>
+     </div>
+    </div>
+  )HTML");
+  String dump = DumpFragmentTree(GetElementById("wrapper"));
+
+  String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
+  offset:unplaced size:1000x50
+    offset:0,0 size:100x50
+      offset:0,0 size:100x100
+        offset:0,0 size:10x10
+      offset:150,0 size:200x100
+        offset:0,0 size:10x10
+      offset:0,137.5 size:100x100
+        offset:0,0 size:10x10
+      offset:150,137.5 size:200x100
+        offset:0,0 size:10x10
+)DUMP";
+  EXPECT_EQ(expectation, dump);
+}
+
+TEST_F(NGGridLayoutAlgorithmTest, AutoSizedGridWithGap) {
+  if (!RuntimeEnabledFeatures::LayoutNGGridEnabled())
+    return;
+
+  LoadAhem();
+  SetBodyInnerHTML(R"HTML(
+    <style>
+      body {
+        font: 10px/1 Ahem;
+      }
+
+      #grid {
+        display: grid;
+        width: auto;
+        height: auto;
+        grid-column-gap: 50px;
+        grid-row-gap: 75px;
+        grid-template-columns: 100px 200px;
+        grid-template-rows: 100px 100px;
+      }
+      .grid-item-odd {
+        width: 100px;
+        height: 100px;
+        background: gray;
+      }
+      .grid-item-even {
+        width: 200px;
+        height: 100px;
+        background: green;
+      }
+    </style>
+    <div id="wrapper">
+      <div id="grid">
+        <div class="grid-item-odd">1</div>
+         <div class="grid-item-even">2</div>
+         <div class="grid-item-odd">3</div>
+         <div class="grid-item-even">4</div>
+     </div>
+    </div>
+  )HTML");
+  String dump = DumpFragmentTree(GetElementById("wrapper"));
+
+  String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
+  offset:unplaced size:1000x0
+    offset:0,0 size:1000x0
+      offset:0,0 size:100x100
+        offset:0,0 size:10x10
+      offset:150,0 size:200x100
+        offset:0,0 size:10x10
+      offset:0,175 size:100x100
+        offset:0,0 size:10x10
+      offset:150,175 size:200x100
+        offset:0,0 size:10x10
+)DUMP";
+  EXPECT_EQ(expectation, dump);
+}
+
 }  // namespace blink