[css-grid] Implement repeat(auto-fit)

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html
index 8b1c5c6d2219924e523d86db46198d698a681642..424e9ec08d8e80638f143f7314a46eda172d1515 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html
@@ -12,6 +12,17 @@
 .gaps {
     grid-gap: 10px 20px;
 }
+
+.autoFit {
+    grid-template-columns: repeat(auto-fit, 75px);
+    grid-template-rows: 25px;
+}
+
+.w300 { width: 300px; }

[Manuel Rego, 2016/07/08 11:12:34]

Nit: width300 better than w300

+
+.item { background: gray}

[Manuel Rego, 2016/07/08 11:12:34]

We only have 2 items as maximum, so I guess this is not applied to any of them
as below we define the background for the first and last items.

[svillar, 2016/07/11 12:46:18]

Acknowledged.

+.item:first-child { background: lime; }
+.item:last-child { background: blue; }
 </style>
 
 <div class="grid contentStart" id="gridContentStart"></div>
@@ -30,11 +41,22 @@
 <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>
 <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>
 
+<div class="grid gaps w300 autoFit" id="gridAutoFitEmpty"></div>
+<div class="grid gaps w300 autoFit" id="gridAutoFitFirstColumnChild"><div class="item"></div></div>
+<div class="grid gaps w300 autoFit" id="gridAutoFitSecondColumnChild"><div class="item" style="grid-column: 2"></div></div>
+<div class="grid gaps w300 autoFit" id="gridAutoFitThirdColumnChild"><div class="item" style="grid-column: 3"></div></div>
+<div class="grid gaps w300 autoFit" id="gridAutoFitTwoConsecutiveChildren"><div class="item"></div><div class="item"></div></div>
+<div class="grid gaps w300 autoFit" id="gridAutoFitTwoConsecutiveChildrenTwo">
+    <div class="item" style="grid-column: 2"></div><div class="item"></div>
+</div>
+<div class="grid gaps w300 autoFit" id="gridAutoFitTwoAlternatingChildren">
+    <div class="item"></div><div class="item" style="grid-column: 3"></div>
+</div>
+
 <script src="../../resources/js-test.js"></script>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
     description("Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps.");
-
     testGridDefinitionsValues(document.getElementById("gridContentStart"), "300px 200px 100px", "150px 100px 50px");
     testGridDefinitionsValues(document.getElementById("gridContentCenter"), "300px 200px 100px", "150px 100px 50px");
     testGridDefinitionsValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");
@@ -50,4 +72,25 @@
     testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
     testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
     testGridDefinitionsValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");
+
+    function testGapsAlignmentWithAutoFit(id, expectedColumns, expectedRows) {

[Manuel Rego, 2016/07/08 11:12:34]

Nice method, why not use it for the previous tests too?

[svillar, 2016/07/11 12:46:18]

They were already there but I can migrate them if you like.

[Manuel Rego, 2016/07/14 09:10:50]

Yeah I know but it'd be nice to migrate the old ones.

+        var element = document.getElementById(id);
+        var alignmentClasses = [ '', 'contentStart', 'contentCenter', 'contentEnd', 'contentSpaceAround', 'contentSpaceBetween', 'contentSpaceEvenly', 'contentStretch'];
+
+        for (alignmentClass in alignmentClasses) {
+            var originalClassName = element.className;
+            element.className += " " + alignmentClass;
+            testGridDefinitionsValues(element, expectedColumns, expectedRows);
+            element.className = originalClassName;
+        }
+    }
+
+    testGapsAlignmentWithAutoFit('gridAutoFitEmpty', "0px 0px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitFirstColumnChild", "75px 0px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitSecondColumnChild", "0px 75px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitThirdColumnChild", "0px 0px 75px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildren", "75px 75px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildrenTwo", "0px 75px 75px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitTwoAlternatingChildren", "75px 0px 75px", "25px");
+
 </script>