[CSS Grid Layout] Flex tracks sizing alg must handle 0fr values

https://bugs.webkit.org/show_bug.cgi?id=148944 Reviewed by Darin Adler. Source/WebCore: We don't allow 0 as flexible size value, which is not following current specs; it just states that it must be a positive value. This patch adds such change in the parser but some additional logic must be added as well to handle 0 values during the flex tracks sizing algorithm. The old algorithm didn't take 0 values into account, so there is the risk of division by zero. Additionally, it was not handling fraction values in the best way. The last versions of the spec changed this algorithm in order to handle fraction values so that they don't cause exponential grow of tracks using values bigger than 1. This patch implements also such new algorithm, so we can deal not only with 0 values, but managing fraction values properly. No new tests, just some additional test cases and some of them rebaselined. * rendering/RenderGrid.cpp: (WebCore::normalizedFlexFraction): (WebCore::RenderGrid::computeUsedBreadthOfGridTracks): (WebCore::RenderGrid::computeFlexFactorUnitSize): Added. (WebCore::RenderGrid::findFlexFactorUnitSize): Added. (WebCore::RenderGrid::GridTrackForNormalization): Deleted. (WebCore::RenderGrid::computeNormalizedFractionBreadth): Deleted. * rendering/RenderGrid.h: LayoutTests: Allow 0 as flex factor value and implement the new flex track sizing algorithm. * fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html: Updated some cases. * fast/css-grid-layout/flex-content-resolution-columns-expected.txt: * fast/css-grid-layout/flex-content-resolution-columns.html: Added some new cases. * fast/css-grid-layout/flex-content-resolution-rows-expected.txt: * fast/css-grid-layout/flex-content-resolution-rows.html: Added some new cases. Canonical link: https://commits.webkit.org/167725@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190308 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Sep 29, 2015 · 2b5e272d59fe2921f9f566311522b875b312ef23 · 2b5e272
1 parent 8cc92ed
commit 2b5e272d59fe2921f9f566311522b875b312ef23
Showing 9 changed files with 271 additions and 69 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,18 @@
+2015-09-29  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Flex tracks sizing alg must handle 0fr values
+        https://bugs.webkit.org/show_bug.cgi?id=148944
+
+        Reviewed by Darin Adler.
+
+        Allow 0 as flex factor value and implement the new flex track sizing algorithm.
+
+        * fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html: Updated some cases.
+        * fast/css-grid-layout/flex-content-resolution-columns-expected.txt:
+        * fast/css-grid-layout/flex-content-resolution-columns.html: Added some new cases.
+        * fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
+        * fast/css-grid-layout/flex-content-resolution-rows.html: Added some new cases.
+
 2015-09-16  Carlos Garcia Campos  <cgarcia@igalia.com>
 
         printing does not use minimum page zoom factor

diff --git a/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html b/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html
@@ -120,17 +120,19 @@
     </div>
 </div>
 
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
 <div style="width: 10px; height: 60px;">
     <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>
 
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
 <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 class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
     </div>
 </div>
 

diff --git a/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt b/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt
@@ -13,3 +13,8 @@ PASS
 PASS
 PASS
 PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html b/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html
@@ -6,6 +6,10 @@
     -webkit-grid-template-columns: minmax(1fr, 50px);
     -webkit-grid-template-rows: 50px;
 }
+.gridZeroFlexContent {
+    -webkit-grid-template-columns: minmax(1fr, 0px);
+    -webkit-grid-template-rows: 50px;
+}
 .gridMaxFlexContent {
     -webkit-grid-template-columns: minmax(30px, 2fr);
     -webkit-grid-template-rows: 50px;
@@ -22,6 +26,27 @@
     -webkit-grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
     -webkit-grid-template-rows: 50px;
 }
+.gridRespectBaseSize {
+    -webkit-grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
+    -webkit-grid-template-rows: 50px;
+}
+.gridRespectProportions {
+    -webkit-grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
+    -webkit-grid-template-rows: 50px;
+}
+.gridRespectBaseSizeProportions {
+    -webkit-grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+    -webkit-grid-template-rows: 50px;
+}
+.gridRespectBaseSizeBeforeProportions {
+    -webkit-grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+    -webkit-grid-template-rows: 50px;
+}
+.firstRowThirdColumn {
+    background-color: yellow;
+    -webkit-grid-column: 3;
+    -webkit-grid-row: 1;
+}
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.grid');">
@@ -34,6 +59,12 @@
     </div>
 </div>
 
