<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[190308] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/190308">190308</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2015-09-29 05:32:48 -0700 (Tue, 29 Sep 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandminmaxcontentresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentresolutioncolumnsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentresolutioncolumnshtml">trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentresolutionrowsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexcontentresolutionrowshtml">trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/LayoutTests/ChangeLog 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+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.
+
</ins><span class="cx"> 2015-09-16 Carlos Garcia Campos <cgarcia@igalia.com>
</span><span class="cx">
</span><span class="cx"> printing does not use minimum page zoom factor
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandminmaxcontentresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -120,6 +120,7 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
</ins><span class="cx"> <div style="width: 10px; height: 60px;">
</span><span class="cx"> <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
</span><span class="lines">@@ -127,10 +128,11 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
</ins><span class="cx"> <div style="width: 10px; height: 60px;">
</span><span class="cx"> <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
</span><del>- <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="160"></div>
</del><ins>+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentresolutioncolumnsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -13,3 +13,8 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentresolutioncolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -6,6 +6,10 @@
</span><span class="cx"> -webkit-grid-template-columns: minmax(1fr, 50px);
</span><span class="cx"> -webkit-grid-template-rows: 50px;
</span><span class="cx"> }
</span><ins>+.gridZeroFlexContent {
+ -webkit-grid-template-columns: minmax(1fr, 0px);
+ -webkit-grid-template-rows: 50px;
+}
</ins><span class="cx"> .gridMaxFlexContent {
</span><span class="cx"> -webkit-grid-template-columns: minmax(30px, 2fr);
</span><span class="cx"> -webkit-grid-template-rows: 50px;
</span><span class="lines">@@ -22,6 +26,27 @@
</span><span class="cx"> -webkit-grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
</span><span class="cx"> -webkit-grid-template-rows: 50px;
</span><span class="cx"> }
</span><ins>+.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;
+}
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.grid');">
</span><span class="lines">@@ -34,6 +59,12 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<div style="width: 100px">
+ <div class="grid gridZeroFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
+ </div>
+</div>
+
</ins><span class="cx"> <!-- Allow the extra logical space distribution to occur. -->
</span><span class="cx"> <div style="width: 40px; height: 10px">
</span><span class="cx"> <div class="grid gridMinFlexContent">
</span><span class="lines">@@ -121,5 +152,40 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<!-- 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>
+
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentresolutionrowsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -22,3 +22,10 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexcontentresolutionrowshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -6,6 +6,10 @@
</span><span class="cx"> -webkit-grid-template-columns: 50px;
</span><span class="cx"> -webkit-grid-template-rows: minmax(1fr, 50px);
</span><span class="cx"> }
</span><ins>+.gridZeroFlexContent {
+ -webkit-grid-template-columns: 50px;
+ -webkit-grid-template-rows: minmax(1fr, 0px);
+}
</ins><span class="cx"> .gridMaxFlexContent {
</span><span class="cx"> -webkit-grid-template-columns: 50px;
</span><span class="cx"> -webkit-grid-template-rows: minmax(30px, 2fr);
</span><span class="lines">@@ -18,6 +22,27 @@
</span><span class="cx"> -webkit-grid-template-columns: 50px;
</span><span class="cx"> -webkit-grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
</span><span class="cx"> }
</span><ins>+.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;
+}
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.grid');">
</span><span class="lines">@@ -31,6 +56,12 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="height: 0px">
</span><ins>+ <div class="grid gridZeroFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
+ </div>
+</div>
+
+<div style="height: 0px">
</ins><span class="cx"> <div class="grid gridMinFlexContent">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -137,10 +168,11 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
</ins><span class="cx"> <div class="constrainedContainer">
</span><span class="cx"> <div class="grid gridTwoDoubleMaxFlexContent">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
</span><del>- <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
</del><ins>+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -152,10 +184,11 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
</ins><span class="cx"> <div style="width: 10px; height: 60px">
</span><span class="cx"> <div class="grid gridTwoDoubleMaxFlexContent">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
</span><del>- <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
</del><ins>+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -166,12 +199,64 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
</ins><span class="cx"> <div style="width: 10px; height: 120px;">
</span><span class="cx"> <div class="grid gridTwoDoubleMaxFlexContent">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
</span><del>- <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
</del><ins>+ <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<!-- 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>
+
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/Source/WebCore/ChangeLog 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -1,3 +1,35 @@
</span><ins>+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:
+
</ins><span class="cx"> 2015-09-29 Csaba Osztrogonác <ossy@webkit.org>
</span><span class="cx">
</span><span class="cx"> Fix the broken !ENABLE(STREAM_API) build
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -116,19 +116,6 @@
</span><span class="cx"> bool m_infinitelyGrowable { false };
</span><span class="cx"> };
</span><span class="cx">
</span><del>-struct GridTrackForNormalization {
- GridTrackForNormalization(const GridTrack& track, double flex)
- : m_track(&track)
- , m_flex(flex)
- , m_normalizedFlexValue(track.baseSize() / flex)
- {
- }
-
- const GridTrack* m_track;
- double m_flex;
- LayoutUnit m_normalizedFlexValue;
-};
-
</del><span class="cx"> class RenderGrid::GridIterator {
</span><span class="cx"> WTF_MAKE_NONCOPYABLE(GridIterator);
</span><span class="cx"> public:
</span><span class="lines">@@ -369,6 +356,11 @@
</span><span class="cx"> return isFloatingOrOutOfFlowPositioned();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static inline double normalizedFlexFraction(const GridTrack& track, double flexFactor)
+{
+ return track.baseSize() / std::max<double>(1, flexFactor);
+}
+
</ins><span class="cx"> void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& availableLogicalSpace)
</span><span class="cx"> {
</span><span class="cx"> const LayoutUnit initialAvailableLogicalSpace = availableLogicalSpace;
</span><span class="lines">@@ -429,14 +421,12 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
</span><del>- double normalizedFractionBreadth = 0;
</del><ins>+ double flexFraction = 0;
</ins><span class="cx"> if (!hasUndefinedRemainingSpace)
</span><del>- normalizedFractionBreadth = computeNormalizedFractionBreadth(tracks, GridSpan(0, tracks.size() - 1), direction, initialAvailableLogicalSpace);
</del><ins>+ flexFraction = findFlexFactorUnitSize(tracks, GridSpan(0, tracks.size() - 1), direction, initialAvailableLogicalSpace);
</ins><span class="cx"> else {
</span><del>- for (auto trackIndex : flexibleSizedTracksIndex) {
- const GridTrackSize& trackSize = gridTrackSize(direction, trackIndex);
- normalizedFractionBreadth = std::max(normalizedFractionBreadth, tracks[trackIndex].baseSize() / trackSize.maxTrackBreadth().flex());
- }
</del><ins>+ for (const auto& trackIndex : flexibleSizedTracksIndex)
+ flexFraction = std::max(flexFraction, normalizedFlexFraction(tracks[trackIndex], gridTrackSize(direction, trackIndex).maxTrackBreadth().flex()));
</ins><span class="cx">
</span><span class="cx"> for (unsigned i = 0; i < flexibleSizedTracksIndex.size(); ++i) {
</span><span class="cx"> GridIterator iterator(m_grid, direction, flexibleSizedTracksIndex[i]);
</span><span class="lines">@@ -448,8 +438,7 @@
</span><span class="cx"> if (i > 0 && span.resolvedInitialPosition.toInt() <= flexibleSizedTracksIndex[i - 1])
</span><span class="cx"> continue;
</span><span class="cx">
</span><del>- double itemNormalizedFlexBreadth = computeNormalizedFractionBreadth(tracks, span, direction, maxContentForChild(*gridItem, direction, sizingData.columnTracks));
- normalizedFractionBreadth = std::max(normalizedFractionBreadth, itemNormalizedFlexBreadth);
</del><ins>+ flexFraction = std::max(flexFraction, findFlexFactorUnitSize(tracks, span, direction, maxContentForChild(*gridItem, direction, sizingData.columnTracks)));
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -457,7 +446,7 @@
</span><span class="cx"> for (auto trackIndex : flexibleSizedTracksIndex) {
</span><span class="cx"> const GridTrackSize& trackSize = gridTrackSize(direction, trackIndex);
</span><span class="cx"> GridTrack& track = tracks[trackIndex];
</span><del>- LayoutUnit baseSize = std::max<LayoutUnit>(track.baseSize(), normalizedFractionBreadth * trackSize.maxTrackBreadth().flex());
</del><ins>+ LayoutUnit baseSize = std::max<LayoutUnit>(track.baseSize(), flexFraction * trackSize.maxTrackBreadth().flex());
</ins><span class="cx"> track.setBaseSize(baseSize);
</span><span class="cx"> availableLogicalSpace -= baseSize;
</span><span class="cx"> }
</span><span class="lines">@@ -500,57 +489,56 @@
</span><span class="cx"> return valueForLength(trackLength, computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt).valueOr(0));
</span><span class="cx"> }
</span><span class="cx">
</span><del>-double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, const GridSpan& tracksSpan, GridTrackSizingDirection direction, LayoutUnit spaceToFill) const
</del><ins>+double RenderGrid::computeFlexFactorUnitSize(const Vector<GridTrack>& tracks, GridTrackSizingDirection direction, double flexFactorSum, LayoutUnit leftOverSpace, const Vector<size_t, 8>& flexibleTracksIndexes, std::unique_ptr<TrackIndexSet> tracksToTreatAsInflexible) const
</ins><span class="cx"> {
</span><del>- LayoutUnit allocatedSpace;
- Vector<GridTrackForNormalization> tracksForNormalization;
- for (auto& position : tracksSpan) {
- GridTrack& track = tracks[position.toInt()];
- allocatedSpace += track.baseSize();
</del><ins>+ // We want to avoid the effect of flex factors sum below 1 making the factor unit size to grow exponentially.
+ double hypotheticalFactorUnitSize = leftOverSpace / std::max<double>(1, flexFactorSum);
</ins><span class="cx">
</span><del>- const GridTrackSize& trackSize = gridTrackSize(direction, position.toInt());
- if (!trackSize.maxTrackBreadth().isFlex())
</del><ins>+ // product of the hypothetical "flex factor unit" and any flexible track's "flex factor" must be grater than such track's "base size".
+ bool validFlexFactorUnit = true;
+ for (auto index : flexibleTracksIndexes) {
+ if (tracksToTreatAsInflexible && tracksToTreatAsInflexible->contains(index))
</ins><span class="cx"> continue;
</span><del>-
- tracksForNormalization.append(GridTrackForNormalization(track, trackSize.maxTrackBreadth().flex()));
</del><ins>+ LayoutUnit baseSize = tracks[index].baseSize();
+ double flexFactor = gridTrackSize(direction, index).maxTrackBreadth().flex();
+ // treating all such tracks as inflexible.
+ if (baseSize > hypotheticalFactorUnitSize * flexFactor) {
+ leftOverSpace -= baseSize;
+ flexFactorSum -= flexFactor;
+ if (!tracksToTreatAsInflexible)
+ tracksToTreatAsInflexible = std::unique_ptr<TrackIndexSet>(new TrackIndexSet());
+ tracksToTreatAsInflexible->add(index);
+ validFlexFactorUnit = false;
+ }
</ins><span class="cx"> }
</span><ins>+ if (!validFlexFactorUnit)
+ return computeFlexFactorUnitSize(tracks, direction, flexFactorSum, leftOverSpace, flexibleTracksIndexes, WTF::move(tracksToTreatAsInflexible));
+ return hypotheticalFactorUnitSize;
+}
</ins><span class="cx">
</span><del>- // The function is not called if we don't have <flex> grid tracks
- ASSERT(!tracksForNormalization.isEmpty());
</del><ins>+double RenderGrid::findFlexFactorUnitSize(const Vector<GridTrack>& tracks, const GridSpan& tracksSpan, GridTrackSizingDirection direction, LayoutUnit leftOverSpace) const
+{
+ if (leftOverSpace <= 0)
+ return 0;
</ins><span class="cx">
</span><del>- std::sort(tracksForNormalization.begin(), tracksForNormalization.end(),
- [](const GridTrackForNormalization& track1, const GridTrackForNormalization& track2) {
- return track1.m_normalizedFlexValue < track2.m_normalizedFlexValue;
- });
-
- // These values work together: as we walk over our grid tracks, we increase fractionValueBasedOnGridItemsRatio
- // to match a grid track's usedBreadth to <flex> ratio until the total fractions sized grid tracks wouldn't
- // fit into availableLogicalSpaceIgnoringFractionTracks.
- double accumulatedFractions = 0;
- LayoutUnit fractionValueBasedOnGridItemsRatio = 0;
- LayoutUnit availableLogicalSpaceIgnoringFractionTracks = spaceToFill - allocatedSpace;
-
- for (auto& track : tracksForNormalization) {
- if (track.m_normalizedFlexValue > fractionValueBasedOnGridItemsRatio) {
- // If the normalized flex value (we ordered |tracksForNormalization| by increasing normalized flex value)
- // will make us overflow our container, then stop. We have the previous step's ratio is the best fit.
- if (track.m_normalizedFlexValue * accumulatedFractions > availableLogicalSpaceIgnoringFractionTracks)
- break;
-
- fractionValueBasedOnGridItemsRatio = track.m_normalizedFlexValue;
</del><ins>+ double flexFactorSum = 0;
+ Vector<size_t, 8> flexibleTracksIndexes;
+ for (const auto& resolvedPosition : tracksSpan) {
+ size_t trackIndex = resolvedPosition.toInt();
+ GridTrackSize trackSize = gridTrackSize(direction, trackIndex);
+ if (!trackSize.maxTrackBreadth().isFlex())
+ leftOverSpace -= tracks[trackIndex].baseSize();
+ else {
+ double flexFactor = trackSize.maxTrackBreadth().flex();
+ flexibleTracksIndexes.append(trackIndex);
+ flexFactorSum += flexFactor;
</ins><span class="cx"> }
</span><del>-
- accumulatedFractions += track.m_flex;
- // This item was processed so we re-add its used breadth to the available space to accurately count the remaining space.
- availableLogicalSpaceIgnoringFractionTracks += track.m_track->baseSize();
</del><span class="cx"> }
</span><span class="cx">
</span><del>- // Let flex factor sum be the sum of the flex factors of the flexible tracks. If this value
- // is less than 1, set it to 1 instead.
- if (accumulatedFractions < 1)
- return availableLogicalSpaceIgnoringFractionTracks;
</del><ins>+ // The function is not called if we don't have <flex> grid tracks
+ ASSERT(!flexibleTracksIndexes.isEmpty());
</ins><span class="cx">
</span><del>- return availableLogicalSpaceIgnoringFractionTracks / accumulatedFractions;
</del><ins>+ return computeFlexFactorUnitSize(tracks, direction, flexFactorSum, leftOverSpace, flexibleTracksIndexes);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> bool RenderGrid::hasDefiniteLogicalSize(GridTrackSizingDirection direction) const
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (190307 => 190308)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-09-29 10:23:12 UTC (rev 190307)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-09-29 12:32:48 UTC (rev 190308)
</span><span class="lines">@@ -113,7 +113,9 @@
</span><span class="cx"> template <TrackSizeComputationPhase> void resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizingDirection, GridSizingData&, const GridItemsSpanGroupRange&);
</span><span class="cx"> template <TrackSizeComputationPhase> void distributeSpaceToTracks(Vector<GridTrack*>&, const Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& availableLogicalSpace);
</span><span class="cx">
</span><del>- double computeNormalizedFractionBreadth(Vector<GridTrack>&, const GridSpan& tracksSpan, GridTrackSizingDirection, LayoutUnit availableLogicalSpace) const;
</del><ins>+ typedef HashSet<unsigned, DefaultHash<unsigned>::Hash, WTF::UnsignedWithZeroKeyHashTraits<unsigned>> TrackIndexSet;
+ double computeFlexFactorUnitSize(const Vector<GridTrack>&, GridTrackSizingDirection, double flexFactorSum, LayoutUnit leftOverSpace, const Vector<size_t, 8>& flexibleTracksIndexes, std::unique_ptr<TrackIndexSet> tracksToTreatAsInflexible = nullptr) const;
+ double findFlexFactorUnitSize(const Vector<GridTrack>&, const GridSpan&, GridTrackSizingDirection, LayoutUnit spaceToFill) const;
</ins><span class="cx">
</span><span class="cx"> GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>