[CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 24 Feb 2014 22:29:20 +0000 (22:29 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 24 Feb 2014 22:29:20 +0000 (22:29 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128372

Patch by Javier Fernandez <jfernandez@igalia.com> on 2014-02-24
Reviewed by David Hyatt.

From Blink r165692 by <svillar@igalia.com>

Source/WebCore:

The spec defines a different code path for the computeUsedBreadthOfGridTracks algorithm
http://dev.w3.org/csswg/css-grid/#function-ComputeUsedBreadthOfGridTracks.

Basically the track breadth is different when the available size is undefined and thus,
cannot be taken into account during the computations.
The available size is undefined whenever the height is auto or the grid element has a
shrink-to-fit behavior.

It was also renamed the function to match the specs so the function name starts with
'compute' instead of 'computed'.

No new tests, but added new cases to some of them.

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::gridElementIsShrinkToFit):
(WebCore::RenderGrid::computeNormalizedFractionBreadth):
(WebCore::RenderGrid::layoutGridItems):
* rendering/RenderGrid.h:

LayoutTests:

Adapt tests to consider also cases for undefined RemainingSpace.

* fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt:
* fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html:
* fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
* fast/css-grid-layout/flex-content-resolution-rows.html:
* fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt:
* fast/css-grid-layout/grid-auto-columns-rows-update.html:
* fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt:
* fast/css-grid-layout/grid-dynamic-updates-relayout.html:
* fast/css-grid-layout/grid-item-addition-track-breadth-update-expected.txt:
* fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
* fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt:
* fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
* fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt:
* fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
* fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt:
* fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
* fast/css-grid-layout/implicit-position-dynamic-change-expected.txt:
* fast/css-grid-layout/implicit-position-dynamic-change.html:
* fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt:
* fast/css-grid-layout/minmax-max-content-resolution-rows.html:
* fast/css-grid-layout/minmax-min-content-column-resolution-rows-expected.txt:
* fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
* fast/css-grid-layout/minmax-spanning-resolution-rows-expected.txt:
* fast/css-grid-layout/minmax-spanning-resolution-rows.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@164609 268f45cc-cd09-0410-ab3c-d52691b4dbfc

28 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt
LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html
LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt
LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html
LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt
LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html
LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html
LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html
LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html
LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt
LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html
LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt
LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html
LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows-expected.txt
LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html
LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows-expected.txt
LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index 4eba459..7535645 100644 (file)
@@ -1,3 +1,39 @@
+2014-02-24  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks algorithm
+        https://bugs.webkit.org/show_bug.cgi?id=128372
+
+        Reviewed by David Hyatt.
+
+        From Blink r165692 by <svillar@igalia.com>
+
+        Adapt tests to consider also cases for undefined RemainingSpace.
+
+        * fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt:
+        * fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html:
+        * fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
+        * fast/css-grid-layout/flex-content-resolution-rows.html:
+        * fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt:
+        * fast/css-grid-layout/grid-auto-columns-rows-update.html:
+        * fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt:
+        * fast/css-grid-layout/grid-dynamic-updates-relayout.html:
+        * fast/css-grid-layout/grid-item-addition-track-breadth-update-expected.txt:
+        * fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
+        * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt:
+        * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
+        * fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt:
+        * fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
+        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt:
+        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
+        * fast/css-grid-layout/implicit-position-dynamic-change-expected.txt:
+        * fast/css-grid-layout/implicit-position-dynamic-change.html:
+        * fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt:
+        * fast/css-grid-layout/minmax-max-content-resolution-rows.html:
+        * fast/css-grid-layout/minmax-min-content-column-resolution-rows-expected.txt:
+        * fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
+        * fast/css-grid-layout/minmax-spanning-resolution-rows-expected.txt:
+        * fast/css-grid-layout/minmax-spanning-resolution-rows.html:
+
 2014-02-24  Thiago de Barros Lacerda  <thiago.lacerda@openbossa.org>
 
         [WebRTC] Validating RTCConfiguration according to the spec
index da23fb2..21e9aec 100644 (file)
@@ -6,6 +6,19 @@ XXXXX
 PASS
 XXXXX
 PASS
+XXXXX
+PASS
+XXXXX
+PASS
+XXXXX XXXX
+XXXXX XXXX
+PASS
+XXXXX XXXX
+XXXXX XXXX
+PASS
+XXXXX XXXX
+XXXXX XXXX
+PASS
 XXXXX XXXX
 XXXXX XXXX
 PASS
@@ -17,6 +30,11 @@ XXXXX XXXX
 PASS
 XXXXX XXXXX XXXXX XXXXX
 PASS
+XXXXX XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
+PASS
 XXXXX XXXXX XXXXX XXXXX XXXXX
 XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
 PASS
@@ -29,3 +47,12 @@ PASS
 XXXXX XXXXX XXXXX XXXXX
 XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
 PASS
+XXXXX XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
+PASS
index 0214d86..0fe0cb1 100644 (file)
@@ -54,62 +54,107 @@ if (window.testRunner)
 
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 40px">
-    <div class="grid gridMaxMaxContent">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
     </div>
 </div>
 
-<div style="width: 10px; height: 110px;">
+<div style="width: 10px; height: 40px">
     <div class="grid gridMaxMaxContent">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
 
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMaxMaxContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
 
 <div class="constrainedContainer">
-    <div class="grid gridMinMinContent">
+    <div class="grid gridMinMinContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 40px">
-    <div class="grid gridMinMinContent">
+    <div class="grid gridMinMinContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
     </div>
 </div>
 
-<div style="width: 10px; height: 110px;">
+<div style="width: 10px; height: 40px">
     <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMinMinContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
     </div>
 </div>
 
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
+    </div>
+</div>
 
 <div style="width: 10px; height: 60px;">
-    <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
+    <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     </div>
 </div>
 
+<div style="width: 10px; height: 60px;">
+    <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="160"></div>
+    </div>
+</div>
 
 <div style="width: 10px; height: 60px;">
-    <div class="grid gridShrinkBelowItemsIntrinsicSize">
+    <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
+<div style="width: 10px; height: 60px;">
+    <div class="grid gridShrinkBelowItemsIntrinsicSize">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
 
 <!-- No space available for the <flex> -->
 <div style="width: 10px; height: 100px;">
-    <div class="grid gridWithNonFlexingItems">
+    <div class="grid gridWithNonFlexingItems" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
@@ -117,9 +162,18 @@ if (window.testRunner)
     </div>
 </div>
 
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
 <!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
 <div style="width: 10px; height: 180px;">
-    <div class="grid gridWithNonFlexingItems">
+    <div class="grid gridWithNonFlexingItems" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
@@ -127,14 +181,32 @@ if (window.testRunner)
     </div>
 </div>
 
-<div style="width: 10px; height: 400px;">
+<div style="width: 10px; height: 180px;">
     <div class="grid gridWithNonFlexingItems">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 400px;">
+    <div class="grid gridWithNonFlexingItems" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
     </div>
 </div>
 
+<div style="width: 10px; height: 400px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
 </body>
 </html>
index 3dcc1ef..e9b3fb5 100644 (file)
@@ -29,18 +29,30 @@ if (window.testRunner)
 <p>Test that resolving auto tracks on grid items works properly.</p>
 
 <div style="height: 0px">
-    <div class="grid gridMinFlexContent">
+    <div class="grid gridMinFlexContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     </div>
 </div>
 
+<div style="height: 0px">
+    <div class="grid gridMinFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 40px">
-    <div class="grid gridMinFlexContent">
+    <div class="grid gridMinFlexContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     </div>
 </div>
 
+<div style="width: 10px; height: 40px">
+    <div class="grid gridMinFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
 <div style="width: 10px; height: 100px;">
     <div class="grid gridMinFlexContent">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
@@ -56,62 +68,114 @@ if (window.testRunner)
 
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 40px">
-    <div class="grid gridMaxFlexContent">
+    <div class="grid gridMaxFlexContent" style="height: 100%;">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     </div>
 </div>
 
-<div style="width: 10px; height: 100px;">
+<div style="width: 10px; height: 40px">
     <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridMaxFlexContent" style="height: 100%;">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
     </div>
 </div>
 
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
 
 <div class="constrainedContainer">
     <div class="grid gridTwoMaxFlexContent">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     </div>
 </div>
 
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 60px">
-    <div class="grid gridTwoMaxFlexContent">
+    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     </div>
 </div>
 
-<div style="width: 10px; height: 120px;">
+<div style="width: 10px; height: 60px">
     <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
     </div>
 </div>
 
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
 
 <div class="constrainedContainer">
-    <div class="grid gridTwoDoubleMaxFlexContent">
+    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 60px">
-    <div class="grid gridTwoDoubleMaxFlexContent">
+    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
     </div>
 </div>
 
-<div style="width: 10px; height: 120px;">
+<div style="width: 10px; height: 60px">
     <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
     </div>
 </div>
 
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
 </body>
 </html>
index 653a4fc..1d966f4 100644 (file)
@@ -47,12 +47,21 @@ function updateGridAutoRowsColumns()
 
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '15px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10em, -webkit-max-content)' }, { 'width': '120px', 'height': '10px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20em, -webkit-max-content)' }, { 'width': '200px', 'height': '10px' });
     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120px', 'height': '10px' });
