<!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>[182780] 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/182780">182780</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2015-04-13 21:59:09 -0700 (Mon, 13 Apr 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Grid Layout] Columns set in percentages collapse to auto width
https://bugs.webkit.org/show_bug.cgi?id=141435
Reviewed by David Hyatt.
Source/WebCore:
Based on a patch by Sergio Villar Senin <svillar@igalia.com>.
This patch adds 2 new new methods in RenderBox to determine if the grid
has a definite size or not.
RenderGrid::gridTrackSize() was not checking properly if the grid has or
not an indefinite size.
The condition was including auto which is not indefinite per se. For
example, auto is definite if the containing block is definite.
As the new method is more expensive, we just call it when it's really
needed to avoid performance regressions.
Finally we were setting the override logical width/height to -1 (no
possible resolution) for all the items regardless if they've a relative
width/height or a fixed one.
Added the condition, including not only items with percentage logical
width/height but also relative, to avoid overriding the value for items
with fixed width/height as it's not needed.
Tests: fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
fast/css-grid-layout/percent-intrinsic-track-breadth.html
fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
* rendering/RenderBox.cpp:
(WebCore::logicalWidthIsResolvable):
(WebCore::RenderBox::hasDefiniteLogicalWidth):
(WebCore::RenderBox::percentageLogicalHeightIsResolvableFromBlock):
(WebCore::RenderBox::hasRelativeLogicalWidth):
* rendering/RenderBox.h:
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::hasDefiniteLogicalSize):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::logicalContentHeightForChild):
(WebCore::RenderGrid::minContentForChild):
(WebCore::RenderGrid::maxContentForChild):
* rendering/RenderGrid.h:
LayoutTests:
Added new tests to check that percentage track breadths are properly
calculated under different sizing conditions.
Modified one test to include relative sizes too.
* 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/percent-intrinsic-track-breadth-expected.txt: Added.
* fast/css-grid-layout/percent-intrinsic-track-breadth.html: Added.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Added.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightinautoheightgridresolutionexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightinautoheightgridresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxh">trunk/Source/WebCore/rendering/RenderBox.h</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>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentintrinsictrackbreadthexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentintrinsictrackbreadthhtml">trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizeexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml">trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/LayoutTests/ChangeLog 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -1,3 +1,21 @@
</span><ins>+2015-04-13 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [CSS Grid Layout] Columns set in percentages collapse to auto width
+ https://bugs.webkit.org/show_bug.cgi?id=141435
+
+ Reviewed by David Hyatt.
+
+ Added new tests to check that percentage track breadths are properly
+ calculated under different sizing conditions.
+ Modified one test to include relative sizes too.
+
+ * 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/percent-intrinsic-track-breadth-expected.txt: Added.
+ * fast/css-grid-layout/percent-intrinsic-track-breadth.html: Added.
+ * fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Added.
+ * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Added.
+
</ins><span class="cx"> 2015-04-10 Brent Fulgham <bfulgham@apple.com>
</span><span class="cx">
</span><span class="cx"> Expand test infrastructure to support scrolling tests
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightinautoheightgridresolutionexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -20,3 +20,23 @@
</span><span class="cx"> XXXXX XXXXXX
</span><span class="cx"> XXXXX XXXXX XXXXX XXXXXX
</span><span class="cx"> PASS
</span><ins>+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
+PASS
+XXXXX XXXXXX
+XXXXX XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXX XXXXX XXXXXX
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightinautoheightgridresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -11,6 +11,12 @@
</span><span class="cx"> -webkit-grid-template-columns: 50px 100px;
</span><span class="cx"> -webkit-grid-template-rows: auto auto;
</span><span class="cx"> }
</span><ins>+
+.sizedToGridAreaMinSizes {
+ font: 10px/1 Ahem;
+ min-width: 100%;
+ min-height: 100%;
+}
</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">@@ -53,5 +59,41 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<div class="unconstrainedContainer" style="position: relative">
+<div class="grid gridMinMaxMinMax">
+ <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div style="position: relative; height: 100px;">
+<div class="grid gridMinMaxMinMax">
+ <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes 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="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
+</div>
+</div>
+
+<div class="unconstrainedContainer" style="position: relative">
+<div class="grid gridAutoAuto">
+ <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
+ <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
+</div>
+</div>
+
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentintrinsictrackbreadthexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt (0 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth-expected.txt 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -0,0 +1,4 @@
</span><ins>+This test checks that percentage track breadths of intrinsic size are treated as auto.
+
+XXXXX
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentintrinsictrackbreadthhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html (0 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-intrinsic-track-breadth.html 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.intrinsic {
+ -webkit-grid-template-rows: max-content;
+ -webkit-grid-template-columns: max-content;
+ height: 500px;
+ width: 500px;
+}
+
+.percentage {
+ -webkit-grid-template-rows: 100%;
+ -webkit-grid-template-columns: 100%;
+ height: 100%;
+ width: 100%;
+}
+</style>
+</head>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.percentage');">
+ <p>This test checks that percentage track breadths of intrinsic size are treated as auto.</p>
+ <div class="grid intrinsic">
+ <div class="grid percentage">
+ <div class="sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+ </div>
+ </div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt (0 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+This test checks percentage track breadths are resolved properly regarding the container size.
+
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
+XX
+XXXXX
+XXX
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html (0 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -0,0 +1,133 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-columns: 20% 50% 30%;
+ -webkit-grid-template-rows: 40%;
+}
+
+.fixedSize {
+ width: 400px;
+ height: 400px;
+}
+
+.calculatedSize {
+ width: calc(200px + 20%);
+ height: calc(300px + 10%);
+}
+
+.percentageSize {
+ width: 50%;
+ height: 50%;
+}
+
+.indefiniteSize {
+ width: -webkit-fit-content;
+ height: auto;
+}
+
+.firstRowFirstColumn {
+ color: blue;
+ background-color: cyan;
+}
+
+.firstRowSecondColumn {
+ color: green;
+ background-color: lime;
+}
+
+.firstRowThirdColumn {
+ color: brown;
+ background-color: yellow;
+ -webkit-grid-column: 3;
+ -webkit-grid-row: 1;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+</head>
+<body onload="checkLayout('.grid');">
+ <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
+ <div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
+ </div>
+ </div>
+
+ <div class="indefiniteSize">
+ <div class="grid">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+ </div>
+ </div>
+
+ <div class="unconstrainedContainer">
+ <div class="grid fixedSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
+ </div>
+ </div>
+
+ <div class="indefiniteSize">
+ <div class="grid fixedSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
+ </div>
+ </div>
+
+ <div class="indefiniteSize">
+ <div class="grid calculatedSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+ </div>
+ </div>
+
+ <div class="unconstrainedContainer">
+ <div class="grid calculatedSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
+ </div>
+ </div>
+
+ <div class="indefiniteSize">
+ <div class="grid percentageSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+ </div>
+ </div>
+
+ <div class="unconstrainedContainer">
+ <div class="grid percentageSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
+ </div>
+ </div>
+
+ <div class="indefiniteSize">
+ <div class="grid indefiniteSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+ </div>
+ </div>
+
+ <div class="unconstrainedContainer">
+ <div class="grid indefiniteSize">
+ <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
+ <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
+ <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
+ </div>
+ </div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/Source/WebCore/ChangeLog 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -1,3 +1,47 @@
</span><ins>+2015-04-13 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [CSS Grid Layout] Columns set in percentages collapse to auto width
+ https://bugs.webkit.org/show_bug.cgi?id=141435
+
+ Reviewed by David Hyatt.
+
+ Based on a patch by Sergio Villar Senin <svillar@igalia.com>.
+
+ This patch adds 2 new new methods in RenderBox to determine if the grid
+ has a definite size or not.
+
+ RenderGrid::gridTrackSize() was not checking properly if the grid has or
+ not an indefinite size.
+ The condition was including auto which is not indefinite per se. For
+ example, auto is definite if the containing block is definite.
+ As the new method is more expensive, we just call it when it's really
+ needed to avoid performance regressions.
+
+ Finally we were setting the override logical width/height to -1 (no
+ possible resolution) for all the items regardless if they've a relative
+ width/height or a fixed one.
+ Added the condition, including not only items with percentage logical
+ width/height but also relative, to avoid overriding the value for items
+ with fixed width/height as it's not needed.
+
+ Tests: fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html
+ fast/css-grid-layout/percent-intrinsic-track-breadth.html
+ fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::logicalWidthIsResolvable):
+ (WebCore::RenderBox::hasDefiniteLogicalWidth):
+ (WebCore::RenderBox::percentageLogicalHeightIsResolvableFromBlock):
+ (WebCore::RenderBox::hasRelativeLogicalWidth):
+ * rendering/RenderBox.h:
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::hasDefiniteLogicalSize):
+ (WebCore::RenderGrid::gridTrackSize):
+ (WebCore::RenderGrid::logicalContentHeightForChild):
+ (WebCore::RenderGrid::minContentForChild):
+ (WebCore::RenderGrid::maxContentForChild):
+ * rendering/RenderGrid.h:
+
</ins><span class="cx"> 2015-04-13 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> Regression: Scrolling on popsci.com spends too much time in FrameView::viewportsContentsChanged()
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -4452,6 +4452,39 @@
</span><span class="cx"> flowThread->clearRegionsOverflow(this);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static bool logicalWidthIsResolvable(const RenderBox& renderBox)
+{
+ const RenderBox* box = &renderBox;
+ while (!box->isRenderView() && !box->isOutOfFlowPositioned()
+#if ENABLE(CSS_GRID_LAYOUT)
+ && !box->hasOverrideContainingBlockLogicalWidth()
+#endif
+ && (box->style().logicalWidth().isAuto() || box->isAnonymousBlock()))
+ box = box->containingBlock();
+
+ if (box->style().logicalWidth().isFixed())
+ return true;
+ if (box->isRenderView())
+ return true;
+ // The size of the containing block of an absolutely positioned element is always definite with respect to that
+ // element (http://dev.w3.org/csswg/css-sizing-3/#definite).
+ if (box->isOutOfFlowPositioned())
+ return true;
+#if ENABLE(CSS_GRID_LAYOUT)
+ if (box->hasOverrideContainingBlockLogicalWidth())
+ return box->overrideContainingBlockContentLogicalWidth() != -1;
+#endif
+ if (box->style().logicalWidth().isPercent())
+ return logicalWidthIsResolvable(*box->containingBlock());
+
+ return false;
+}
+
+bool RenderBox::hasDefiniteLogicalWidth() const
+{
+ return logicalWidthIsResolvable(*this);
+}
+
</ins><span class="cx"> inline static bool percentageLogicalHeightIsResolvable(const RenderBox* box)
</span><span class="cx"> {
</span><span class="cx"> return RenderBox::percentageLogicalHeightIsResolvableFromBlock(box->containingBlock(), box->isOutOfFlowPositioned());
</span><span class="lines">@@ -4469,6 +4502,11 @@
</span><span class="cx"> while (!cb->isRenderView() && !cb->isBody() && !cb->isTableCell() && !cb->isOutOfFlowPositioned() && cb->style().logicalHeight().isAuto()) {
</span><span class="cx"> if (!inQuirksMode && !cb->isAnonymousBlock())
</span><span class="cx"> break;
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+ if (cb->hasOverrideContainingBlockLogicalHeight())
+ return cb->overrideContainingBlockContentLogicalHeight() != -1;
+#endif
+
</ins><span class="cx"> cb = cb->containingBlock();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -4501,6 +4539,25 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+bool RenderBox::hasDefiniteLogicalHeight() const
+{
+ const Length& logicalHeight = style().logicalHeight();
+ if (logicalHeight.isIntrinsicOrAuto())
+ return false;
+ if (logicalHeight.isFixed())
+ return true;
+ // The size of the containing block of an absolutely positioned element is always definite with respect to that
+ // element (http://dev.w3.org/csswg/css-sizing-3/#definite).
+ if (isOutOfFlowPositioned())
+ return true;
+#if ENABLE(CSS_GRID_LAYOUT)
+ if (hasOverrideContainingBlockLogicalHeight())
+ return overrideContainingBlockContentLogicalHeight() != -1;
+#endif
+
+ return percentageLogicalHeightIsResolvable(this);
+}
+
</ins><span class="cx"> bool RenderBox::hasUnsplittableScrollingOverflow() const
</span><span class="cx"> {
</span><span class="cx"> // We will paginate as long as we don't scroll overflow in the pagination direction.
</span><span class="lines">@@ -4781,6 +4838,13 @@
</span><span class="cx"> || style().logicalMaxHeight().isPercent();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+bool RenderBox::hasRelativeLogicalWidth() const
+{
+ return style().logicalWidth().isPercent()
+ || style().logicalMinWidth().isPercent()
+ || style().logicalMaxWidth().isPercent();
+}
+
</ins><span class="cx"> static void markBoxForRelayoutAfterSplit(RenderBox& box)
</span><span class="cx"> {
</span><span class="cx"> // FIXME: The table code should handle that automatically. If not,
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.h (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.h 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -442,7 +442,9 @@
</span><span class="cx"> virtual LayoutUnit computeReplacedLogicalWidth(ShouldComputePreferred = ComputeActual) const;
</span><span class="cx"> virtual LayoutUnit computeReplacedLogicalHeight() const;
</span><span class="cx">
</span><ins>+ bool hasDefiniteLogicalWidth() const;
</ins><span class="cx"> static bool percentageLogicalHeightIsResolvableFromBlock(const RenderBlock* containingBlock, bool outOfFlowPositioned);
</span><ins>+ bool hasDefiniteLogicalHeight() const;
</ins><span class="cx"> LayoutUnit computePercentageLogicalHeight(const Length& height) const;
</span><span class="cx">
</span><span class="cx"> virtual LayoutUnit availableLogicalWidth() const { return contentLogicalWidth(); }
</span><span class="lines">@@ -569,6 +571,7 @@
</span><span class="cx">
</span><span class="cx"> virtual bool hasRelativeDimensions() const;
</span><span class="cx"> virtual bool hasRelativeLogicalHeight() const;
</span><ins>+ virtual bool hasRelativeLogicalWidth() const;
</ins><span class="cx">
</span><span class="cx"> bool hasHorizontalLayoutOverflow() const
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -518,35 +518,44 @@
</span><span class="cx"> return availableLogicalSpaceIgnoringFractionTracks / accumulatedFractions;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+bool RenderGrid::hasDefiniteLogicalSize(GridTrackSizingDirection direction) const
+{
+ return (direction == ForRows) ? hasDefiniteLogicalHeight() : hasDefiniteLogicalWidth();
+}
+
</ins><span class="cx"> GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned i) const
</span><span class="cx"> {
</span><span class="cx"> bool isForColumns = (direction == ForColumns);
</span><span class="cx"> auto& trackStyles = isForColumns ? style().gridColumns() : style().gridRows();
</span><span class="cx"> auto& trackSize = (i >= trackStyles.size()) ? (isForColumns ? style().gridAutoColumns() : style().gridAutoRows()) : trackStyles[i];
</span><span class="cx">
</span><del>- // If the logical width/height of the grid container is indefinite, percentage values are treated as <auto> (or in
- // the case of minmax() as min-content for the first position and max-content for the second).
- Length logicalSize = isForColumns ? style().logicalWidth() : style().logicalHeight();
- if (logicalSize.isIntrinsicOrAuto()) {
- const GridLength& oldMinTrackBreadth = trackSize.minTrackBreadth();
- const GridLength& oldMaxTrackBreadth = trackSize.maxTrackBreadth();
- return GridTrackSize(oldMinTrackBreadth.isPercentage() ? Length(MinContent) : oldMinTrackBreadth, oldMaxTrackBreadth.isPercentage() ? Length(MaxContent) : oldMaxTrackBreadth);
</del><ins>+ GridLength minTrackBreadth = trackSize.minTrackBreadth();
+ GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
+
+ if (minTrackBreadth.isPercentage() || maxTrackBreadth.isPercentage()) {
+ if (!hasDefiniteLogicalSize(direction)) {
+ if (minTrackBreadth.isPercentage())
+ minTrackBreadth = Length(MinContent);
+ if (maxTrackBreadth.isPercentage())
+ maxTrackBreadth = Length(MaxContent);
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- return trackSize;
</del><ins>+ return GridTrackSize(minTrackBreadth, maxTrackBreadth);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox& child, Vector<GridTrack>& columnTracks)
</span><span class="cx"> {
</span><span class="cx"> LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
</span><span class="cx"> LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
</span><del>- if (child.style().logicalHeight().isPercent() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth)
</del><ins>+ if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth)
</ins><span class="cx"> child.setNeedsLayout(MarkOnlyThis);
</span><span class="cx">
</span><span class="cx"> child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
</span><del>- // If |child| has a percentage logical height, we shouldn't let it override its intrinsic height, which is
</del><ins>+ // If |child| has a relative logical height, we shouldn't let it override its intrinsic height, which is
</ins><span class="cx"> // what we are interested in here. Thus we need to set the override logical height to -1 (no possible resolution).
</span><del>- child.setOverrideContainingBlockContentLogicalHeight(-1);
</del><ins>+ if (child.hasRelativeLogicalHeight())
+ child.setOverrideContainingBlockContentLogicalHeight(-1);
</ins><span class="cx"> child.layoutIfNeeded();
</span><span class="cx"> return child.logicalHeight() + child.marginLogicalHeight();
</span><span class="cx"> }
</span><span class="lines">@@ -559,6 +568,11 @@
</span><span class="cx"> return 0;
</span><span class="cx">
</span><span class="cx"> if (direction == ForColumns) {
</span><ins>+ // If |child| has a relative logical width, we shouldn't let it override its intrinsic width, which is
+ // what we are interested in here. Thus we need to set the override logical width to -1 (no possible resolution).
+ if (child.hasRelativeLogicalWidth())
+ child.setOverrideContainingBlockContentLogicalWidth(-1);
+
</ins><span class="cx"> // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
</span><span class="cx"> // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
</span><span class="cx"> return child.minPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);
</span><span class="lines">@@ -575,6 +589,11 @@
</span><span class="cx"> return LayoutUnit();
</span><span class="cx">
</span><span class="cx"> if (direction == ForColumns) {
</span><ins>+ // If |child| has a relative logical width, we shouldn't let it override its intrinsic width, which is
+ // what we are interested in here. Thus we need to set the override logical width to -1 (no possible resolution).
+ if (child.hasRelativeLogicalWidth())
+ child.setOverrideContainingBlockContentLogicalWidth(-1);
+
</ins><span class="cx"> // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
</span><span class="cx"> // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
</span><span class="cx"> return child.maxPreferredLogicalWidth() + marginIntrinsicLogicalWidthForChild(child);
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (182779 => 182780)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-04-14 03:24:39 UTC (rev 182779)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-04-14 04:59:09 UTC (rev 182780)
</span><span class="lines">@@ -143,6 +143,8 @@
</span><span class="cx"> return m_grid.size();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ bool hasDefiniteLogicalSize(GridTrackSizingDirection) const;
+
</ins><span class="cx"> Vector<Vector<Vector<RenderBox*, 1>>> m_grid;
</span><span class="cx"> Vector<LayoutUnit> m_columnPositions;
</span><span class="cx"> Vector<LayoutUnit> m_rowPositions;
</span></span></pre>
</div>
</div>
</body>
</html>