<!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>[195284] 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/195284">195284</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2016-01-19 03:36:11 -0800 (Tue, 19 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid][css-align] justify-self stretch is not applied for img elements
https://bugs.webkit.org/show_bug.cgi?id=153206
Reviewed by Darin Adler.
Source/WebCore:
When computing the logical height, we check first if there is an override
height value set as a consequence of the stretching logic, so we use it
directly for any kind of element. However, in the case of the width
computation, we don't use such override value because it's the default
behavior of block-level boxes.
However, we consider some special cases which have to be treated as
replaced elements. Theses cases are evaluated first, so we don't let the
regular width computation logic to be executed, which is what we want
to implement the stretch behavior.
In order to let replaced elements, such images, to be stretched as a
consequence of the CSS alignment properties, we need to exclude grid
items from the cases to be treated as replaced elements during the width
computation.
Test: fast/css-grid-layout/grid-align-stretching-replaced-items.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeLogicalWidthInRegion):
(WebCore::RenderBox::hasStretchedLogicalWidth):
(WebCore::RenderBox::sizesLogicalWidthToFitContent):
* rendering/RenderBox.h:
LayoutTests:
Test to verify Replaced Elements, like images, are stretched in the inline
axis, when fulfilling the Box Alignment restrictions on this regard.
* fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt: Added.
* fast/css-grid-layout/grid-align-stretching-replaced-items.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="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxh">trunk/Source/WebCore/rendering/RenderBox.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignstretchingreplaceditemsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridalignstretchingreplaceditemshtml">trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (195283 => 195284)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/LayoutTests/ChangeLog 2016-01-19 11:36:11 UTC (rev 195284)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-01-19 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid][css-align] justify-self stretch is not applied for img elements
+ https://bugs.webkit.org/show_bug.cgi?id=153206
+
+ Reviewed by Darin Adler.
+
+ Test to verify Replaced Elements, like images, are stretched in the inline
+ axis, when fulfilling the Box Alignment restrictions on this regard.
+
+ * fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt: Added.
+ * fast/css-grid-layout/grid-align-stretching-replaced-items.html: Added.
+
</ins><span class="cx"> 2016-01-19 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><span class="cx"> Text::splitText doesn't update Range end points anchored on parent nodes
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignstretchingreplaceditemsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt (0 => 195284)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items-expected.txt 2016-01-19 11:36:11 UTC (rev 195284)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.
+
+The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into
+
+
+PASS
+The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.
+
+
+PASS
+The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.
+
+
+PASS
+The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.
+
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridalignstretchingreplaceditemshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html (0 => 195284)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-stretching-replaced-items.html 2016-01-19 11:36:11 UTC (rev 195284)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+.grid {
+ -webkit-grid-template-columns: 500px;
+ -webkit-grid-template-rows: 500px;
+}
+.fixedSizes {
+ width: 150px;
+ height: 150px;
+}
+.autoMargins {
+ margin: auto;
+}
+</style>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into</p>
+ <div class="grid">
+ <img src="../../css3/images/resources/blue-100.png" data-expected-width="500" data-expected-height="500"/>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.</p>
+ <div class="grid itemsCenter">
+ <img src="../../css3/images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.</p>
+ <div class="grid">
+ <img class="fixedSizes" src="../../css3/images/resources/blue-100.png" data-expected-width="150" data-expected-height="150"/>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.</p>
+ <div class="grid">
+ <img class="autoMargins" src="../../css3/images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+ </div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (195283 => 195284)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/Source/WebCore/ChangeLog 2016-01-19 11:36:11 UTC (rev 195284)
</span><span class="lines">@@ -1,3 +1,34 @@
</span><ins>+2016-01-19 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid][css-align] justify-self stretch is not applied for img elements
+ https://bugs.webkit.org/show_bug.cgi?id=153206
+
+ Reviewed by Darin Adler.
+
+ When computing the logical height, we check first if there is an override
+ height value set as a consequence of the stretching logic, so we use it
+ directly for any kind of element. However, in the case of the width
+ computation, we don't use such override value because it's the default
+ behavior of block-level boxes.
+
+ However, we consider some special cases which have to be treated as
+ replaced elements. Theses cases are evaluated first, so we don't let the
+ regular width computation logic to be executed, which is what we want
+ to implement the stretch behavior.
+
+ In order to let replaced elements, such images, to be stretched as a
+ consequence of the CSS alignment properties, we need to exclude grid
+ items from the cases to be treated as replaced elements during the width
+ computation.
+
+ Test: fast/css-grid-layout/grid-align-stretching-replaced-items.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeLogicalWidthInRegion):
+ (WebCore::RenderBox::hasStretchedLogicalWidth):
+ (WebCore::RenderBox::sizesLogicalWidthToFitContent):
+ * rendering/RenderBox.h:
+
</ins><span class="cx"> 2016-01-19 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><span class="cx"> Text::splitText doesn't update Range end points anchored on parent nodes
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (195283 => 195284)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2016-01-19 11:36:11 UTC (rev 195284)
</span><span class="lines">@@ -2369,7 +2369,12 @@
</span><span class="cx"> // https://bugs.webkit.org/show_bug.cgi?id=46418
</span><span class="cx"> bool inVerticalBox = parent()->isDeprecatedFlexibleBox() && (parent()->style().boxOrient() == VERTICAL);
</span><span class="cx"> bool stretching = (parent()->style().boxAlign() == BSTRETCH);
</span><ins>+ // FIXME: Stretching is the only reason why we don't want the box to be treated as a replaced element, so we could perhaps
+ // refactor all this logic, not only for flex and grid since alignment is intended to be applied to any block.
</ins><span class="cx"> bool treatAsReplaced = shouldComputeSizeAsReplaced() && (!inVerticalBox || !stretching);
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+ treatAsReplaced = treatAsReplaced && (!isGridItem() || !hasStretchedLogicalWidth());
+#endif
</ins><span class="cx">
</span><span class="cx"> const RenderStyle& styleToUse = style();
</span><span class="cx"> Length logicalWidthLength = treatAsReplaced ? Length(computeReplacedLogicalWidth(), Fixed) : styleToUse.logicalWidth();
</span><span class="lines">@@ -2517,6 +2522,23 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+// FIXME: Can/Should we move this inside specific layout classes (flex. grid)? Can we refactor columnFlexItemHasStretchAlignment logic?
+bool RenderBox::hasStretchedLogicalWidth() const
+{
+ auto& style = this->style();
+ if (!style.logicalWidth().isAuto() || style.marginStart().isAuto() || style.marginEnd().isAuto())
+ return false;
+ RenderBlock* containingBlock = this->containingBlock();
+ if (!containingBlock) {
+ // We are evaluating align-self/justify-self, which default to 'normal' for the root element.
+ // The 'normal' value behaves like 'start' except for Flexbox Items, which obviously should have a container.
+ return false;
+ }
+ if (containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
+ return RenderStyle::resolveAlignment(containingBlock->style(), style, ItemPositionStretch) == ItemPositionStretch;
+ return RenderStyle::resolveJustification(containingBlock->style(), style, ItemPositionStretch) == ItemPositionStretch;
+}
+
</ins><span class="cx"> bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const
</span><span class="cx"> {
</span><span class="cx"> // Anonymous inline blocks always fill the width of their containing block.
</span><span class="lines">@@ -2529,10 +2551,8 @@
</span><span class="cx"> return true;
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><del>- if (parent()->isRenderGrid()) {
- bool allowedToStretchChildAlongRowAxis = style().logicalWidth().isAuto() && !style().marginStartUsing(&parent()->style()).isAuto() && !style().marginEndUsing(&parent()->style()).isAuto();
- return !allowedToStretchChildAlongRowAxis || RenderStyle::resolveJustification(parent()->style(), style(), ItemPositionStretch) != ItemPositionStretch;
- }
</del><ins>+ if (isGridItem())
+ return !hasStretchedLogicalWidth();
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> // This code may look a bit strange. Basically width:intrinsic should clamp the size when testing both
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.h (195283 => 195284)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.h 2016-01-19 11:23:52 UTC (rev 195283)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2016-01-19 11:36:11 UTC (rev 195284)
</span><span class="lines">@@ -423,6 +423,8 @@
</span><span class="cx"> // of a containing block). HTML4 buttons, <select>s, <input>s, legends, and floating/compact elements do this.
</span><span class="cx"> bool sizesLogicalWidthToFitContent(SizeType) const;
</span><span class="cx">
</span><ins>+ bool hasStretchedLogicalWidth() const;
+
</ins><span class="cx"> LayoutUnit shrinkLogicalWidthToAvoidFloats(LayoutUnit childMarginStart, LayoutUnit childMarginEnd, const RenderBlock* cb, RenderRegion*) const;
</span><span class="cx">
</span><span class="cx"> LayoutUnit computeLogicalWidthInRegionUsing(SizeType, Length logicalWidth, LayoutUnit availableLogicalWidth, const RenderBlock* containingBlock, RenderRegion*) const;
</span></span></pre>
</div>
</div>
</body>
</html>