[CSS Grid Layout] Support sparse in auto-placement algorithm
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Jul 2014 21:23:49 +0000 (21:23 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Jul 2014 21:23:49 +0000 (21:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134544

Reviewed by Sergio Villar Senin.

Source/WebCore:
This patch implements sparse mode for auto-placement algorithm, which is
the default mode in the new grid-auto-flow syntax. It keeps track of the
auto-placement cursor in
RenderGrid::placeAutoMajorAxisItemsOnGrid() and updates it accordingly
when auto-positioned items are placed.
If we're in dense mode it resets the cursor after each item (which keeps
the old behavior that was using dense mode by default).

GridIterator has been adapted to look for empty areas from a given
position in both directions.

Test: fast/css-grid-layout/grid-auto-flow-sparse.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::GridIterator::GridIterator): Modify constructor to
add an optional argument for the varying index. This allows to look for
empty areas in both axis.
(WebCore::RenderGrid::placeAutoMajorAxisItemsOnGrid): Defined the
auto-placement cursor and rested after each item if we're in dense mode.
(WebCore::RenderGrid::placeAutoMajorAxisItemOnGrid): Use auto-placement
cursor to look for empty areas from the last auto-positioned item
placed.
* rendering/RenderGrid.h: Modify placeAutoMajorAxisItemOnGrid() header
to receive the auto-placement cursor.

LayoutTests:
Test cases have been adapted accordingly, adding new cases to cover both
sparse and dense options.

* fast/css-grid-layout/grid-auto-flow-resolution-expected.txt:
* fast/css-grid-layout/grid-auto-flow-resolution.html:
* fast/css-grid-layout/grid-auto-flow-sparse-expected.txt: Added.
* fast/css-grid-layout/grid-auto-flow-sparse.html: Added.
* fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
* fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt:
* fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
* fast/css-grid-layout/grid-item-auto-placement-definite-span-expected.txt:
* fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
* fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
* fast/css-grid-layout/resources/grid.css:
(.autoRowAutoColumnSpanning2):
(.autoRowSpanning2AutoColumn):
(.autoRowSpanning2AutoColumnSpanning3):
(.autoRowSpanning3AutoColumnSpanning2):
(.gridAutoFlowColumnDense):
(.gridAutoFlowRowDense):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@171082 268f45cc-cd09-0410-ab3c-d52691b4dbfc

16 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution-expected.txt
LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html
LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html
LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html
LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
LayoutTests/fast/css-grid-layout/resources/grid.css
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index 7e3d953..05251d3 100644 (file)
@@ -1,3 +1,32 @@
+2014-07-14  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Support sparse in auto-placement algorithm
+        https://bugs.webkit.org/show_bug.cgi?id=134544
+
+        Reviewed by Sergio Villar Senin.
+
+        Test cases have been adapted accordingly, adding new cases to cover both
+        sparse and dense options.
+
+        * fast/css-grid-layout/grid-auto-flow-resolution-expected.txt:
+        * fast/css-grid-layout/grid-auto-flow-resolution.html:
+        * fast/css-grid-layout/grid-auto-flow-sparse-expected.txt: Added.
+        * fast/css-grid-layout/grid-auto-flow-sparse.html: Added.
+        * fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
+        * fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt:
+        * fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
+        * fast/css-grid-layout/grid-item-auto-placement-definite-span-expected.txt:
+        * fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
+        * fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
+        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
+        * fast/css-grid-layout/resources/grid.css:
+        (.autoRowAutoColumnSpanning2):
+        (.autoRowSpanning2AutoColumn):
+        (.autoRowSpanning2AutoColumnSpanning3):
+        (.autoRowSpanning3AutoColumnSpanning2):
+        (.gridAutoFlowColumnDense):
+        (.gridAutoFlowRowDense):
+
 2014-07-14  Bear Travis  <betravis@adobe.com>
 
         [Feature Queries] Enable Feature Queries on Mac
index c9d2143..6c22b11 100644 (file)
@@ -45,6 +45,18 @@ XXXXX XXXXX XXXXX
 PASS
 XXXXX XXXXX XXXXX
 XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
 PASS
 XXXXX XXXXX XXXXX
 XXXXX XXXXX XXXXX
