[css-grid] Fix auto-track sizing with min-size:auto and specific sizes

Specs recently changed the way auto tracks are sized. In the previous
versions only the min-width|height of the items spanning through the auto tracks
were used to size them. The new text specifies that for items with
a specified minimum size of auto, the behavior is equivalent to
a min-content minimum.

This means that from now on, auto tracks with min-size:auto will no longer
be smaller than min-content tracks (which was pretty weird from the user
POV).

BUG=544539

Review URL: https://codereview.chromium.org/1609153003

Cr-Commit-Position: refs/heads/master@{#379554}

4 files changed, 34 insertions, 12 deletions

diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt
index 004409c..f115277 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt
@@ -7,6 +7,7 @@ PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('gri
 PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('grid-template-columns') is "30px"
 PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth, '').getPropertyValue('grid-template-columns') is "60px"
 PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth, '').getPropertyValue('grid-template-columns') is "80px"
+PASS window.getComputedStyle(gridAutoAndAutoFixedWidthChildren, '').getPropertyValue('grid-template-columns') is "200px 50px"
 
 Check that min-width is honored when sizing auto columns and spanning grid items.
 PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('grid-template-columns') is "35px 15px"
@@ -18,10 +19,10 @@ PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMult
 
 Check the interactions between width and min-width and auto tracks.
 PASS window.getComputedStyle(gridAutoWithFixedWidthChild, '').getPropertyValue('grid-template-columns') is "60px"
-PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndMinWidth, '').getPropertyValue('grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndMinWidth, '').getPropertyValue('grid-template-columns') is "60px"
 PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndHigherMinWidth, '').getPropertyValue('grid-template-columns') is "90px"
 PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidth, '').getPropertyValue('grid-template-columns') is "25px 25px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndMinWidth, '').getPropertyValue('grid-template-columns') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndMinWidth, '').getPropertyValue('grid-template-columns') is "30px 30px"
 PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth, '').getPropertyValue('grid-template-columns') is "35px 35px"
 
 Check that borders and paddings are considering when computing min sizes.
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html
index 6ab8277..b76d99f 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html
@@ -15,6 +15,7 @@
 
 .width50 { width: 50px; }
 .width60 { width: 60px; }
+.width200 { width: 200px; }
 
 .border5 { border: 5px solid #abc; }
 .padding8 { padding: 0px 8px 0px; }
@@ -88,6 +89,15 @@
     </div>
 </div>
 
+
+<div class="constrainedContainer">
+    <div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedWidthChildren">
+	<div class="firstRowFirstColumn width200 minWidth50"></div>
+	<div class="firstRowSecondColumn width50"></div>
+    </div>
+</div>
+
+
 <div class="constrainedContainer">
     <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
 	<div class="firstRowFirstColumn">XX XX</div>
@@ -239,6 +249,7 @@ testGridColumnsValues("gridMinMaxMinContentAuto", "40px");
 testGridColumnsValues("gridAutoMultipleItems", "30px");
 testGridColumnsValues("gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth", "60px");
 testGridColumnsValues("gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth", "80px");
+testGridColumnsValues("gridAutoAndAutoFixedWidthChildren", "200px 50px");
 
 debug("");
 debug("Check that min-width is honored when sizing auto columns and spanning grid items.");
@@ -252,10 +263,10 @@ testGridColumnsValues("gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNo
 debug("");
 debug("Check the interactions between width and min-width and auto tracks.");
 testGridColumnsValues("gridAutoWithFixedWidthChild", "60px");
-testGridColumnsValues("gridAutoWithFixedWidthChildAndMinWidth", "40px");
+testGridColumnsValues("gridAutoWithFixedWidthChildAndMinWidth", "60px");
 testGridColumnsValues("gridAutoWithFixedWidthChildAndHigherMinWidth", "90px");
 testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidth", "25px 25px");
-testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndMinWidth", "25px 25px");
+testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndMinWidth", "30px 30px");
 testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth", "35px 35px");
 
 debug("");
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt
index 567c9c1..b4cd04b 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt
@@ -3,11 +3,12 @@ Check that min-height is honored when sizing auto rows.
 PASS window.getComputedStyle(gridAuto, '').getPropertyValue('grid-template-rows') is "40px"
 PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('grid-template-rows') is "40px"
 PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('grid-template-rows') is "40px"
-PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('grid-template-rows') is "20px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('grid-template-rows') is "30px"
 PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('grid-template-rows') is "60px"
 PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('grid-template-rows') is "60px"
 PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight, '').getPropertyValue('grid-template-rows') is "50px"
 PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight, '').getPropertyValue('grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridAutoAndAutoFixedHeightChildren, '').getPropertyValue('grid-template-rows') is "200px 50px"
 
 Check that min-height is honored when sizing auto rows and spanning grid items.
 PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('grid-template-rows') is "10px 40px"
@@ -19,10 +20,10 @@ PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMult
 
 Check the interactions between height and min-height and auto tracks.
 PASS window.getComputedStyle(gridAutoWithFixedHeightChild, '').getPropertyValue('grid-template-rows') is "60px"
-PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndMinHeight, '').getPropertyValue('grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndMinHeight, '').getPropertyValue('grid-template-rows') is "60px"
 PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndHigherMinHeight, '').getPropertyValue('grid-template-rows') is "90px"
 PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeight, '').getPropertyValue('grid-template-rows') is "25px 25px"
-PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndMinHeight, '').getPropertyValue('grid-template-rows') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndMinHeight, '').getPropertyValue('grid-template-rows') is "30px 30px"
 PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight, '').getPropertyValue('grid-template-rows') is "35px 35px"
 
 Check that borders and paddings are considering when computing min sizes.
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html
index bea9c61..fb59455 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html
@@ -16,6 +16,7 @@
 .height30 { height: 30px; }
 .height50 { height: 50px; }
 .height60 { height: 60px; }
+.height200 { height: 200px; }
 
 .border5 { border: 5px solid #abc; }
 .padding8 { padding: 8px 0px; }
@@ -74,9 +75,16 @@
 </div>
 
 <div class="constrainedContainer">
+    <div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren">
+       <div class="firstRowFirstColumn height200"></div>
+       <div class="secondRowFirstColumn height50"></div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
     <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
-	<div class="firstRowFirstColumn">XX XX</div>
-	<div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
+        <div class="firstRowFirstColumn">XX XX</div>
+        <div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
     </div>
 </div>
 
@@ -220,11 +228,12 @@ debug("Check that min-height is honored when sizing auto rows.");
 testGridRowsValues("gridAuto", "40px");
 testGridRowsValues("gridAutoItemSmallerThanMinSize", "40px");
 testGridRowsValues("gridMinMaxAutoAuto", "40px");
-testGridRowsValues("gridMinMaxAutoMaxContent", "20px");
+testGridRowsValues("gridMinMaxAutoMaxContent", "30px");
 testGridRowsValues("gridMinMaxMinContentAuto", "60px");
 testGridRowsValues("gridAutoMultipleItems", "60px");
 testGridRowsValues("gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight", "50px");
 testGridRowsValues("gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight", "60px");
+testGridRowsValues("gridAutoAndAutoFixedHeightChildren", "200px 50px");
 
 debug("");
 debug("Check that min-height is honored when sizing auto rows and spanning grid items.");
@@ -238,10 +247,10 @@ testGridRowsValues("gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSp
 debug("");
 debug("Check the interactions between height and min-height and auto tracks.");
 testGridRowsValues("gridAutoWithFixedHeightChild", "60px");
-testGridRowsValues("gridAutoWithFixedHeightChildAndMinHeight", "40px");
+testGridRowsValues("gridAutoWithFixedHeightChildAndMinHeight", "60px");
 testGridRowsValues("gridAutoWithFixedHeightChildAndHigherMinHeight", "90px");
 testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeight", "25px 25px");
-testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndMinHeight", "25px 25px");
+testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndMinHeight", "30px 30px");
 testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight", "35px 35px");
 
 debug("");