[GridNG] Fixed size child positioning and dump tests

This change implements basic positioning and layout of grid children.
It also allows for creation of NGGridLayoutAlgorithm from Blink outside
of unit tests, so we now render actual grid content in Chromium for
grids with fixed size rows and columns!

There is still quite a bit of missing functionality, including for
positioning in non-fixed sizes, grid-gap, etc, which will be covered
in subsequent changes.

This also includes some helper methods for dump tests, along with our
first dump test for GridNG.

A known limitation of this change is that there must be enough defined
rows and columns for child elements. This will no longer be an issue
once we handle the TODO comments regarding auto repeaters. For now,
I've added additional row/column definitions to the existing tests to
avoid this limitation.

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

third_party/blink/renderer/core/layout/layout_block_flow.cc

@@ -4331,7 +4331,7 @@ DISABLE_CFI_PERF
 bool LayoutBlockFlow::CreatesNewFormattingContext() const {
   if (IsInline() || IsFloatingOrOutOfFlowPositioned() ||
       HasNonVisibleOverflow() || IsFlexItemIncludingDeprecatedAndNG() ||
-      IsCustomItem() || IsDocumentElement() || IsGridItem() ||
+      IsCustomItem() || IsDocumentElement() || IsGridItemIncludingNG() ||
       IsWritingModeRoot() || IsMathItem() ||
       StyleRef().Display() == EDisplay::kFlowRoot ||
       ShouldApplyPaintContainment() || ShouldApplyLayoutContainment() ||

third_party/blink/renderer/core/layout/layout_box.h

@@ -1403,6 +1403,10 @@ class CORE_EXPORT LayoutBox : public LayoutBoxModelObject {
     return !IsInline() && !IsOutOfFlowPositioned() && Parent();
   }
 
+  bool IsGridItemIncludingNG() const {
+    return IsGridItem() || (Parent() && Parent()->IsLayoutNGGrid());
+  }
+
   bool IsGridItem() const { return Parent() && Parent()->IsLayoutGrid(); }
 
   bool IsMathItem() const { return Parent() && Parent()->IsMathML(); }

third_party/blink/renderer/core/layout/layout_object.h

@@ -677,6 +677,7 @@ class CORE_EXPORT LayoutObject : public ImageResourceObserver,
   bool IsLayoutNGFlexibleBox() const {
     return IsOfType(kLayoutObjectNGFlexibleBox);
   }
+  bool IsLayoutNGGrid() const { return IsOfType(kLayoutObjectNGGrid); }
   bool IsLayoutNGMixin() const { return IsOfType(kLayoutObjectNGMixin); }
   bool IsLayoutNGListItem() const { return IsOfType(kLayoutObjectNGListItem); }
   bool IsLayoutNGInsideListMarker() const {

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

@@ -11,7 +11,14 @@ namespace {
 
 TEST_F(NGLayoutTest, TestNGGridChildIterator) {
   SetBodyInnerHTML(R"HTML(
-    <div id="parent" style="display: grid">
+    <style>
+    #parent {
+      display: grid;
+      grid-template-columns: 10px 10px;
+      grid-template-rows: 10px 10px;
+    }
+    </style>
+    <div id="parent">
       <div id="child1">Child 1</div>
       <div id="child2">Child 2</div>
       <div id="child3">Child 3</div>
@@ -38,7 +45,14 @@ TEST_F(NGLayoutTest, TestNGGridChildIterator) {
 
 TEST_F(NGLayoutTest, TestNGGridChildIteratorWithOrderReversed) {
   SetBodyInnerHTML(R"HTML(
-    <div id="parent" style="display: grid">
+    <style>
+    #parent {
+      display: grid;
+      grid-template-columns: 10px 10px;
+      grid-template-rows: 10px 10px;
+    }
+    </style>
+    <div id="parent">
       <div id="child1" style="order: 4">Child 1</div>
       <div id="child2" style="order: 3">Child 2</div>
       <div id="child3" style="order: 2">Child 3</div>
@@ -66,7 +80,14 @@ TEST_F(NGLayoutTest, TestNGGridChildIteratorWithOrderReversed) {
 
 TEST_F(NGLayoutTest, TestNGGridChildIteratorWithOrderMixed) {
   SetBodyInnerHTML(R"HTML(
-    <div id="parent" style="display: grid">
+    <style>
+    #parent {
+      display: grid;
+      grid-template-columns: 10px 10px;
+      grid-template-rows: 10px 10px;
+    }
+    </style>
+    <div id="parent"">
       <div id="child1" style="order: 3">Child 1</div>
       <div id="child2" style="order: 3">Child 2</div>
       <div id="child3" style="order: -1">Child 3</div>

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

@@ -7,6 +7,7 @@
 #include "third_party/blink/renderer/core/layout/ng/grid/ng_grid_child_iterator.h"
 #include "third_party/blink/renderer/core/layout/ng/ng_constraint_space_builder.h"
 #include "third_party/blink/renderer/core/layout/ng/ng_length_utils.h"
+#include "third_party/blink/renderer/core/layout/ng/ng_out_of_flow_layout_part.h"
 #include "third_party/blink/renderer/core/style/grid_positions_resolver.h"
 
 namespace blink {
@@ -57,6 +58,11 @@ scoped_refptr<const NGLayoutResult> NGGridLayoutAlgorithm::Layout() {
 
       case GridLayoutAlgorithmState::kResolvingBlockSize:
         ComputeUsedTrackSizes(GridTrackSizingDirection::kForRows);
+        state_ = GridLayoutAlgorithmState::kPlacingGridItems;
+        break;
+
+      case GridLayoutAlgorithmState::kPlacingGridItems:
+        PlaceGridItems();
         state_ = GridLayoutAlgorithmState::kCompletedLayout;
         break;
 
@@ -65,6 +71,10 @@ scoped_refptr<const NGLayoutResult> NGGridLayoutAlgorithm::Layout() {
         break;
     }
   }
+
+  // TODO(kschmi): Calculate correct block-size.
+  container_builder_.SetFragmentsTotalBlockSize(LayoutUnit());
+  NGOutOfFlowLayoutPart(Node(), ConstraintSpace(), &container_builder_).Run();
   return container_builder_.ToBoxFragment();
 }
 
@@ -162,7 +172,11 @@ NGConstraintSpace NGGridLayoutAlgorithm::BuildSpaceForGridItem(
 void NGGridLayoutAlgorithm::SetSpecifiedTracks() {
   const ComputedStyle& grid_style = Style();
   // TODO(kschmi): Auto track repeat count should be based on the number of
-  // children, rather than specified auto-column/track.
+  // children, rather than specified auto-column/track. Temporarily assign them
+  // to zero here to avoid DCHECK's until we implement this logic.
+  automatic_column_repetitions_ = 0;
+  automatic_row_repetitions_ = 0;
+
   // TODO(janewman): We need to implement calculation for track auto repeat
   // count so this can be used outside of testing.
   block_column_track_collection_.SetSpecifiedTracks(
@@ -284,10 +298,80 @@ void NGGridLayoutAlgorithm::SetAutomaticTrackRepetitionsForTesting(
   automatic_column_repetitions_ = auto_column;
   automatic_row_repetitions_ = auto_row;
 }
+
 wtf_size_t NGGridLayoutAlgorithm::AutoRepeatCountForDirection(
     GridTrackSizingDirection direction) const {
   return (direction == kForColumns) ? automatic_column_repetitions_
                                     : automatic_row_repetitions_;
 }
 
+void NGGridLayoutAlgorithm::PlaceGridItems() {
+  NGGridChildIterator iterator(Node());
+  LayoutUnit current_inline_offset, current_block_offset;
+
+  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();
+    current_inline_offset = LayoutUnit();
+
+    for (auto column_set_iterator =
+             TrackCollection(kForColumns).GetSetIterator();
+         !column_set_iterator.IsAtEnd(); column_set_iterator.MoveToNextSet()) {
+      LayoutUnit column_base_size = column_set_iterator.CurrentSet().BaseSize();
+
+      const NGBlockNode child_node = iterator.NextChild();
+      if (!child_node)
+        return;  // TODO(kschmi): DCHECK when auto rows/columns are implemented.
+
+      if (child_node.IsOutOfFlowPositioned()) {
+        // TODO(kschmi): Pass correct static positioned offset in.
+        container_builder_.AddOutOfFlowChildCandidate(child_node,
+                                                      LogicalOffset());
+        continue;
+      }
+
+      // Layout child nodes based on constraint space from grid row/column
+      // definitions and the inline and block offsets being accumulated.
+      NGConstraintSpaceBuilder space_builder(
+          ConstraintSpace(), child_node.Style().GetWritingMode(),
+          /* is_new_fc */ true);
+      space_builder.SetIsPaintedAtomically(true);
+      space_builder.SetAvailableSize(
+          LogicalSize(column_base_size, row_base_size));
+      space_builder.SetPercentageResolutionSize(
+          LogicalSize(column_base_size, row_base_size));
+      space_builder.SetTextDirection(child_node.Style().Direction());
+      space_builder.SetIsShrinkToFit(
+          child_node.Style().LogicalWidth().IsAuto());
+      NGConstraintSpace constraint_space = space_builder.ToConstraintSpace();
+      scoped_refptr<const NGLayoutResult> result =
+          child_node.Layout(constraint_space);
+
+      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_block_offset += row_base_size;
+  }
+
+  // TODO(kschmi): There should not be any remaining children, as grid auto
+  // rows and columns should be expanded to handle all children. However, as
+  // that functionality isn't implemented yet, it is currently possible to
+  // have more children than available rows and columns. For now, place these
+  // children at (0, 0). This should be turned into an assert that no children
+  // remain in the iterator after the above loops have completed iterating over
+  // rows and columns.
+  while (const NGBlockNode child_node = iterator.NextChild()) {
+    NGConstraintSpace constraint_space = BuildSpaceForGridItem(child_node);
+    scoped_refptr<const NGLayoutResult> result =
+        child_node.Layout(constraint_space);
+    container_builder_.AddChild(result->PhysicalFragment(),
+                                {LayoutUnit(), LayoutUnit()});
+  }
+}
+
 }  // namespace blink

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

@@ -35,6 +35,7 @@ class CORE_EXPORT NGGridLayoutAlgorithm
     kMeasuringItems,
     kResolvingInlineSize,
     kResolvingBlockSize,
+    kPlacingGridItems,
     kCompletedLayout
   };
 
@@ -69,6 +70,9 @@ class CORE_EXPORT NGGridLayoutAlgorithm
   wtf_size_t AutoRepeatCountForDirection(
       GridTrackSizingDirection direction) const;
 
+  // Lays out and computes inline and block offsets for grid items.
+  void PlaceGridItems();
+
   Vector<GridItemData> items_;
   GridLayoutAlgorithmState state_;
   LogicalSize child_percentage_size_;

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

@@ -5,6 +5,7 @@
 #include "third_party/blink/renderer/core/layout/ng/grid/ng_grid_layout_algorithm.h"
 #include "third_party/blink/renderer/core/layout/ng/ng_base_layout_algorithm_test.h"
 #include "third_party/blink/renderer/core/layout/ng/ng_length_utils.h"
+#include "third_party/blink/renderer/core/layout/ng/ng_physical_box_fragment.h"
 #include "third_party/blink/renderer/platform/testing/runtime_enabled_features_test_helpers.h"
 
 namespace blink {
@@ -103,6 +104,31 @@ class NGGridLayoutAlgorithmTest
     return growth_limits;
   }
 
+  scoped_refptr<const NGPhysicalBoxFragment> RunBlockLayoutAlgorithm(
+      Element* element) {
+    NGBlockNode container(ToLayoutBox(element->GetLayoutObject()));
+    NGConstraintSpace space = ConstructBlockLayoutTestConstraintSpace(
+        WritingMode::kHorizontalTb, TextDirection::kLtr,
+        LogicalSize(LayoutUnit(1000), kIndefiniteSize),
+        /* shrink_to_fit */ false,
+        /* is_new_formatting_context */ true);
+    return NGBaseLayoutAlgorithmTest::RunBlockLayoutAlgorithm(container, space);
+  }
+
+  String DumpFragmentTree(Element* element) {
+    auto fragment = RunBlockLayoutAlgorithm(element);
+    return DumpFragmentTree(fragment.get());
+  }
+
+  String DumpFragmentTree(const blink::NGPhysicalBoxFragment* fragment) {
+    NGPhysicalFragment::DumpFlags flags =
+        NGPhysicalFragment::DumpHeaderText | NGPhysicalFragment::DumpSubtree |
+        NGPhysicalFragment::DumpIndentation | NGPhysicalFragment::DumpOffset |
+        NGPhysicalFragment::DumpSize;
+
+    return fragment->DumpFragmentTree(flags);
+  }
+
   scoped_refptr<ComputedStyle> style_;
 };
 
@@ -343,8 +369,8 @@ TEST_F(NGGridLayoutAlgorithmTest, NGGridLayoutAlgorithmRangesWithAutoRepeater) {
     <style>
     #grid1 {
       display: grid;
-      grid-template-columns: 5px repeat(auto-fit, 150px) repeat(3, 10px);
-      grid-template-rows: repeat(20, 100px);
+      grid-template-columns: 5px repeat(auto-fit, 150px) repeat(3, 10px) 10px 10px;
+      grid-template-rows: repeat(20, 100px) 10px 10px;
     }
     </style>
     <div id="grid1">
@@ -373,6 +399,11 @@ TEST_F(NGGridLayoutAlgorithmTest, NGGridLayoutAlgorithmRangesWithAutoRepeater) {
   NGGridTrackCollectionBase::RangeRepeatIterator row_iterator(
       &algorithm.RowTrackCollection(), 0u);
   EXPECT_RANGE(0u, 20u, row_iterator);
+  EXPECT_TRUE(row_iterator.MoveToNextRange());
+
+  EXPECT_RANGE(20u, 1u, row_iterator);
+  EXPECT_TRUE(row_iterator.MoveToNextRange());
+  EXPECT_RANGE(21u, 1u, row_iterator);
   EXPECT_FALSE(row_iterator.MoveToNextRange());
 
   NGGridTrackCollectionBase::RangeRepeatIterator column_iterator(
@@ -381,10 +412,13 @@ TEST_F(NGGridLayoutAlgorithmTest, NGGridLayoutAlgorithmRangesWithAutoRepeater) {
   EXPECT_RANGE(0u, 1u, column_iterator);
   EXPECT_TRUE(column_iterator.MoveToNextRange());
 
-  EXPECT_COLLAPSED_RANGE(1u, 3u, column_iterator);
+  EXPECT_RANGE(1u, 3u, column_iterator);
+  EXPECT_TRUE(column_iterator.MoveToNextRange());
+
+  EXPECT_RANGE(4u, 1u, column_iterator);
   EXPECT_TRUE(column_iterator.MoveToNextRange());
 
-  EXPECT_RANGE(4u, 3u, column_iterator);
+  EXPECT_RANGE(5u, 1u, column_iterator);
   EXPECT_FALSE(column_iterator.MoveToNextRange());
 }
 
@@ -582,4 +616,53 @@ TEST_F(NGGridLayoutAlgorithmTest, NGGridLayoutAlgorithmResolveFixedTrackSizes) {
     EXPECT_EQ(expected_row_growth_limits[i], growth_limits[i]);
 }
 
+TEST_F(NGGridLayoutAlgorithmTest, FixedSizePositioning) {
+  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_item {
+        width: 100px;
+        height: 100px;
+        background-color: gray;
+      }
+
+    </style>
+    <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>
+  )HTML");
+  String dump = DumpFragmentTree(GetElementById("grid"));
+
+  String expectation = R"DUMP(.:: LayoutNG Physical Fragment Tree ::.
+  offset:unplaced size:200x200
+    offset:0,0 size:100x100
+      offset:0,0 size:10x10
+    offset:0,100 size:100x100
+      offset:0,0 size:10x10
+    offset:0,200 size:100x100
+      offset:0,0 size:10x10
+    offset:0,300 size:100x100
+      offset:0,0 size:10x10
+)DUMP";
+  EXPECT_EQ(expectation, dump);
+}
+
 }  // namespace blink

third_party/blink/renderer/core/layout/ng/ng_block_node.cc

@@ -26,6 +26,7 @@
 #include "third_party/blink/renderer/core/layout/ng/custom/ng_custom_layout_algorithm.h"
 #include "third_party/blink/renderer/core/layout/ng/flex/ng_flex_layout_algorithm.h"
 #include "third_party/blink/renderer/core/layout/ng/geometry/ng_fragment_geometry.h"
+#include "third_party/blink/renderer/core/layout/ng/grid/ng_grid_layout_algorithm.h"
 #include "third_party/blink/renderer/core/layout/ng/inline/ng_inline_cursor.h"
 #include "third_party/blink/renderer/core/layout/ng/inline/ng_inline_node.h"
 #include "third_party/blink/renderer/core/layout/ng/legacy_layout_tree_walking.h"
@@ -155,6 +156,9 @@ NOINLINE void DetermineAlgorithmAndRun(const NGLayoutAlgorithmParams& params,
     CreateAlgorithmAndRun<NGCustomLayoutAlgorithm>(params, callback);
   } else if (box.IsMathML()) {
     DetermineMathMLAlgorithmAndRun(box, params, callback);
+  } else if (box.IsLayoutNGGrid() &&
+             RuntimeEnabledFeatures::LayoutNGGridEnabled()) {
+    CreateAlgorithmAndRun<NGGridLayoutAlgorithm>(params, callback);
   } else if (box.IsLayoutNGFieldset()) {
     CreateAlgorithmAndRun<NGFieldsetLayoutAlgorithm>(params, callback);
     // If there's a legacy layout box, we can only do block fragmentation if