+<div style="width: 100px">
+    <div class="grid gridZeroFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 40px; height: 10px">
     <div class="grid gridMinFlexContent">
@@ -121,5 +152,40 @@
     </div>
 </div>
 
+<!-- Flex track length must be at least its baseSize. -->
+<div style="width: 100px; height: 10px;">
+    <div class="grid gridRespectBaseSize">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional to their flex factors.. -->
+<div style="width: 275px; height: 10px;">
+    <div class="grid gridRespectProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
+<div style="width: 350px; height: 10px;">
+    <div class="grid gridRespectBaseSizeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
+<div style="width: 275px; height: 10px;">
+    <div class="grid gridRespectBaseSizeBeforeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="150" data-expected-height="50"></div>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt b/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt
@@ -22,3 +22,10 @@ PASS
 PASS
 PASS
 PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html b/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html
@@ -6,6 +6,10 @@
     -webkit-grid-template-columns: 50px;
     -webkit-grid-template-rows: minmax(1fr, 50px);
 }
+.gridZeroFlexContent {
+    -webkit-grid-template-columns: 50px;
+    -webkit-grid-template-rows: minmax(1fr, 0px);
+}
 .gridMaxFlexContent {
     -webkit-grid-template-columns: 50px;
     -webkit-grid-template-rows: minmax(30px, 2fr);
@@ -18,6 +22,27 @@
     -webkit-grid-template-columns: 50px;
     -webkit-grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
 }
+.gridRespectBaseSize {
+    -webkit-grid-template-columns: 50px;
+    -webkit-grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
+}
+.gridRespectProportions {
+    -webkit-grid-template-columns: 50px;
+    -webkit-grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
+}
+.gridRespectBaseSizeProportions {
+    -webkit-grid-template-columns: 50px;
+    -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+}
+.gridRespectBaseSizeBeforeProportions {
+    -webkit-grid-template-columns: 50px;
+    -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+}
+.thirdRowFirstColumn {
+    background-color: yellow;
+    -webkit-grid-column: 1;
+    -webkit-grid-row: 3;
+}
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.grid');">
@@ -30,6 +55,12 @@
     </div>
 </div>
 
+<div style="height: 0px">
+    <div class="grid gridZeroFlexContent">
+        <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>
@@ -137,10 +168,11 @@
     </div>
 </div>
 
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
 <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 class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     </div>
 </div>
 
@@ -152,10 +184,11 @@
     </div>
 </div>
 
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
 <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 class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     </div>
 </div>
 
@@ -166,10 +199,62 @@
     </div>
 </div>
 
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
 <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 class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional to their flex factors.. -->
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectProportions" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
+<div style="width: 10px; height: 350px;">
+    <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 350px;">
+    <div class="grid gridRespectBaseSizeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectBaseSizeBeforeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     </div>
 </div>
 

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,35 @@
+2015-09-29  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Flex tracks sizing alg must handle 0fr values
+        https://bugs.webkit.org/show_bug.cgi?id=148944
+
+        Reviewed by Darin Adler.
+
+        We don't allow 0 as flexible size value, which is not following current
+        specs; it just states that it must be a positive value. This patch
+        adds such change in the parser but some additional logic must be added
+        as well to handle 0 values during the flex tracks sizing algorithm.
+
+        The old algorithm didn't take 0 values into account, so there is the risk
+        of division by zero. Additionally, it was not handling fraction values
+        in the best way. The last versions of the spec changed this algorithm in
+        order to handle fraction values so that they don't cause exponential
+        grow of tracks using values bigger than 1.
+
+        This patch implements also such new algorithm, so we can deal not only
+        with 0 values, but managing fraction values properly.
+
+        No new tests, just some additional test cases and some of them rebaselined.
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::normalizedFlexFraction):
+        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+        (WebCore::RenderGrid::computeFlexFactorUnitSize): Added.
+        (WebCore::RenderGrid::findFlexFactorUnitSize): Added.
+        (WebCore::RenderGrid::GridTrackForNormalization): Deleted.
+        (WebCore::RenderGrid::computeNormalizedFractionBreadth): Deleted.
+        * rendering/RenderGrid.h:
+
 2015-09-29  Csaba Osztrogonác  <ossy@webkit.org>
 
         Fix the broken !ENABLE(STREAM_API) build