+
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '15px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '15px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60px', 'height': '20px' });
 }
 
 window.addEventListener("load", updateGridAutoRowsColumns, false);
@@ -62,7 +71,7 @@ window.addEventListener("load", updateGridAutoRowsColumns, false);
 <div>This test checks that grid-auto-{row|column} updates properly recomputes the grid items' sizes.</div>
 
 <div class="constrainedContainer" style="position: relative">
-    <div class="grid" id="constrainedGrid">
+    <div class="grid" id="constrainedGrid" style="height: 100%">
         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
     </div>
 </div>
@@ -73,5 +82,11 @@ window.addEventListener("load", updateGridAutoRowsColumns, false);
     </div>
 </div>
 
+<div class="constrainedContainer" style="position: relative;">
+    <div class="grid" id="constrainedGridUndefinedHeight">
+        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
+    </div>
+</div>
+
 </body>
 </html>
index 1566faf..ea598ce 100644 (file)
@@ -28,6 +28,13 @@ function updateRowsColumns()
     testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '10' });
     testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '70' });
 
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '50' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '10' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': '70px', 'columns': 'minmax(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '70' });
+
     testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 60px)' }, { 'width': '60', 'height': '50' });
     testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '50' });
     testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '30' });
@@ -44,7 +51,13 @@ window.addEventListener("load", updateRowsColumns, false);
 <body>
 <div>This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.</div>
 <div class="constrainedContainer">
