[CSS Grid Layout] Support "sparse" in auto-placed items locked to a row/column

https://bugs.webkit.org/show_bug.cgi?id=141748

Reviewed by Sergio Villar Senin.

Source/WebCore:

The first step of grid item placement algorithm has been updated in
order to support both "sparse" and "dense" modes. Current code is always
doing a "dense" packing in this case.

See: http://dev.w3.org/csswg/css-grid/#auto-placement-algo

Test: fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::placeSpecifiedMajorAxisItemsOnGrid): Add a cursor
for each row/column and use it to place items in the right position.

LayoutTests:

New test to check "sparse" and "dense" packing mode behavior in
auto-placed items locked to a given row (or column).

* fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
Extract some common styles to resources/grid.css.
* fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt: Added.
* fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html: Added.
* fast/css-grid-layout/resources/grid.css: Modified generic CSS file to
add common styles.

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 9eade0a..d83ea68 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,20 @@
+2015-02-24  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Support "sparse" in auto-placed items locked to a row/column
+        https://bugs.webkit.org/show_bug.cgi?id=141748
+
+        Reviewed by Sergio Villar Senin.
+
+        New test to check "sparse" and "dense" packing mode behavior in
+        auto-placed items locked to a given row (or column).
+
+        * fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
+        Extract some common styles to resources/grid.css.
+        * fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html: Added.
+        * fast/css-grid-layout/resources/grid.css: Modified generic CSS file to
+        add common styles.
+
 2015-02-24  Joanmarie Diggs  <jdiggs@igalia.com>
 
         [GTK] Layout Test accessibility/roles-exposed.html is failing

diff --git a/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html b/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
index 0b8e857..88733fd 100644 (file)
--- a/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
+++ b/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
@@ -7,38 +7,12 @@
     -webkit-grid-auto-columns: 100px;
 }
 
-.autoRowFirstColumnSpanning2 {
-    background-color: maroon;
-    -webkit-grid-column: 1 / span 2;
-    -webkit-grid-row: auto;
-}
-
-.autoRowSecondColumnSpanning2 {
-    background-color: olive;
-    -webkit-grid-column: 2 / span 2;
-    -webkit-grid-row: auto;
-}
-
 .autoRowFirstColumnSpanning3 {
     background-color: teal;
     -webkit-grid-column: 1 / span 3;
     -webkit-grid-row: auto;
 }
 
-.firstRowSpanning2AutoColumn {
-    background-color: maroon;
-    -webkit-grid-column: auto;
-    -webkit-grid-row: 1 / span 2;
-    height: 100%;
-}
-
-.secondRowSpanning2AutoColumn {
-    background-color: olive;
-    -webkit-grid-column: auto;
-    -webkit-grid-row: 2 / span 2;
-    height: 100%;
-}
-
 .firstRowSpanning3AutoColumn {
     background-color: teal;
     -webkit-grid-column: auto;

diff --git a/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt
new file mode 100644 (file)
index 0000000..26d3367
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt
@@ -0,0 +1,18 @@
+Thist test checks that sparse and dense packing modes are supported in auto-placement for fixed rows/columns.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS

diff --git a/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html b/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html
new file mode 100644 (file)
index 0000000..d7258ef
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    -webkit-grid-auto-columns: 50px;
+    -webkit-grid-auto-rows: 50px;
+}
+
+.firstRowAutoColumnSpanning2 {
+    background-color: maroon;
+    -webkit-grid-column: span 2;
+    -webkit-grid-row: 1;
+}
+
+.autoRowSpanning2FirstColumn {
+    background-color: aqua;
+    -webkit-grid-column: 1;
+    -webkit-grid-row: span 2;
+}
+
+.firstRowFourthColumn {
+    background-color: salmon;
+    -webkit-grid-column: 4;
+    -webkit-grid-row: 1;
+}
+
+.fourthRowFirstColumn {
+    background-color: salmon;
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 4;
+}
+
+.secondRowThirdColumn {
+    background-color: red;
+    -webkit-grid-column: 3;
+    -webkit-grid-row: 2;
+}
+
+.thirdRowSecondColumn {
+    background-color: red;
+    -webkit-grid-column: 2;
+    -webkit-grid-row: 3;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid');">
+
+<p>Thist test checks that sparse and dense packing modes are supported in auto-placement for fixed rows/columns.</p>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowSparse">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowSparse">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="350" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowSparse">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowSparse">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowRowDense">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></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 autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridAutoFlowColumnDense">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+</body>
+</html>

diff --git a/LayoutTests/fast/css-grid-layout/resources/grid.css b/LayoutTests/fast/css-grid-layout/resources/grid.css
index f0fb63f..169a0c5 100644 (file)
--- a/LayoutTests/fast/css-grid-layout/resources/grid.css
+++ b/LayoutTests/fast/css-grid-layout/resources/grid.css
@@ -146,6 +146,32 @@
     -webkit-grid-row: span 3;
 }
 
