[CSS Grid Layout] Do not stretch always grid items with auto width

LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html

Index: LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html b/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html
index e432c6666bd20bb3c09577342fd11c19d4cdf46c..7256e7add15b81f9511144749a5598803ae77a37 100644
--- a/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html
+++ b/LayoutTests/fast/css-grid-layout/grid-items-should-not-be-stretched-when-height-or-margin-change.html
@@ -7,30 +7,39 @@
     width: -webkit-fit-content;
     position: relative;
 }
+#fromFixedWidth { width: 150px; }
 #fromFixedHeight { height: 100px; }
 #fromMarginAuto { margin: auto; }
 </style>
-<p>The grids below had initially 'stretched' items, but we have changed 'height' and 'margin' to values which don't allow stretch. This test verifies that the layout algorithm properly detects such changes and clear the override height accordingly.</p>
+<p>The grids below had initially 'stretched' items, but we have changed 'height', 'width' and 'margin' to values which don't allow stretch. This test verifies that the layout algorithm properly detects such changes and clear the override height accordingly.</p>

[Manuel Rego, 2015/07/13 12:40:06]

Nit: "the override height and width accordingly".

[jfernandez, 2015/07/14 13:36:07]

Agree, perhaps we should change the name of the test as well.

 <div class="grid">
-    <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-height="100"></div>
-    <div class="firstRowSecondColumn" data-expected-height="200"></div>
-    <div class="secondRowFirstColumn" data-expected-height="200"></div>
-    <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-height="200"></div>
+    <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
+    <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
+    <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
 </div>
 <div class="grid">
-    <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-height="100">
-        <div style="height: 100px"></div>
+    <div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div>
+    <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
+    <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
+    <div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
+</div>
+<div class="grid">
+    <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100">
+        <div style="width: 150px; height: 100px"></div>
     </div>
-    <div class="firstRowSecondColumn" data-expected-height="200"></div>
-    <div class="secondRowFirstColumn" data-expected-height="200"></div>
-    <div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-height="200">
-        <div style="height: 100px"></div>
+    <div class="firstRowSecondColumn" data-expected-width="200" data-expected-height="200"></div>
+    <div class="secondRowFirstColumn" data-expected-width="200" data-expected-height="200"></div>
+    <div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-width="200" data-expected-height="200">
+        <div style="width: 150px; height: 100px"></div>
     </div>
 </div>
 <script>
 document.body.offsetLeft;
 document.getElementById("fromFixedHeight").style.height = "auto";
 document.getElementById("toFixedHeight").style.height = "100px";
+document.getElementById("fromFixedWidth").style.width = "auto";
+document.getElementById("toFixedWidth").style.width = "150px";
 document.getElementById("fromMarginAuto").style.margin = "0";
 document.getElementById("toMarginAuto").style.margin = "auto";
 checkLayout(".grid");