<!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>[213449] 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/213449">213449</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2017-03-06 07:30:34 -0800 (Mon, 06 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Stretch should grow and shrink items to fit its grid area
https://bugs.webkit.org/show_bug.cgi?id=163200
Reviewed by Darin Adler.
Source/WebCore:
After some discussions the CSS WG agreed that stretch should not only
grow items, but also shrink them to fit its grid area.
That way the "min-width|height: auto" is somehow ignored for grid items.
More info at: https://github.com/w3c/csswg-drafts/issues/283
The good part is that this allows us to remove some ugly code we've
in RenderBox that was only used by Grid Layout.
For images, we'll be stretching on both axis right now, so the aspect
ratio won't be preserved. The default behavior might change in those
cases, but that should be implemented in a different patch.
* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeLogicalWidthInRegion):
(WebCore::RenderBox::computeLogicalHeight):
LayoutTests:
The tests have been updated according to the new expected behavior.
* fast/css-grid-layout/grid-container-percentage-columns.html:
* fast/css-grid-layout/min-width-height-auto-and-margins.html:
* fast/css-grid-layout/min-width-height-auto.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainerpercentagecolumnshtml">trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautohtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.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>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213448 => 213449)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-03-06 14:19:40 UTC (rev 213448)
+++ trunk/LayoutTests/ChangeLog 2017-03-06 15:30:34 UTC (rev 213449)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2017-03-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Stretch should grow and shrink items to fit its grid area
+ https://bugs.webkit.org/show_bug.cgi?id=163200
+
+ Reviewed by Darin Adler.
+
+ The tests have been updated according to the new expected behavior.
+
+ * fast/css-grid-layout/grid-container-percentage-columns.html:
+ * fast/css-grid-layout/min-width-height-auto-and-margins.html:
+ * fast/css-grid-layout/min-width-height-auto.html:
+
</ins><span class="cx"> 2017-03-06 Antti Koivisto <antti@apple.com>
</span><span class="cx">
</span><span class="cx"> Allow render tree building before loading stylesheet elements
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerpercentagecolumnshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html (213448 => 213449)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html 2017-03-06 14:19:40 UTC (rev 213448)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html 2017-03-06 15:30:34 UTC (rev 213449)
</span><span class="lines">@@ -125,7 +125,7 @@
</span><span class="cx"> <div class="wrapper">
</span><span class="cx"> <div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
</span><span class="cx"> <div class="firstRowFirstColumn"
</span><del>- data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
</del><ins>+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20">
</ins><span class="cx"> XX X
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html (213448 => 213449)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html 2017-03-06 14:19:40 UTC (rev 213448)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html 2017-03-06 15:30:34 UTC (rev 213449)
</span><span class="lines">@@ -40,7 +40,7 @@
</span><span class="cx"> <p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox">
</span><del>- <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</del><ins>+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="40" data-expected-height="60">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -112,7 +112,7 @@
</span><span class="cx"> <p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p>
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox">
</span><del>- <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</del><ins>+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="0">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -126,7 +126,7 @@
</span><span class="cx"> <p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p>
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox">
</span><del>- <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</del><ins>+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="10">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautohtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html (213448 => 213449)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html 2017-03-06 14:19:40 UTC (rev 213448)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto.html 2017-03-06 15:30:34 UTC (rev 213449)
</span><span class="lines">@@ -46,7 +46,7 @@
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="ahem" data-expected-width="100" data-expected-height="25">XXXX</div>
</del><ins>+ <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -64,13 +64,13 @@
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="ahem maxSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
</del><ins>+ <div class="ahem maxSmaller" data-expected-width="5" data-expected-height="5">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid">
</span><del>- <div class="ahem maxBigger" data-expected-width="100" data-expected-height="25">XXXX</div>
</del><ins>+ <div class="ahem maxBigger" data-expected-width="5" data-expected-height="5">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -77,19 +77,19 @@
</span><span class="cx"> <!-- Check that min-width min-height behavior is preserved when using vertical writing modes -->
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid verticalLR">
</span><del>- <div class="ahem" data-expected-width="25" data-expected-height="100">XXXX</div>
</del><ins>+ <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid verticalLR">
</span><del>- <div class="ahem minHeightSmaller" data-expected-width="25" data-expected-height="12">XXXX</div>
</del><ins>+ <div class="ahem minHeightSmaller" data-expected-width="5" data-expected-height="12">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="container">
</span><span class="cx"> <div class="grid verticalLR">
</span><del>- <div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="100">XXXX</div>
</del><ins>+ <div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="5">XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (213448 => 213449)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-03-06 14:19:40 UTC (rev 213448)
+++ trunk/Source/WebCore/ChangeLog 2017-03-06 15:30:34 UTC (rev 213449)
</span><span class="lines">@@ -1,3 +1,26 @@
</span><ins>+2017-03-06 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Stretch should grow and shrink items to fit its grid area
+ https://bugs.webkit.org/show_bug.cgi?id=163200
+
+ Reviewed by Darin Adler.
+
+ After some discussions the CSS WG agreed that stretch should not only
+ grow items, but also shrink them to fit its grid area.
+ That way the "min-width|height: auto" is somehow ignored for grid items.
+ More info at: https://github.com/w3c/csswg-drafts/issues/283
+
+ The good part is that this allows us to remove some ugly code we've
+ in RenderBox that was only used by Grid Layout.
+
+ For images, we'll be stretching on both axis right now, so the aspect
+ ratio won't be preserved. The default behavior might change in those
+ cases, but that should be implemented in a different patch.
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeLogicalWidthInRegion):
+ (WebCore::RenderBox::computeLogicalHeight):
+
</ins><span class="cx"> 2017-03-06 Miguel Gomez <magomez@igalia.com>
</span><span class="cx">
</span><span class="cx"> [GTK] WebProcess from WebKitGtk+ 2.15.x SIGSEVs in GIFLZWContext::doLZW(unsigned char const*, unsigned long) at Source/WebCore/platform/image-decoders/gif/GIFImageReader.cpp:303
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (213448 => 213449)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp 2017-03-06 14:19:40 UTC (rev 213448)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2017-03-06 15:30:34 UTC (rev 213449)
</span><span class="lines">@@ -2427,10 +2427,6 @@
</span><span class="cx"> // Width calculations
</span><span class="cx"> if (treatAsReplaced) {
</span><span class="cx"> computedValues.m_extent = logicalWidthLength.value() + borderAndPaddingLogicalWidth();
</span><del>- } else if (parent()->isRenderGrid() && style().logicalWidth().isAuto() && style().logicalMinWidth().isAuto() && style().overflowX() == OVISIBLE && containerWidthInInlineDirection < minPreferredLogicalWidth()) {
- // TODO (lajava) Move this logic to the LayoutGrid class.
- // Implied minimum size of Grid items.
- computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(minPreferredLogicalWidth(), containerWidthInInlineDirection, cb);
</del><span class="cx"> } else {
</span><span class="cx"> LayoutUnit preferredWidth = computeLogicalWidthInRegionUsing(MainOrPreferredSize, styleToUse.logicalWidth(), containerWidthInInlineDirection, cb, region);
</span><span class="cx"> computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(preferredWidth, containerWidthInInlineDirection, cb, region);
</span><span class="lines">@@ -2853,13 +2849,7 @@
</span><span class="cx"> // FIXME: Account for block-flow in flexible boxes.
</span><span class="cx"> // https://bugs.webkit.org/show_bug.cgi?id=46418
</span><span class="cx"> if (hasOverrideLogicalContentHeight() && (parent()->isFlexibleBoxIncludingDeprecated() || parent()->isRenderGrid())) {
</span><del>- LayoutUnit contentHeight = overrideLogicalContentHeight();
- if (parent()->isRenderGrid() && style().logicalHeight().isAuto() && style().logicalMinHeight().isAuto() && style().overflowX() == OVISIBLE) {
- LayoutUnit intrinsicContentHeight = computedValues.m_extent - borderAndPaddingLogicalHeight();
- if (auto minContentHeight = computeContentLogicalHeight(MinSize, Length(MinContent), intrinsicContentHeight))
- contentHeight = std::max(contentHeight, constrainContentBoxLogicalHeightByMinMax(minContentHeight.value(), intrinsicContentHeight));
- }
- h = Length(contentHeight, Fixed);
</del><ins>+ h = Length(overrideLogicalContentHeight(), Fixed);
</ins><span class="cx"> } else if (treatAsReplaced)
</span><span class="cx"> h = Length(computeReplacedLogicalHeight(), Fixed);
</span><span class="cx"> else {
</span></span></pre>
</div>
</div>
</body>
</html>