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

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html
index 43f5500a2867cbc373321ee7e50f7c11fd726a22..eab409fad856f56558a4cafac69f8e1f1eb8d2d7 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html
@@ -4,10 +4,16 @@
 .grid {
   display: grid;
   position: relative;
+  width: 100px; /* Just to ensure a small number of repetitions. */

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

Nit: you could set also a height to have repetitions on that axis too.
Or simply use an indefinite width so you got only 1 repetition like for rows.

Anyway I understand it's not really important.

 }
 
 .emptyCols { grid-template-rows: 20px; }
 .emptyRows { grid-template-columns: 10px; }
+.emptyColsDueToAutoFit { grid-template-columns: repeat(auto-fit, [a] 20px [b]); }
+.emptyRowsDueToAutoFit { grid-template-rows: repeat(auto-fit, [a] 20px [b]); }
+.noRepetitionsCols { grid-template-columns: repeat(auto-fit, [a] 20px [b]) 10px 30px; }
+.noRepetitionsRows { grid-template-rows: repeat(auto-fit, [a] 20px [b]) 10px 30px; }
+
 
 .absposChild {
   position: absolute;
@@ -22,6 +28,10 @@ function runTest() {
      testGridDefinitionsValues(document.getElementById("grid1"), "none", "20px");
      testGridDefinitionsValues(document.getElementById("grid2"), "10px", "none");
      testGridDefinitionsValues(document.getElementById("grid3"), "none", "none");
+     testGridDefinitionsValues(document.getElementById("grid4"), "[a] 0px [b a] 0px [b a] 0px [b a] 0px [b a] 0px [b]", "none");
+     testGridDefinitionsValues(document.getElementById("grid5"), "none", "[a] 0px [b]");
+     testGridDefinitionsValues(document.getElementById("grid6"), "[a] 0px [b a] 0px [b a] 0px [b] 10px 30px", "none");
+     testGridDefinitionsValues(document.getElementById("grid7"), "none", "[a] 0px [b] 10px 30px");
 }
 </script>
 <script src="../../resources/js-test.js"></script>
@@ -35,4 +45,10 @@ function runTest() {
 
 <div id="grid3" class="grid"><div class="absposChild"></div></div>
 
+<div id="grid4" class="grid emptyColsDueToAutoFit"><div class="absposChild"></div></div>
+<div id="grid5" class="grid emptyRowsDueToAutoFit"><div class="absposChild"></div></div>
+
+<div id="grid6" class="grid noRepetitionsCols"><div class="absposChild"></div></div>
+<div id="grid7" class="grid noRepetitionsRows"><div class="absposChild"></div></div>
+
 </body>