+.autoRowFirstColumnSpanning2 {
+    background-color: maroon;
+    -webkit-grid-column: 1 / span 2;
+    -webkit-grid-row: auto;
+}
+
+.autoRowSecondColumnSpanning2 {
+    background-color: olive;
+    -webkit-grid-column: 2 / span 2;
+    -webkit-grid-row: auto;
+}
+
+.firstRowSpanning2AutoColumn {
+    background-color: maroon;
+    -webkit-grid-column: auto;
+    -webkit-grid-row: 1 / span 2;
+    height: 100%;
+}
+
+.secondRowSpanning2AutoColumn {
+    background-color: olive;
+    -webkit-grid-column: auto;
+    -webkit-grid-row: 2 / span 2;
+    height: 100%;
+}
+
 /* Grid element flow. */
 .gridAutoFlowColumnSparse {
     -webkit-grid-auto-flow: column;

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index be63955..8baa72a 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,22 @@
+2015-02-24  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Support "sparse" in auto-placed items locked to a row/column
+        https://bugs.webkit.org/show_bug.cgi?id=141748
+
+        Reviewed by Sergio Villar Senin.
+
+        The first step of grid item placement algorithm has been updated in
+        order to support both "sparse" and "dense" modes. Current code is always
+        doing a "dense" packing in this case.
+
+        See: http://dev.w3.org/csswg/css-grid/#auto-placement-algo
+
+        Test: fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::placeSpecifiedMajorAxisItemsOnGrid): Add a cursor
+        for each row/column and use it to place items in the right position.
+
 2015-02-24  Joanmarie Diggs  <jdiggs@igalia.com>
 
         [GTK] Layout Test accessibility/roles-exposed.html is failing

diff --git a/Source/WebCore/rendering/RenderGrid.cpp b/Source/WebCore/rendering/RenderGrid.cpp
index 4ca6bd8..6241be3 100644 (file)
--- a/Source/WebCore/rendering/RenderGrid.cpp
+++ b/Source/WebCore/rendering/RenderGrid.cpp
@@ -874,15 +874,27 @@ std::unique_ptr<GridCoordinate> RenderGrid::createEmptyGridAreaAtSpecifiedPositi
 
 void RenderGrid::placeSpecifiedMajorAxisItemsOnGrid(const Vector<RenderBox*>& autoGridItems)
 {
+    bool isForColumns = autoPlacementMajorAxisDirection() == ForColumns;
+    bool isGridAutoFlowDense = style().isGridAutoFlowAlgorithmDense();
+
+    // Mapping between the major axis tracks (rows or columns) and the last auto-placed item's position inserted on
+    // that track. This is needed to implement "sparse" packing for items locked to a given track.
+    // See http://dev.w3.org/csswg/css-grid/#auto-placement-algo
+    HashMap<unsigned, unsigned, DefaultHash<unsigned>::Hash, WTF::UnsignedWithZeroKeyHashTraits<unsigned>> minorAxisCursors;
+
     for (auto& autoGridItem : autoGridItems) {
         std::unique_ptr<GridSpan> majorAxisPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *autoGridItem, autoPlacementMajorAxisDirection());
         GridSpan minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *autoGridItem, autoPlacementMinorAxisDirection(), GridResolvedPosition(0));
+        unsigned majorAxisInitialPosition = majorAxisPositions->resolvedInitialPosition.toInt();
 
-        GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisPositions->resolvedInitialPosition.toInt());
+        GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisPositions->resolvedInitialPosition.toInt(), isGridAutoFlowDense ? 0 : minorAxisCursors.get(majorAxisInitialPosition));
         std::unique_ptr<GridCoordinate> emptyGridArea = iterator.nextEmptyGridArea(majorAxisPositions->integerSpan(), minorAxisPositions.integerSpan());
         if (!emptyGridArea)
             emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(*autoGridItem, autoPlacementMajorAxisDirection(), *majorAxisPositions);
         insertItemIntoGrid(*autoGridItem, *emptyGridArea);
+
+        if (!isGridAutoFlowDense)
+            minorAxisCursors.set(majorAxisInitialPosition, isForColumns ? emptyGridArea->rows.resolvedInitialPosition.toInt() : emptyGridArea->columns.resolvedInitialPosition.toInt());
     }
 }