<!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>[191879] 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/191879">191879</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2015-11-02 01:02:50 -0800 (Mon, 02 Nov 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Grid Layout] min-content row does not always shrink
https://bugs.webkit.org/show_bug.cgi?id=144581
Reviewed by Zalan Bujtas.
Source/WebCore:
Grid items height must be recomputed whenever the grid tracks
change if the items had been previously stretched. In those
cases we have to clear the override height and layout the item
with the new row size.
Tests: fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html
fast/css-grid-layout/relayout-indefinite-heights.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::logicalContentHeightForChild):
LayoutTests:
Based on Blink's <a href="http://trac.webkit.org/projects/webkit/changeset/191001">r191001</a> by <jfernandez@igalia.com>.
* fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt: Added.
* fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html: Added.
* fast/css-grid-layout/relayout-indefinite-heights-expected.txt: Added.
* fast/css-grid-layout/relayout-indefinite-heights.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmincontentrowmustshrinkwhencolumngrowsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmincontentrowmustshrinkwhencolumngrowshtml">trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutindefiniteheightsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutindefiniteheightshtml">trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (191878 => 191879)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-11-02 08:41:02 UTC (rev 191878)
+++ trunk/LayoutTests/ChangeLog 2015-11-02 09:02:50 UTC (rev 191879)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2015-10-29 Sergio Villar Senin <svillar@igalia.com>
+
+ [CSS Grid Layout] min-content row does not always shrink
+ https://bugs.webkit.org/show_bug.cgi?id=144581
+
+ Reviewed by Zalan Bujtas.
+
+ Based on Blink's r191001 by <jfernandez@igalia.com>.
+
+ * fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt: Added.
+ * fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html: Added.
+ * fast/css-grid-layout/relayout-indefinite-heights-expected.txt: Added.
+ * fast/css-grid-layout/relayout-indefinite-heights.html: Added.
+
</ins><span class="cx"> 2015-11-01 Brady Eidson <beidson@apple.com>
</span><span class="cx">
</span><span class="cx"> Modern IDB: IBDObjectStore.count() support.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmincontentrowmustshrinkwhencolumngrowsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt (0 => 191879)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt 2015-11-02 09:02:50 UTC (rev 191879)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+This test checks that a min-content sized row track grows when the container width is reduced and that it shrinks to fit its content when container is resized to its initial dimensions.
+
+#cell1 (min-content)
+#cell2 (1fr) xxx. xx xxx xxxxx xxx xxx ,x. xxxxx xx xx xxx. xxx xx xxxxx xxx xxxxx, . xx xx xxxxxxxxx. xxx xxxxxxxx xxx xx xx, . xxx x xxxxx x x. xxx xxxx xxxxxxx xxxxx,x. x x x xx xxxxxx. xxxxxx xx x xxx xx x,x. xxxxxxxx xx xxx. xxxx x xx x xxx xx xx,x. xxx x xxxxx xxx. xxxxxx xxx x xxx xx xx, . x xx xxxxx xxx. xxx xx x xxxxxxx x xxx, . xx xxxxx xxxx x. xxx xx xxxxx xxx xxxxx,x. x xxx xxxxx xxx. xxx xx xx xxxxxx xx xx, . x xx xxxx x x x. xxx xx xx xxxxxx xx xx, .
+PASS
+PASS
+PASS
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmincontentrowmustshrinkwhencolumngrowshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html (0 => 191879)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html 2015-11-02 09:02:50 UTC (rev 191879)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+ .grid {
+ -webkit-grid-template-columns: -webkit-min-content 1fr;
+ -webkit-grid-template-rows: -webkit-min-content;
+ width: 500px;
+ font: 10px/1 Ahem;
+ }
+</style>
+<script>
+function shrinkToFitTest()
+{
+ checkLayout('.grid');
+ reduceContainerWidthAndCheckLayout();
+ checkLayout('.grid');
+ restoreContainerWidthAndCheckLayout();
+ checkLayout('.grid');
+};
+
+function reduceContainerWidthAndCheckLayout()
+{
+ var grid = document.getElementById("grid")
+ grid.style.width = "250px";
+ grid.setAttribute("data-expected-width", "250");
+ grid.setAttribute("data-expected-height", "300");
+
+ var cell1 = document.getElementById("cell1")
+ cell1.setAttribute("data-expected-width", "80");
+ cell1.setAttribute("data-expected-height", "300");
+
+ var cell2 = document.getElementById("cell2")
+ cell2.setAttribute("data-expected-width", "170");
+ cell2.setAttribute("data-expected-height", "300");
+};
+
+function restoreContainerWidthAndCheckLayout()
+{
+ var grid = document.getElementById("grid")
+ grid.style.width = "500px";
+ grid.setAttribute("data-expected-width", "500");
+ grid.setAttribute("data-expected-height", "110");
+
+ var cell1 = document.getElementById("cell1")
+ cell1.setAttribute("data-expected-width", "80");
+ cell1.setAttribute("data-expected-height", "110");
+
+ var cell2 = document.getElementById("cell2")
+ cell2.setAttribute("data-expected-width", "420");
+ cell2.setAttribute("data-expected-height", "110");
+};
+</script>
+<body onload="shrinkToFitTest();">
+
+<p>This test checks that a min-content sized row track grows when the container width is reduced and that it shrinks to fit its content when container is resized to its initial dimensions.</p>
+
+<div id="grid" class="grid" data-expected-width="500" data-expected-height="110">
+ <div id="cell1" class="firstRowFirstColumn" data-expected-width="80" data-expected-height="110">
+ #cell1 (min-content)
+ </div>
+ <div id="cell2" class="firstRowSecondColumn" data-expected-width="420" data-expected-height="110">
+ <span>
+ #cell2 (1fr) xxx. xx xxx xxxxx xxx xxx ,x. xxxxx xx xx xxx. xxx xx xxxxx xxx xxxxx, . xx xx xxxxxxxxx. xxx xxxxxxxx xxx xx xx, . xxx x xxxxx x x. xxx xxxx xxxxxxx xxxxx,x. x x x xx xxxxxx. xxxxxx xx x xxx xx x,x. xxxxxxxx xx xxx. xxxx x xx x xxx xx xx,x. xxx x xxxxx xxx. xxxxxx xxx x xxx xx xx, . x xx xxxxx xxx. xxx xx x xxxxxxx x xxx, . xx xxxxx xxxx x. xxx xx xxxxx xxx xxxxx,x. x xxx xxxxx xxx. xxx xx xx xxxxxx xx xx, . x xx xxxx x x x. xxx xx xx xxxxxx xx xx, .</span>
+ </div>
+</div>
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutindefiniteheightsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt (0 => 191879)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt 2015-11-02 09:02:50 UTC (rev 191879)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+Tests how a change in grid's height requires evaluating again whether the grid has indefinite or definite height.
+
+The grid bellow had initially 'height: auto' (indefinite) and has been changed to '90px' (definite).
+
+PASS
+The grid bellow had initially 'height: 90px' (definite) and has been changed to 'auto' (indefinite).
+
+PASS
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutindefiniteheightshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html (0 => 191879)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html 2015-11-02 09:02:50 UTC (rev 191879)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid: 50px / minmax(5px, 1fr) minmax(5px, 2fr);
+}
+
+#fromIndefinite { height: auto; }
+#toIndefinite { height: 90px; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<p>Tests how a change in grid's height requires evaluating again whether the grid has indefinite or definite height.</p>
+
+<p>The grid bellow had initially 'height: auto' (indefinite) and has been changed to '90px' (definite).</p>
+<div class="constrainedContainer">
+ <div id="fromIndefinite" class="grid">
+ <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+ <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="60"></div>
+ </div>
+</div>
+
+<hr style="margin-top: 150px;">
+
+<p>The grid bellow had initially 'height: 90px' (definite) and has been changed to 'auto' (indefinite).</p>
+<div class="constrainedContainer">
+ <div id="toIndefinite" class="grid">
+ <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div>
+ <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+ </div>
+</div>
+
+<script>
+document.body.offsetLeft;
+document.getElementById("toIndefinite").style.height = "auto";
+document.getElementById("fromIndefinite").style.height = "90px";
+checkLayout(".grid");
+</script>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (191878 => 191879)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-11-02 08:41:02 UTC (rev 191878)
+++ trunk/Source/WebCore/ChangeLog 2015-11-02 09:02:50 UTC (rev 191879)
</span><span class="lines">@@ -1,3 +1,21 @@
</span><ins>+2015-10-29 Sergio Villar Senin <svillar@igalia.com>
+
+ [CSS Grid Layout] min-content row does not always shrink
+ https://bugs.webkit.org/show_bug.cgi?id=144581
+
+ Reviewed by Zalan Bujtas.
+
+ Grid items height must be recomputed whenever the grid tracks
+ change if the items had been previously stretched. In those
+ cases we have to clear the override height and layout the item
+ with the new row size.
+
+ Tests: fast/css-grid-layout/min-content-row-must-shrink-when-column-grows.html
+ fast/css-grid-layout/relayout-indefinite-heights.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::logicalContentHeightForChild):
+
</ins><span class="cx"> 2015-11-01 Brady Eidson <beidson@apple.com>
</span><span class="cx">
</span><span class="cx"> Modern IDB: IBDObjectStore.count() support.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (191878 => 191879)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-11-02 08:41:02 UTC (rev 191878)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-11-02 09:02:50 UTC (rev 191879)
</span><span class="lines">@@ -590,7 +590,7 @@
</span><span class="cx"> {
</span><span class="cx"> Optional<LayoutUnit> oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
</span><span class="cx"> LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
</span><del>- if (child.hasRelativeLogicalHeight() || !oldOverrideContainingBlockContentLogicalWidth || oldOverrideContainingBlockContentLogicalWidth.value() != overrideContainingBlockContentLogicalWidth)
</del><ins>+ if (child.hasOverrideLogicalContentHeight() || child.hasRelativeLogicalHeight() || !oldOverrideContainingBlockContentLogicalWidth || oldOverrideContainingBlockContentLogicalWidth.value() != overrideContainingBlockContentLogicalWidth)
</ins><span class="cx"> child.setNeedsLayout(MarkOnlyThis);
</span><span class="cx">
</span><span class="cx"> // We need to clear the stretched height to properly compute logical height during layout.
</span><span class="lines">@@ -602,6 +602,7 @@
</span><span class="cx"> // what we are interested in here. Thus we need to set the override logical height to Nullopt (no possible resolution).
</span><span class="cx"> if (child.hasRelativeLogicalHeight())
</span><span class="cx"> child.setOverrideContainingBlockContentLogicalHeight(Nullopt);
</span><ins>+
</ins><span class="cx"> child.layoutIfNeeded();
</span><span class="cx"> return child.logicalHeight() + child.marginLogicalHeight();
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>