[CSS Grid Layout] Fix auto-placement algorithm

In RenderGrid::placeAutoMajorAxisItemOnGrid if the empty grid area does
not fit in the minor axis direction we should discard it. That way we 
will avoid to grow in that direction at this moment, as this was 
previously done at RenderGrid::populateExplicitGridAndOrderIterator().

A simple use case to reproduce the problem would be a 2x2 grid with
grid-auto-flow property set to "row", where the only empty cell is at
row 2 and column 2. If you try to place an item with the following
properties:
    grid-row: auto;
    grid-column: span 2;

It should be inserted in a new row, however before this patch it was
inserted at row 2 using columns 2 and 3. As even when the empty grid
area does not fit in the minor axis direction, it was still being used
later to insert the item.

Updated layout test to include similar cases that don't work without
this patch.

BUG=353789
TEST=fast/css-grid-layout/grid-item-auto-placement-automatic-span.html

Review URL: https://codereview.chromium.org/314993002

git-svn-id: svn://svn.chromium.org/blink/trunk@175886 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt

@@ -6,3 +6,5 @@ PASS
 PASS
 PASS
 PASS
+PASS
+PASS

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html

@@ -90,6 +90,23 @@
     </div>
 </div>
 
+<div style="position: relative">
+    <div class="grid gridAutoFlowRow">
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="250" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="300" data-expected-width="300" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="250" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="0" data-offset-y="350" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
 <div style="position: relative">
     <div class="grid gridAutoFlowRow">
         <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
@@ -135,6 +152,23 @@
     </div>
 </div>
 
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumn">
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="600" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="500" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="700" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
 <div style="position: relative">
     <div class="grid gridAutoFlowColumn">
         <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>

third_party/WebKit/Source/core/rendering/RenderGrid.cpp

@@ -928,6 +928,10 @@ void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
                 const size_t endOfMinorAxis = autoPlacementMinorAxisDirection() == ForColumns ? gridColumnCount() : gridRowCount();
                 if (minorAxisFinalPositionIndex.toInt() < endOfMinorAxis)
                     break;
+
+                // Discard empty grid area as it does not fit in the minor axis direction.
+                // We don't need to create a new empty grid area yet as we might find a valid one in the next iteration.
+                emptyGridArea = nullptr;
             }
         }