[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..7e43621443378a1b86c5ab5ebff90648bf6398d4 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,16 @@
 .gaps {
     grid-gap: 10px 20px;
 }
+
+.autoFit {
+    grid-template-columns: repeat(auto-fit, 75px);
+    grid-template-rows: 25px;
+}
+
+.width300 { width: 300px; }
+
+.item:first-child { background: lime; }
+.item:last-child { background: blue; }
 </style>
 
 <div class="grid contentStart" id="gridContentStart"></div>
@@ -30,11 +40,22 @@
 <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>
 <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>
 
+<div class="grid gaps width300 autoFit" id="gridAutoFitEmpty"></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitFirstColumnChild"><div class="item"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitSecondColumnChild"><div class="item" style="grid-column: 2"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitThirdColumnChild"><div class="item" style="grid-column: 3"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildren"><div class="item"></div><div class="item"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildrenTwo">
+    <div class="item" style="grid-column: 2"></div><div class="item"></div>
+</div>
+<div class="grid gaps width300 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 +71,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) {
+        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>