[CSS Grid Layout] Incorrect sizing of tracks with non-spanning items

LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html

Index: LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html
diff --git a/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html b/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html
index 7b06360e4ca609e460aa943c73d1c87dc6262685..74956783363c65f06c3c2ea88373bd5f7df3b9e3 100644
--- a/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html
+++ b/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html
@@ -192,9 +192,9 @@
 
 <div class="unconstrainedContainer">
     <div class="grid gridMinMaxMax">
-        <div class="sizedToGridArea firstRowBothColumn" data-expected-width="110" data-expected-height="50">XXX XXX XXX</div>
+        <div class="sizedToGridArea firstRowBothColumn" data-expected-width="145" data-expected-height="50">XXX XXX XXX</div>

[Julien - ping for review, 2015/01/02 10:56:39]

That looks like a regression to me: the spanning item's 'max-content' is 110px
so we shouldn't go above that.

On top of it, the 5px seems to be because we spread the max-content over 2
tracks but only track can be impacted (as it has a max sizing function that is
'max-content').

[svillar, 2015/01/02 11:36:54]

The technical reason why it happens is because after processing the intrinsic
maximums (step 2.3) the sizes are

(50px, 15px) (40px, 15px)

so when we want to distribute 110px for the max-content maximums, we do
110-15-15 because we use the growth limits, perhaps we should get the max(base
size, growth limit) instead. This goes against the spec in a way, but I guess it
makes much more sense.
Yeah, so using the sizes I mentioned above we need to distribute 80px so the
final result is:

(50px, 15px) (40px, 95px)

we do respect the max-content on growth limits, but as the used breadths are
bigger the end result in awkward.

         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="95" data-expected-height="50"></div>
     </div>
 </div>
 
@@ -230,36 +230,36 @@
 <div style="width: 140px; height: 10px">
     <div class="grid gridMinMaxMax">
         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="140" data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>
-        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
     </div>
 </div>
 
 <div style="width: 140px; height: 10px">
     <div class="grid gridMinMaxMax">
         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="140" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>
-        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="65" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="75" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="60" data-expected-height="100"></div>
+        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="80" data-expected-height="100"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
     <div class="grid gridMinMaxMax">
         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="250" data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>
-        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="185" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="190" data-expected-height="50"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
     <div class="grid gridMinMaxMax">
         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="250" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>
-        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="185" data-expected-height="50"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="65" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="185" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="190" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="60" data-expected-height="100"></div>
+        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="190" data-expected-height="100"></div>
     </div>
 </div>