-    <div class="grid" id="constrainedGrid">
+    <div class="grid" id="constrainedGrid" style="height: 100%">
+        <div class="sizedToGridArea">XXXXX XXXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid" id="constrainedGridUndefinedHeight">
         <div class="sizedToGridArea">XXXXX XXXXXX</div>
     </div>
 </div>
index 62768f0..2842262 100644 (file)
@@ -42,6 +42,48 @@ PASS
 PASS
 PASS
 PASS
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXX XXXX XXXX
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
 XXXXXX XXXXXX
 XXXXXX XXXXXX
 XXXXXX XXXXXX
index 274227c..c0fe271 100644 (file)
@@ -62,6 +62,33 @@ function updateImplicitGridColumn()
     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
 
+
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
+
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
+
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
+
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '30' });
+
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
+
     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });
 
     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
@@ -95,7 +122,11 @@ window.addEventListener("load", updateImplicitGridColumn, false);
 <p>This test checks that we properly recompute our grid tracks' sizes when we add more grid items.</p>
 
 <div class="constrainedContainer">
-    <div class="grid gridFixedContent" id="constrainedGrid"></div>
+    <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"></div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"></div>
 </div>
 
 <!-- Allow the extra logical space distribution to occur. -->
index 24ca43c..62f35a0 100644 (file)
@@ -26,7 +26,7 @@ if (window.testRunner)
 </div>
 
 <div class="constrainedContainer" style="position: relative;">
-<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
+<div class="grid gridMinMaxAutoWithColumnMinMaxAuto" style="height: 100%">
     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX</div>
     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX</div>
@@ -34,12 +34,21 @@ if (window.testRunner)
 </div>
 </div>
 
+<div class="constrainedContainer" style="position: relative;">
+<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
+</div>
+</div>
+
 <div style="height: 100px; width: 220px; position: relative;">
 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX</div>
     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX XXXXX</div>
-    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110" data-expected-height="80">XXXXX XXXXX</div>
-    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110" data-expected-height="80">XXXXX XXXXX XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110" data-expected-height="100">XXXXX XXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
 </div>
 </div>
 
index f7f4f56..3c4a59e 100644 (file)
@@ -20,6 +20,34 @@ XXX XXX XXX
 PASS
 PASS
 PASS
+XXX XXX XXX
+PASS
+PASS
+PASS
+XXX XXX XXX
+PASS
+PASS
+PASS
+XX XX XX XX XX XX
+PASS
+PASS
+PASS
+XX XX XX XX XX XX
+PASS
+PASS
+PASS
+XX XX XX XX XX XX
+PASS
+PASS
+PASS
+XX XX XX XX XX XX
+PASS
+PASS
+PASS
+XX XX XX XX XX XX
+PASS
+PASS
+PASS
 XX XX XX XX XX XX
 PASS
 PASS