index cde8f39..75acd24 100644 (file)
         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid bigGrid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150">XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid bigGrid gridAutoFlowRowDense">
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt b/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt
new file mode 100644 (file)
index 0000000..3541ccf
--- /dev/null
@@ -0,0 +1,6 @@
+This test checks that the auto-placement algorithm is sparse by default.
+
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html b/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html
new file mode 100644 (file)
index 0000000..8cc80f1
--- /dev/null
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    -webkit-grid-template-columns: 50px 100px 150px 200px;
+    -webkit-grid-template-rows: 50px 100px 150px 200px;
+}
+
+.unconstrainedContainer {
+    /* For accurate x / y offset. */
+    position: relative;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the auto-placement algorithm is sparse by default.</p>
+
+<div class="unconstrainedContainer">
+    <div class="grid">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid">
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-offset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height="350"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="200"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid gridAutoFlowColumn">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid gridAutoFlowColumn">
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="300" data-expected-width="100" data-expected-height="200"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-offset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height="450"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+    </div>
+</div>
+
+</body>
+</html>
index 9b2f206..1fb81b0 100644 (file)
@@ -5,7 +5,7 @@
 <script src="../../resources/check-layout.js"></script>
 <style type="text/css">
     .grid {
-       -webkit-grid-auto-flow: row;
+       -webkit-grid-auto-flow: row dense;
     }
 
     #firstGridItem {
index 6c2cf11..e3afa61 100644 (file)
     -webkit-grid-template-rows: 50px 100px (line) 200px (line);
 }
 
-.autoRowAutoColumnSpanning2 {
-    background-color: maroon;
-    -webkit-grid-column: span 2;
-    -webkit-grid-row: auto;
-}
-
 .autoRowAutoColumnSpanning3 {
     background-color: teal;
     -webkit-grid-column: span 3;
 </div>
 
 <div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" 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 autoRowSpanning2AutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="200" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="250" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="250" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="100" data-expected-height="50"></div>
+    </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="150" data-expected-width="100" 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 autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="250" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="300" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="350" data-expected-width="300" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="400" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="0" data-offset-y="450" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <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>
 
 <div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></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 autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="150" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
     <div class="grid gridAutoFlowRow gridNamedGridLinesColumns">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="100" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="50" data-offset-y="200" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="200" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="0" data-offset-y="250" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="50" data-offset-y="250" data-expected-width="100" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowDense gridNamedGridLinesColumns">
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 </div>
 
 <div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></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 autoRowSpanning2AutoColumnSpanning2" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="400" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="500" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="600" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+    </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="300" data-offset-y="50" data-expected-width="100" data-expected-height="50"></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 autoRowSpanning2AutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="600" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="700" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="800" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="900" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <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>
 
 <div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" 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 autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="200" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
     <div class="grid gridAutoFlowColumn gridNamedGridLinesRows">
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+        <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+        <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="400" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="400" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+        <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="500" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div-->
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense gridNamedGridLinesRows">
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
         <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
         <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
         <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
index 9fe5c0f..63f210a 100644 (file)
         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
     </div>
 </div>
 
 <div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
     <div class="grid gridAutoFlowColumn">
         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
         <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     </div>
     </div>
 </div>
 
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+    </div>
+</div>
+
 </body>
 </html>
index 095214a..6f39d40 100644 (file)
@@ -76,7 +76,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumnWithAutoItems">
+    <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItems">
         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
@@ -86,7 +86,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAutoAndFixedItems">
+    <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAutoAndFixedItems">
         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
index 5f3be6d..f66fee6 100644 (file)
 
 <!-- Check positioning using grid areas -->
 <div style="position: relative">
-  <div class="grid gridAreas gridNoLineNames">
+  <div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense">
     <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 
 <!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
 <div style="position: relative">
-  <div class="grid gridAreas gridWithNamedLineAfterGridArea">
+  <div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense">
     <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
index cf13d9e..aa78f23 100644 (file)
     -webkit-grid-row: auto;
 }
 
+.autoRowAutoColumnSpanning2 {
+    background-color: maroon;
+    -webkit-grid-column: span 2;
+    -webkit-grid-row: auto;
+}
+
+.autoRowSpanning2AutoColumn {
+    background-color: aqua;
+    -webkit-grid-column: auto;
+    -webkit-grid-row: span 2;
+}
+
+.autoRowSpanning2AutoColumnSpanning3 {
+    background-color: olive;
+    -webkit-grid-column: span 3;
+    -webkit-grid-row: span 2;
+}
+
+.autoRowSpanning3AutoColumnSpanning2 {
+    background-color: indigo;
+    -webkit-grid-column: span 2;
+    -webkit-grid-row: span 3;
+}
+
 /* Grid element flow. */
 .gridAutoFlowStack {
     -webkit-grid-auto-flow: stack;
     -webkit-grid-auto-flow: column;
 }
 
