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

third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html
index eb2cdd231ab6f1c5652d5ecb2e5df86fa7e5cfa4..ea2feba54284e66ce187afd7735bbe4d25f99779 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html
@@ -65,21 +65,25 @@ x:last-child {
 
 fill,fit {
   float: left;
-  width: 400px;
+  width: 390px;
 }
 
 .r1.c0 { grid-template-columns: none;}
 .r1.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d];}
 .r1.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d]; }
 .r1.c4 { grid-template-columns: [a] repeat(4, [b] 20px [c]) [d]; }
-.r1.c18 { grid-template-columns: [a] repeat(18, [b] 20px [c]) [d]; }
+/* The repeat count was 18 in the original test. We had to reduce it to accomodate fit and fit tests
+   in a viewport with no scroll. */
+.r1.c18 { grid-template-columns: [a] repeat(17, [b] 20px [c]) [d]; }
 
 .r2.c16 { grid-template-columns: [a] repeat(16, [b] 20px [c]) [d] 30px [e]; }
 .r2.c0 { grid-template-columns:  30px [e];}
 .r2.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
 .r2.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
 
-.r3.c15 { grid-template-columns: [a] repeat(15, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+/* The repeat count was 15 in the original test. We had to reduce it to accomodate fit and fit tests
+   in a viewport with no scroll. */
+.r3.c15 { grid-template-columns: [a] repeat(14, [b] 20px [c]) [d] 30px [e] 30px [f]; }
 .r3.c0 { grid-template-columns: [a d] 30px [e] 30px [f]; }
 .r3.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
 
@@ -136,58 +140,57 @@ fill,fit {
 
 </fill>
 
-<!-- <fit>
-
-     <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 mw50 float c2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
-
-     <br clear="all">
-     <br clear="all">
-
-     <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 mw80 float c2"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
-
-     <br clear="all">
-     <br clear="all">
-
-     <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-     <div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
-
-     <br clear="all">
-     <br clear="all">
-
-     </fit> -->
+<fit>
 
+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+</fit>
 
 </body>
 </html>