index 9c339ce..fb4bbcd 100644 (file)
@@ -76,21 +76,28 @@ function testRemovals()
 {
     testRemoval("constrainedAutoGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
     testRemoval("constrainedMinContentFixedGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
+    testRemoval("constrainedMinContentFixedGridUndefinedHeight", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '40' });
     testRemoval("constrainedMaxContentFixedGrid", { 'width': '190', 'height': '10' }, { 'width': '190', 'height': '10' }, { 'width': '110', 'height': '10' });
+    testRemoval("constrainedMaxContentFixedGridUndefinedHeight", { 'width': '190', 'height': '40' }, { 'width': '190', 'height': '40' }, { 'width': '110', 'height': '40' });
     testRemoval("constrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
     testRemoval("constrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
 
     testRemoval("unconstrainedAutoGrid", { 'width': '390', 'height': '10' }, { 'width': '350', 'height': '10' }, { 'width': '170', 'height': '10' });
     testRemoval("unconstrainedMinContentFixedGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
+    testRemoval("unconstrainedMinContentFixedGridUndefinedHeight", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
     testRemoval("unconstrainedMaxContentFixedGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
     testRemoval("unconstrainedFixedMinContentGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
     testRemoval("unconstrainedFixedMaxContentGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
 
     testRemoval("lessConstrainedAutoGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
     testRemoval("lessConstrainedMinContentFixedGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
+    testRemoval("lessConstrainedMinContentFixedGridUndefinedHeight", { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' });
     testRemoval("lessConstrainedMaxContentFixedGrid", { 'width': '350', 'height': '20' }, { 'width': '350', 'height': '20' }, { 'width': '170', 'height': '20' });
+    testRemoval("lessConstrainedMaxContentFixedGridUndefinedHeight", { 'width': '350', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
     testRemoval("lessConstrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
+    testRemoval("lessConstrainedFixedMinContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
     testRemoval("lessConstrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
+    testRemoval("lessConstrainedFixedMaxContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
 }
 window.addEventListener("load", testRemovals, false);
 </script>
@@ -107,7 +114,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="constrainedContainer">
-    <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGrid">
+    <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGrid" style="height: 100%">
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
         <div class="firstRowFirstColumn">XXX XXX XXX</div>
@@ -115,7 +122,23 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="constrainedContainer">
-    <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGrid">
+    <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGridUndefinedHeight">
+        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
+        <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
+        <div class="firstRowFirstColumn">XXX XXX XXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGrid" style="height: 100%">
+        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
+        <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
+        <div class="firstRowFirstColumn">XXX XXX XXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGridUndefinedHeight">
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
         <div class="firstRowFirstColumn">XXX XXX XXX</div>
@@ -148,7 +171,15 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGrid">
+    <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGrid" style="height: 100%">
+        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
+        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGridUndefinedHeight">
         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
@@ -189,7 +220,39 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="lessConstrainedContainer">
-    <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGrid">
+    <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGrid" style="height: 100%">
+        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
+        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div class="lessConstrainedContainer">
+    <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGridUndefinedHeight">
+        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
+        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div class="lessConstrainedContainer">
+    <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGrid" style="height: 100%">
+        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
+        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div class="lessConstrainedContainer">
+    <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGridUndefinedHeight">
+        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
+        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div class="lessConstrainedContainer">
+    <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGrid" style="height: 100%">
         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
@@ -197,7 +260,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="lessConstrainedContainer">
-    <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGrid">
+    <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGridUndefinedHeight">
         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
@@ -205,7 +268,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="lessConstrainedContainer">
-    <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGrid">
+    <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGrid" style="height: 100%">
         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
@@ -213,7 +276,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="lessConstrainedContainer">
-    <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGrid">
+    <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGridUndefinedHeight">
         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
index 3b23123..ed4ca9a 100644 (file)
@@ -34,6 +34,15 @@ if (window.testRunner)
 <div class="grid gridMinMaxMinMax">
     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div class="grid gridMinMaxMinMax" style="height: 100px;">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
 </div>
index a53350d..8786713 100644 (file)
@@ -22,6 +22,28 @@ PASS
 PASS
 PASS
 PASS
+XXXX XXXX XXXX
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
 XXXXXX XXXXXX
 PASS
 PASS
index ab0142a..1386d52 100644 (file)
@@ -52,6 +52,33 @@ function updateImplicitGridColumn()
 
     testPosition("constrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
 
+    var gridItem = document.getElementById("constrainedGridUndefinedHeight").firstChild;
+    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
+
+    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
+
+    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '10' });
+
+    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
+    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
+
+    testPosition("constrainedGridUndefinedHeight", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
+
     gridItem = document.getElementById("unconstrainedGrid").firstChild;
     testPosition("unconstrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
     testPosition("unconstrainedGrid", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' });
@@ -86,7 +113,11 @@ window.addEventListener("load", updateImplicitGridColumn, false);
 <p>This test checks that we properly recompute our grid tracks' sizes when a grid item changes its -webkit-grid-row or -webkit-grid-column.</p>
 
 <div class="constrainedContainer">
-    <div class="grid gridFixedContent" id="constrainedGrid"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
+    <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
 </div>
 
 <!-- Allow the extra logical space distribution to occur. -->
index 6fb8f97..204cca9 100644 (file)
@@ -2,21 +2,31 @@ Test that resolving minmax function with max-content on grid items works properl
 
 XX XX XX
 PASS
+XX XX XX
+PASS
 XX XX XX XX XX
 PASS
 XX XX XX XX XX XX XX XX
 PASS
+XX XX XX XX XX XX XX XX
+PASS
 XX XX XX
 PASS
 XX XX XX XX XX XX XX XX
 PASS
+XX XX XX XX XX XX XX XX
+PASS
 XX
 PASS
 XX XX XX
 PASS
 XX XX XX XX XX
 PASS
+XX XX XX XX XX
+PASS
 XX XX XX
 PASS
 XX XX XX XX XX
 PASS
+XX XX XX XX XX
+PASS
index 0b08b39..5429d06 100644 (file)
@@ -33,24 +33,36 @@ if (window.testRunner)
 <p>Test that resolving minmax function with max-content on grid items works properly.</p>
 
 <div class="constrainedContainer">
-    <div class="grid gridMinMaxContent">
+    <div class="grid gridMinMaxContent" style="height: 100%">
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
     </div>
 </div>
 
 <div class="constrainedContainer">
     <div class="grid gridMinMaxContent">
-        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
     </div>
 </div>
 
 <div class="constrainedContainer">
     <div class="grid gridMinMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinMaxContent" style="height: 100%">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridMinMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 100px;">
     <div class="grid gridMinMaxContent">
@@ -59,12 +71,19 @@ if (window.testRunner)
 </div>
 
 <div style="width: 10px; height: 100px;">
-    <div class="grid gridMinMaxContent">
+    <div class="grid gridMinMaxContent" style="height: 100%">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     </div>
 </div>
 
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridMinMaxContent">
+        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
+    </div>
+</div>
+
 <div class="constrainedContainer">
     <div class="grid gridMaxMaxContent">
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX</div>
@@ -78,11 +97,17 @@ if (window.testRunner)
 </div>
 
 <div class="constrainedContainer">
-    <div class="grid gridMaxMaxContent">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridMaxMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 
 <div style="width: 100px; height: 20px">
@@ -92,11 +117,17 @@ if (window.testRunner)
 </div>
 
 <div style="width: 100px; height: 20px">
-    <div class="grid gridMaxMaxContent">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
     </div>
 </div>
 
+<div style="width: 100px; height: 20px">
+    <div class="grid gridMaxMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+    </div>
+</div>
+
 </body>
 </html>
index 8c9c5d1..c55a1e6 100644 (file)
@@ -2,14 +2,20 @@ Test that resolving minmax function with min-content on grid items works properl
 
 XXX XXX
 PASS
+XXX XXX
+PASS
 XXX XXX XXX XXX
 PASS
 XX XX XX XX XX XX
 PASS
+XX XX XX XX XX XX
+PASS
 XXX XXX
 PASS
 XX XX XX XX XX XX
 PASS
+XX XX XX XX XX XX
+PASS
 XXX XXX
 PASS
 XXX XXX XXX
index 16eb6ec..7c0a31e 100644 (file)
@@ -29,23 +29,35 @@ if (window.testRunner)
 <p>Test that resolving minmax function with min-content on grid items works properly.</p>
 
 <div class="constrainedContainer">
-    <div class="grid gridMinMinContent">
+    <div class="grid gridMinMinContent" style="height: 100%">
         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX</div>
     </div>
 </div>
 
 <div class="constrainedContainer">
     <div class="grid gridMinMinContent">
-        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
     </div>
 </div>
 
 <div class="constrainedContainer">
     <div class="grid gridMinMinContent">
+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinMinContent" style="height: 100%">
         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridMinMinContent">
+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 30px; height: 100px">
     <div class="grid gridMinMinContent">
@@ -54,11 +66,17 @@ if (window.testRunner)
 </div>
 
 <div style="width: 30px; height: 100px">
-    <div class="grid gridMinMinContent">
+    <div class="grid gridMinMinContent" style="height: 100%">
         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     </div>
 </div>
 
+<div style="width: 30px; height: 100px">
+    <div class="grid gridMinMinContent">
+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
 <div class="constrainedContainer">
     <div class="grid gridMaxMinContent">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
index 53e7c00..5c579d5 100644 (file)
@@ -26,10 +26,18 @@ XXXXX XXXXX XXXXX XXXXX XXXXX
 PASS
 XXXXX XXXXX XXXXX
 PASS
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX XXXXX XXXXX
+PASS
 XXXXX XXXXX XXXXX XXXXX XXXXX
 PASS
 XXXXX XXXXX XXXXX
 PASS
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX XXXXX XXXXX
+PASS
 XXXXX XXXXX XXXXX XXXXX XXXXX
 PASS
 XXXXX XXXXX XXXXX
index f2b3a6f..fdef885 100644 (file)
@@ -142,7 +142,7 @@ if (window.testRunner)
 </div>
 
 <div class="constrainedContainer">
-    <div class="grid gridMinMaxMin">
+    <div class="grid gridMinMaxMin" style="height: 100%">
         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
@@ -151,6 +151,14 @@ if (window.testRunner)
 
 <div class="constrainedContainer">
     <div class="grid gridMinMaxMin">
+        <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinMaxMin" style="height: 100%">
         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
@@ -159,9 +167,19 @@ if (window.testRunner)
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridMinMaxMin">
+        <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 50px; height: 60px">
-    <div class="grid gridMinMaxMin">
+    <div class="grid gridMinMaxMin" style="height: 100%">
         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
@@ -170,6 +188,14 @@ if (window.testRunner)
 
 <div style="width: 50px; height: 60px">
     <div class="grid gridMinMaxMin">
+        <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
+    </div>
+</div>
+
+<div style="width: 50px; height: 60px">
+    <div class="grid gridMinMaxMin" style="height: 100%">
         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
@@ -178,6 +204,16 @@ if (window.testRunner)
     </div>
 </div>
 
+<div style="width: 50px; height: 60px">
+    <div class="grid gridMinMaxMin">
+        <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
+    </div>
+</div>
+
 <div class="unconstrainedContainer">
     <div class="grid gridMinMaxMin">
         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
index 9b2b0dd..471c335 100644 (file)
@@ -1,3 +1,33 @@
+2014-02-24  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks algorithm
+        https://bugs.webkit.org/show_bug.cgi?id=128372
+
+        Reviewed by David Hyatt.
+
+        From Blink r165692 by <svillar@igalia.com>
+
+        The spec defines a different code path for the computeUsedBreadthOfGridTracks algorithm
+        http://dev.w3.org/csswg/css-grid/#function-ComputeUsedBreadthOfGridTracks.
+
+        Basically the track breadth is different when the available size is undefined and thus,
+        cannot be taken into account during the computations.
+        The available size is undefined whenever the height is auto or the grid element has a
+        shrink-to-fit behavior.
+
+        It was also renamed the function to match the specs so the function name starts with
+        'compute' instead of 'computed'.
+
+        No new tests, but added new cases to some of them.
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+        (WebCore::gridElementIsShrinkToFit):
+        (WebCore::RenderGrid::computeNormalizedFractionBreadth):
+        (WebCore::RenderGrid::layoutGridItems):
+        * rendering/RenderGrid.h:
+
 2014-02-24  Roger Fong  <roger_fong@apple.com>
 
         [Windows] Unreviewed pre-emptive build fix.
index 44b85ca..bdb681c 100644 (file)
@@ -222,7 +222,7 @@ void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo
 
     GridSizingData sizingData(gridColumnCount(), gridRowCount());
     LayoutUnit availableLogicalSpace = 0;
-    const_cast<RenderGrid*>(this)->computedUsedBreadthOfGridTracks(ForColumns, sizingData, availableLogicalSpace);
+    const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData, availableLogicalSpace);
 
     for (size_t i = 0; i < sizingData.columnTracks.size(); ++i) {
         LayoutUnit minTrackBreadth = sizingData.columnTracks[i].m_usedBreadth;
@@ -257,16 +257,24 @@ void RenderGrid::computePreferredLogicalWidths()
     setPreferredLogicalWidthsDirty(false);
 }
 
-void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData)
+void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData)
 {
     LayoutUnit availableLogicalSpace = (direction == ForColumns) ? availableLogicalWidth() : availableLogicalHeight(IncludeMarginBorderPadding);
-    computedUsedBreadthOfGridTracks(direction, sizingData, availableLogicalSpace);
+    computeUsedBreadthOfGridTracks(direction, sizingData, availableLogicalSpace);
 }
 
-void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& availableLogicalSpace)
+bool RenderGrid::gridElementIsShrinkToFit()
+{
+    return isFloatingOrOutOfFlowPositioned();
+}
+
+void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& availableLogicalSpace)
 {
     Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
+    Vector<size_t> flexibleSizedTracksIndex;
     sizingData.contentSizedTracksIndex.shrink(0);
+
+    // 1. Initialize per Grid track variables.
     for (size_t i = 0; i < tracks.size(); ++i) {
         GridTrack& track = tracks[i];
         const GridTrackSize& trackSize = gridTrackSize(direction, i);
@@ -280,8 +288,11 @@ void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direct
 
         if (trackSize.isContentSized())
             sizingData.contentSizedTracksIndex.append(i);
+        if (trackSize.maxTrackBreadth().isFlex())
+            flexibleSizedTracksIndex.append(i);
     }
 
+    // 2. Resolve content-based TrackSizingFunctions.
     if (!sizingData.contentSizedTracksIndex.isEmpty())
         resolveContentBasedTrackSizingFunctions(direction, sizingData);
 
@@ -290,26 +301,60 @@ void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direct
         availableLogicalSpace -= tracks[i].m_usedBreadth;
     }
 
-    if (availableLogicalSpace <= 0)
+    const bool hasUndefinedRemainingSpace = (direction == ForRows) ? style().logicalHeight().isAuto() : gridElementIsShrinkToFit();
+
+    if (!hasUndefinedRemainingSpace && availableLogicalSpace <= 0)
         return;
 
+    // 3. Grow all Grid tracks in GridTracks from their UsedBreadth up to their MaxBreadth value until
+    // availableLogicalSpace (RemainingSpace in the specs) is exhausted.
     const size_t tracksSize = tracks.size();
-    Vector<GridTrack*> tracksForDistribution(tracksSize);
-    for (size_t i = 0; i < tracksSize; ++i)
-        tracksForDistribution[i] = tracks.data() + i;
+    if (!hasUndefinedRemainingSpace) {
+        Vector<GridTrack*> tracksForDistribution(tracksSize);
+        for (size_t i = 0; i < tracksSize; ++i)
+            tracksForDistribution[i] = tracks.data() + i;
+
+        distributeSpaceToTracks(tracksForDistribution, 0, &GridTrack::usedBreadth, &GridTrack::growUsedBreadth, sizingData, availableLogicalSpace);
+    } else {
+        for (size_t i = 0; i < tracksSize; ++i)
+            tracks[i].m_usedBreadth = tracks[i].m_maxBreadth;
+    }
 
-    distributeSpaceToTracks(tracksForDistribution, 0, &GridTrack::usedBreadth, &GridTrack::growUsedBreadth, sizingData, availableLogicalSpace);
+    if (flexibleSizedTracksIndex.isEmpty())
+        return;
 
     // 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
+    double normalizedFractionBreadth = 0;
+    if (!hasUndefinedRemainingSpace)
+        normalizedFractionBreadth = computeNormalizedFractionBreadth(tracks, GridSpan(0, tracks.size() - 1), direction, availableLogicalSpace);
+    else {
+        for (size_t i = 0; i < flexibleSizedTracksIndex.size(); ++i) {
+            const size_t trackIndex = flexibleSizedTracksIndex[i];
+            const GridTrackSize& trackSize = gridTrackSize(direction, trackIndex);
+            normalizedFractionBreadth = std::max(normalizedFractionBreadth, tracks[trackIndex].m_usedBreadth / trackSize.maxTrackBreadth().flex());
+        }
 
-    // FIXME: Handle the case where RemainingSpace is not defined.
-    double normalizedFractionBreadth = computeNormalizedFractionBreadth(tracks, direction, availableLogicalSpace);
-    for (size_t i = 0; i < tracksSize; ++i) {
-        const GridTrackSize& trackSize = gridTrackSize(direction, i);
-        if (!trackSize.maxTrackBreadth().isFlex())
-            continue;
+        for (size_t i = 0; i < flexibleSizedTracksIndex.size(); ++i) {
+            GridIterator iterator(m_grid, direction, flexibleSizedTracksIndex[i]);
+            while (RenderBox* gridItem = iterator.nextGridItem()) {
+                const GridCoordinate coordinate = cachedGridCoordinate(gridItem);
+                const GridSpan span = (direction == ForColumns) ? coordinate.columns : coordinate.rows;
+
+                // Do not include already processed items.
+                if (i > 0 && span.initialPositionIndex <= flexibleSizedTracksIndex[i - 1])
+                    continue;
 
-        tracks[i].m_usedBreadth = std::max<LayoutUnit>(tracks[i].m_usedBreadth, normalizedFractionBreadth * trackSize.maxTrackBreadth().flex());
+                double itemNormalizedFlexBreadth = computeNormalizedFractionBreadth(tracks, span, direction, maxContentForChild(gridItem, direction, sizingData.columnTracks));
+                normalizedFractionBreadth = std::max(normalizedFractionBreadth, itemNormalizedFlexBreadth);
+            }
+        }
+    }
+
+    for (size_t i = 0; i < flexibleSizedTracksIndex.size(); ++i) {
+        const size_t trackIndex = flexibleSizedTracksIndex[i];
+        const GridTrackSize& trackSize = gridTrackSize(direction, trackIndex);
+
+        tracks[trackIndex].m_usedBreadth = std::max<LayoutUnit>(tracks[trackIndex].m_usedBreadth, normalizedFractionBreadth * trackSize.maxTrackBreadth().flex());
     }
 }
 
@@ -350,12 +395,12 @@ LayoutUnit RenderGrid::computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirect
     return valueForLength(trackLength, direction == ForColumns ? logicalWidth() : computeContentLogicalHeight(style().logicalHeight()));
 }
 
-double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, GridTrackSizingDirection direction, LayoutUnit availableLogicalSpace) const
+double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, const GridSpan& tracksSpan, GridTrackSizingDirection direction, LayoutUnit availableLogicalSpace) const
 {
     // |availableLogicalSpace| already accounts for the used breadths so no need to remove it here.
 
     Vector<GridTrackForNormalization> tracksForNormalization;
-    for (size_t i = 0; i < tracks.size(); ++i) {
+    for (size_t i = tracksSpan.initialPositionIndex; i <= tracksSpan.finalPositionIndex; ++i) {
         const GridTrackSize& trackSize = gridTrackSize(direction, i);
         if (!trackSize.maxTrackBreadth().isFlex())
             continue;
@@ -363,9 +408,8 @@ double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, G
         tracksForNormalization.append(GridTrackForNormalization(tracks[i], trackSize.maxTrackBreadth().flex()));
     }
 
-    // FIXME: Ideally we shouldn't come here without any <flex> grid track.
-    if (tracksForNormalization.isEmpty())
-        return LayoutUnit();
+    // The function is not called if we don't have <flex> grid tracks
+    ASSERT(!tracksForNormalization.isEmpty());
 
     std::sort(tracksForNormalization.begin(), tracksForNormalization.end(),
               [](const GridTrackForNormalization& track1, const GridTrackForNormalization& track2) {
@@ -748,9 +792,9 @@ void RenderGrid::layoutGridItems()
     placeItemsOnGrid();
 
     GridSizingData sizingData(gridColumnCount(), gridRowCount());
-    computedUsedBreadthOfGridTracks(ForColumns, sizingData);
+    computeUsedBreadthOfGridTracks(ForColumns, sizingData);
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData.columnTracks));
-    computedUsedBreadthOfGridTracks(ForRows, sizingData);
+    computeUsedBreadthOfGridTracks(ForRows, sizingData);
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData.rowTracks));
 
     populateGridPositions(sizingData);
index 7e05f43..5eeb9bf 100644 (file)
@@ -72,8 +72,9 @@ private:
     class GridIterator;
     class GridSizingData;
     enum GridTrackSizingDirection { ForColumns, ForRows };
-    void computedUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&);
-    void computedUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& availableLogicalSpace);
+    void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&);
+    void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& availableLogicalSpace);
+    bool gridElementIsShrinkToFit();
     LayoutUnit computeUsedBreadthOfMinLength(GridTrackSizingDirection, const GridLength&) const;
     LayoutUnit computeUsedBreadthOfMaxLength(GridTrackSizingDirection, const GridLength&, LayoutUnit usedBreadth) const;
     LayoutUnit computeUsedBreadthOfSpecifiedLength(GridTrackSizingDirection, const Length&) const;
@@ -101,7 +102,7 @@ private:
     void resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizingDirection, GridSizingData&, RenderBox*, FilterFunction, SizingFunction, AccumulatorGetter, AccumulatorGrowFunction);
     void distributeSpaceToTracks(Vector<GridTrack*>&, Vector<GridTrack*>* tracksForGrowthAboveMaxBreadth, AccumulatorGetter, AccumulatorGrowFunction, GridSizingData&, LayoutUnit& availableLogicalSpace);
 
-    double computeNormalizedFractionBreadth(Vector<GridTrack>&, GridTrackSizingDirection, LayoutUnit availableLogicalSpace) const;
+    double computeNormalizedFractionBreadth(Vector<GridTrack>&, const GridSpan& tracksSpan, GridTrackSizingDirection, LayoutUnit availableLogicalSpace) const;
 
     const GridTrackSize& gridTrackSize(GridTrackSizingDirection, size_t) const;
     size_t explicitGridColumnCount() const;