+.gridAutoFlowColumnDense {
+    -webkit-grid-auto-flow: column dense;
+}
+
 .gridAutoFlowRow {
     -webkit-grid-auto-flow: row;
 }
 
+.gridAutoFlowRowDense {
+    -webkit-grid-auto-flow: row dense;
+}
+
 /* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
 .constrainedContainer {
     width: 10px;
index cee8ac6..3931d0a 100644 (file)
@@ -1,3 +1,35 @@
+2014-07-14  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Support sparse in auto-placement algorithm
+        https://bugs.webkit.org/show_bug.cgi?id=134544
+
+        Reviewed by Sergio Villar Senin.
+
+        This patch implements sparse mode for auto-placement algorithm, which is
+        the default mode in the new grid-auto-flow syntax. It keeps track of the
+        auto-placement cursor in
+        RenderGrid::placeAutoMajorAxisItemsOnGrid() and updates it accordingly
+        when auto-positioned items are placed.
+        If we're in dense mode it resets the cursor after each item (which keeps
+        the old behavior that was using dense mode by default).
+
+        GridIterator has been adapted to look for empty areas from a given
+        position in both directions.
+
+        Test: fast/css-grid-layout/grid-auto-flow-sparse.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::GridIterator::GridIterator): Modify constructor to
+        add an optional argument for the varying index. This allows to look for
+        empty areas in both axis.
+        (WebCore::RenderGrid::placeAutoMajorAxisItemsOnGrid): Defined the
+        auto-placement cursor and rested after each item if we're in dense mode.
+        (WebCore::RenderGrid::placeAutoMajorAxisItemOnGrid): Use auto-placement
+        cursor to look for empty areas from the last auto-positioned item
+        placed.
+        * rendering/RenderGrid.h: Modify placeAutoMajorAxisItemOnGrid() header
+        to receive the auto-placement cursor.
+
 2014-07-14  Brent Fulgham  <bfulgham@apple.com>
 
         [iOS] Some videos play as inline audio-only content
index c9d4ec9..e758fe5 100644 (file)
@@ -89,11 +89,11 @@ class RenderGrid::GridIterator {
 public:
     // |direction| is the direction that is fixed to |fixedTrackIndex| so e.g
     // GridIterator(m_grid, ForColumns, 1) will walk over the rows of the 2nd column.
-    GridIterator(const Vector<Vector<Vector<RenderBox*, 1>>>& grid, GridTrackSizingDirection direction, size_t fixedTrackIndex)
+    GridIterator(const Vector<Vector<Vector<RenderBox*, 1>>>& grid, GridTrackSizingDirection direction, size_t fixedTrackIndex, size_t varyingTrackIndex = 0)
         : m_grid(grid)
         , m_direction(direction)
-        , m_rowIndex((direction == ForColumns) ? 0 : fixedTrackIndex)
-        , m_columnIndex((direction == ForColumns) ? fixedTrackIndex : 0)
+        , m_rowIndex((direction == ForColumns) ? varyingTrackIndex : fixedTrackIndex)
+        , m_columnIndex((direction == ForColumns) ? fixedTrackIndex : varyingTrackIndex)
         , m_childIndex(0)
     {
         ASSERT(m_rowIndex < m_grid.size());
@@ -756,27 +756,48 @@ void RenderGrid::placeSpecifiedMajorAxisItemsOnGrid(const Vector<RenderBox*>& au
 
 void RenderGrid::placeAutoMajorAxisItemsOnGrid(const Vector<RenderBox*>& autoGridItems)
 {
-    for (auto& autoGridItem : autoGridItems)
-        placeAutoMajorAxisItemOnGrid(autoGridItem);
+    AutoPlacementCursor autoPlacementCursor = {0, 0};
+    bool isGridAutoFlowDense = style().isGridAutoFlowAlgorithmDense();
+
+    for (auto& autoGridItem : autoGridItems) {
+        placeAutoMajorAxisItemOnGrid(autoGridItem, autoPlacementCursor);
+
+        if (isGridAutoFlowDense) {
+            autoPlacementCursor.first = 0;
+            autoPlacementCursor.second = 0;
+        }
+    }
 }
 
-void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
+void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem,
+AutoPlacementCursor& autoPlacementCursor)
 {
     std::unique_ptr<GridSpan> minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *gridItem, autoPlacementMinorAxisDirection());
     ASSERT(!GridResolvedPosition::resolveGridPositionsFromStyle(style(), *gridItem, autoPlacementMajorAxisDirection()));
     GridSpan majorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *gridItem, autoPlacementMajorAxisDirection(), GridResolvedPosition(0));
+
+    const size_t endOfMajorAxis = (autoPlacementMajorAxisDirection() == ForColumns) ? gridColumnCount() : gridRowCount();
+    size_t majorAxisAutoPlacementCursor = autoPlacementMajorAxisDirection() == ForColumns ? autoPlacementCursor.second : autoPlacementCursor.first;
+    size_t minorAxisAutoPlacementCursor = autoPlacementMajorAxisDirection() == ForColumns ? autoPlacementCursor.first : autoPlacementCursor.second;
+
     std::unique_ptr<GridCoordinate> emptyGridArea;
     if (minorAxisPositions) {
-        GridIterator iterator(m_grid, autoPlacementMinorAxisDirection(), minorAxisPositions->resolvedInitialPosition.toInt());
-        emptyGridArea = iterator.nextEmptyGridArea(minorAxisPositions->integerSpan(), majorAxisPositions.integerSpan());
+        // Move to the next track in major axis if initial position in minor axis is before auto-placement cursor.
+        if (minorAxisPositions->resolvedInitialPosition.toInt() < minorAxisAutoPlacementCursor)
+            majorAxisAutoPlacementCursor++;
+
+        if (majorAxisAutoPlacementCursor < endOfMajorAxis) {
+            GridIterator iterator(m_grid, autoPlacementMinorAxisDirection(), minorAxisPositions->resolvedInitialPosition.toInt(), majorAxisAutoPlacementCursor);
+            emptyGridArea = iterator.nextEmptyGridArea(minorAxisPositions->integerSpan(), majorAxisPositions.integerSpan());
+        }
+
         if (!emptyGridArea)
             emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(gridItem, autoPlacementMinorAxisDirection(), *minorAxisPositions);
     } else {
         GridSpan minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *gridItem, autoPlacementMinorAxisDirection(), GridResolvedPosition(0));
 
-        const size_t endOfMajorAxis = (autoPlacementMajorAxisDirection() == ForColumns) ? gridColumnCount() : gridRowCount();
-        for (size_t majorAxisIndex = 0; majorAxisIndex < endOfMajorAxis; ++majorAxisIndex) {
-            GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisIndex);
+        for (size_t majorAxisIndex = majorAxisAutoPlacementCursor; majorAxisIndex < endOfMajorAxis; ++majorAxisIndex) {
+            GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisIndex, minorAxisAutoPlacementCursor);
             emptyGridArea = iterator.nextEmptyGridArea(majorAxisPositions.integerSpan(), minorAxisPositions.integerSpan());
 
             if (emptyGridArea) {
@@ -790,6 +811,9 @@ void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
                 // 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;
             }
+
+            // As we're moving to the next track in the major axis we should reset the auto-placement cursor in the minor axis.
+            minorAxisAutoPlacementCursor = 0;
         }
 
         if (!emptyGridArea)
@@ -797,6 +821,8 @@ void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
     }
 
     insertItemIntoGrid(gridItem, *emptyGridArea);
+    autoPlacementCursor.first = emptyGridArea->rows.resolvedInitialPosition.toInt();
+    autoPlacementCursor.second = emptyGridArea->columns.resolvedInitialPosition.toInt();
 }
 
 GridTrackSizingDirection RenderGrid::autoPlacementMajorAxisDirection() const
index 549a63f..982678e 100644 (file)
@@ -77,7 +77,8 @@ private:
     std::unique_ptr<GridCoordinate> createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(const RenderBox*, GridTrackSizingDirection, const GridSpan&) const;
     void placeSpecifiedMajorAxisItemsOnGrid(const Vector<RenderBox*>&);
     void placeAutoMajorAxisItemsOnGrid(const Vector<RenderBox*>&);
-    void placeAutoMajorAxisItemOnGrid(RenderBox*);
+    typedef std::pair<size_t, size_t> AutoPlacementCursor;
+    void placeAutoMajorAxisItemOnGrid(RenderBox*, AutoPlacementCursor&);
     GridTrackSizingDirection autoPlacementMajorAxisDirection() const;
     GridTrackSizingDirection autoPlacementMinorAxisDirection() const;