<!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>[192573] 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/192573">192573</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2015-11-18 04:53:26 -0800 (Wed, 18 Nov 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Grid Layout] inline margins not honored when not using stretch in row-axis alignment
https://bugs.webkit.org/show_bug.cgi?id=151323
Reviewed by Sergio Villar Senin.
Source/WebCore:
There are some situations where we avoid to compute the inline-axis
margins when computing the logical width of a box. One of those situations
is when we have set an override width; this only affects for now to flex
and grid items. We also follow this approach when setting the logical
width based on the restrictions of 'auto' value in the 'min-width'
property.
This behavior is not correct, since there is no reason to avoid
computing this margins, in the general case. I think this logic was
designed as an optimization for flexbox, which was already computing
the margins by its own, but it's not applicable in the general case, so
grid needs these margins to be computed properly.
For the shrink-to-fit behavior we can add some grid related logic to the
already defined RenderBox function "sizesLogicalWidthToFitContent",
so we avoid the override width.
Tests: fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html
fast/css-grid-layout/min-width-height-auto-and-margins.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeLogicalWidthInRegion):
(WebCore::RenderBox::sizesLogicalWidthToFitContent):
* rendering/RenderGrid.cpp:
(WebCore::defaultAlignmentChangedFromStretchInRowAxis):
(WebCore::selfAlignmentChangedFromStretchInRowAxis):
(WebCore::RenderGrid::styleDidChange):
(WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
(WebCore::selfAlignmentChangedFromStretchInColumnAxis): Deleted.
(WebCore::RenderGrid::computeMarginLogicalHeightForChild): Deleted.
(WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching): Deleted.
LayoutTests:
Tests to verify that margins are computed properly on grid items
using an alignment value different than stretch or when min-width
is auto.
* fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt: Added.
* fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html: Added.
* fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt: Added.
* fast/css-grid-layout/min-width-height-auto-and-margins.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css</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="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddingexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml">trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (192572 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-11-18 12:43:39 UTC (rev 192572)
+++ trunk/LayoutTests/ChangeLog 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2015-11-18 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] inline margins not honored when not using stretch in row-axis alignment
+ https://bugs.webkit.org/show_bug.cgi?id=151323
+
+ Reviewed by Sergio Villar Senin.
+
+ Tests to verify that margins are computed properly on grid items
+ using an alignment value different than stretch or when min-width
+ is auto.
+
+ * fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html: Added.
+ * fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt: Added.
+ * fast/css-grid-layout/min-width-height-auto-and-margins.html: Added.
+
</ins><span class="cx"> 2015-11-18 Adam Bergkvist <adam.bergkvist@ericsson.com>
</span><span class="cx">
</span><span class="cx"> WebRTC: [GTK] Skip failing MediaStream tests
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt (0 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -0,0 +1,74 @@
</span><ins>+This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.
+
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemautosizedalignjustifymarginborderpaddinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html (0 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -0,0 +1,231 @@
</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>
+body {
+ margin: 0;
+}
+
+.grid {
+ -webkit-grid-template-columns: 100px 200px;
+ -webkit-grid-template-rows: 200px 200px;
+ padding: 10px 15px 20px 30px;
+ border-width: 5px 10px 15px 20px;
+ border-style: dotted;
+ border-color: blue;
+ width: -webkit-fit-content;
+ position: relative;
+}
+
+.content {
+ width: 20px;
+ height: 40px;
+}
+
+.cell {
+ margin: 4px 8px 12px 16px;
+}
+</style>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid itemsStart" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="146" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid itemsCenter" data-expected-width="375" data-expected-height="450">
+ <div class="firstRowFirstColumn cell" data-offset-x="74" data-offset-y="86" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="224" data-offset-y="286" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid itemsEnd" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid itemsLeft" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid itemsRight" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="146" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+ <div class="grid directionRTL itemsStart" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="cell firstRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="cell secondRowFirstColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+ <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="274" data-offset-y="86" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="286" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+ <div class="grid directionRTL itemsEnd" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'left' | justify-items: 'left'</p>
+ <div class="grid directionRTL itemsLeft" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+ <div class="grid directionRTL itemsRight" data-expected-width="375" data-expected-height="450">
+ <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionLTR cell firstRowFirstColumn" data-offset-x="302" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+ <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
+
+<div>
+ <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+ direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+ <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+ <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+ <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt (0 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -0,0 +1,82 @@
</span><ins>+This test checks min-width|height auto does not interfere in margins computation, properly placing items inside their grid area.
+
+Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column of same size than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column of same size as margin-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row of same size than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row of same size as margin-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row bigger than margin-box, column bigger column margin-box
+
+XXXX
+PASS
+Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box
+
+XXXX
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutminwidthheightautoandmarginshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html (0 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -0,0 +1,179 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.columnsSmallerThanContentBox { -webkit-grid-template-columns: 80px; }
+.columnsSameAsContentBox { -webkit-grid-template-columns: 100px; }
+.columnsBiggerThanContentBox { -webkit-grid-template-columns: 120px; }
+.columnsSameAsMarginBox { -webkit-grid-template-columns: 140px; }
+.columnsBiggerThanMarginBox { -webkit-grid-template-columns: 150px; }
+
+.rowsSmallerThanContentBox { -webkit-grid-template-rows: 20px; }
+.rowsEqualAsContentBox { -webkit-grid-template-rows: 25px; }
+.rowsBiggerThanContentBox { -webkit-grid-template-rows: 50px; }
+.rowsSameAsMarginBox { -webkit-grid-template-rows: 65px; }
+.rowsBiggerThanMarginBox { -webkit-grid-template-rows: 100px; }
+
+.container {
+ position: relative;
+ width: 200px;
+ height: 100px;
+ border: 1px solid black;
+}
+
+.item {
+ font: 25px/1 Ahem;
+ margin: 20px;
+ background-color: blue;
+}
+
+.fitContentHeight { align-items: start; }
+.fitContentWidth { justify-items: start; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks min-width|height auto does not interfere in margins computation, properly placing items inside their grid area.</p>
+
+<!-- Checking min-width: auto logic -->
+<p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | column of same size than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid columnsSameAsContentBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="60" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid columnsBiggerThanContentBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="80" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | column of same size as margin-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid columnsSameAsMarginBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<!-- Checking shrink-to-fit in row-axis -->
+<p>Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<!-- Checking stretch in column-axis -->
+<p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | row of same size than content-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid rowsSameAsContentBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p>
+<div class="container">
+ <div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | row of same size as margin-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid rowsSameAsMarginBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in both axis | row bigger than margin-box, column bigger column margin-box</p>
+<div class="container">
+ <div class="grid rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
+ </div>
+</div>
+
+<!-- Checking min-height: auto logic -->
+<p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box</p>
+<div class="container">
+ <div class="grid fitContentHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
+ <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (192572 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2015-11-18 12:43:39 UTC (rev 192572)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -43,6 +43,10 @@
</span><span class="cx"> .justifyContentStretch { justify-content: stretch; }
</span><span class="cx">
</span><span class="cx"> /* Both align-items and justify-items */
</span><ins>+.itemsStart {
+ align-items: start;
+ justify-items: start;
+}
</ins><span class="cx"> .itemsCenter {
</span><span class="cx"> align-items: center;
</span><span class="cx"> justify-items: center;
</span><span class="lines">@@ -72,3 +76,8 @@
</span><span class="cx"> align-items: self-end;
</span><span class="cx"> justify-items: self-end;
</span><span class="cx"> }
</span><ins>+
+.stretch {
+ align-self: stretch;
+ justify-self: stretch;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (192572 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-11-18 12:43:39 UTC (rev 192572)
+++ trunk/Source/WebCore/ChangeLog 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -1,3 +1,42 @@
</span><ins>+2015-11-18 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] inline margins not honored when not using stretch in row-axis alignment
+ https://bugs.webkit.org/show_bug.cgi?id=151323
+
+ Reviewed by Sergio Villar Senin.
+
+ There are some situations where we avoid to compute the inline-axis
+ margins when computing the logical width of a box. One of those situations
+ is when we have set an override width; this only affects for now to flex
+ and grid items. We also follow this approach when setting the logical
+ width based on the restrictions of 'auto' value in the 'min-width'
+ property.
+
+ This behavior is not correct, since there is no reason to avoid
+ computing this margins, in the general case. I think this logic was
+ designed as an optimization for flexbox, which was already computing
+ the margins by its own, but it's not applicable in the general case, so
+ grid needs these margins to be computed properly.
+
+ For the shrink-to-fit behavior we can add some grid related logic to the
+ already defined RenderBox function "sizesLogicalWidthToFitContent",
+ so we avoid the override width.
+
+ Tests: fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html
+ fast/css-grid-layout/min-width-height-auto-and-margins.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeLogicalWidthInRegion):
+ (WebCore::RenderBox::sizesLogicalWidthToFitContent):
+ * rendering/RenderGrid.cpp:
+ (WebCore::defaultAlignmentChangedFromStretchInRowAxis):
+ (WebCore::selfAlignmentChangedFromStretchInRowAxis):
+ (WebCore::RenderGrid::styleDidChange):
+ (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
+ (WebCore::selfAlignmentChangedFromStretchInColumnAxis): Deleted.
+ (WebCore::RenderGrid::computeMarginLogicalHeightForChild): Deleted.
+ (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching): Deleted.
+
</ins><span class="cx"> 2015-11-18 Aaron Chu <arona.chu@gmail.com>
</span><span class="cx">
</span><span class="cx"> AX: Shadow DOM video player controls menus need aria-owns on the trigger buttons
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (192572 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp 2015-11-18 12:43:39 UTC (rev 192572)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -2359,11 +2359,7 @@
</span><span class="cx"> // width. Use the width from the style context.
</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><del>- if (hasOverrideLogicalContentWidth() && (isRubyRun() || style().borderFit() == BorderFitLines || (parent()->isFlexibleBoxIncludingDeprecated()
-#if ENABLE(CSS_GRID_LAYOUT)
- || parent()->isRenderGrid()
-#endif
- ))) {
</del><ins>+ if (hasOverrideLogicalContentWidth() && (isRubyRun() || style().borderFit() == BorderFitLines || (parent()->isFlexibleBoxIncludingDeprecated()))) {
</ins><span class="cx"> computedValues.m_extent = overrideLogicalContentWidth() + borderAndPaddingLogicalWidth();
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -2381,16 +2377,6 @@
</span><span class="cx"> LayoutUnit containerLogicalWidth = std::max<LayoutUnit>(0, containingBlockLogicalWidthForContentInRegion(region));
</span><span class="cx"> bool hasPerpendicularContainingBlock = cb->isHorizontalWritingMode() != isHorizontalWritingMode();
</span><span class="cx">
</span><del>-#if ENABLE(CSS_GRID_LAYOUT)
- if (parent()->isRenderGrid() && style().logicalWidth().isAuto() && style().logicalMinWidth().isAuto() && style().overflowX() == OVISIBLE) {
- LayoutUnit minLogicalWidth = minPreferredLogicalWidth();
- if (containerLogicalWidth < minLogicalWidth) {
- computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(minLogicalWidth, containerLogicalWidth, cb);
- return;
- }
- }
-#endif
-
</del><span class="cx"> if (isInline() && !isInlineBlockOrInlineTable()) {
</span><span class="cx"> // just calculate margins
</span><span class="cx"> computedValues.m_margins.m_start = minimumValueForLength(styleToUse.marginStart(), containerLogicalWidth);
</span><span class="lines">@@ -2401,9 +2387,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Width calculations
</span><del>- if (treatAsReplaced)
</del><ins>+ if (treatAsReplaced) {
</ins><span class="cx"> computedValues.m_extent = logicalWidthLength.value() + borderAndPaddingLogicalWidth();
</span><del>- else {
</del><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+ } else if (parent()->isRenderGrid() && style().logicalWidth().isAuto() && style().logicalMinWidth().isAuto() && style().overflowX() == OVISIBLE && containerLogicalWidth < minPreferredLogicalWidth()) {
+ // TODO (lajava) Move this logic to the LayoutGrid class.
+ // Implied minimum size of Grid items.
+ computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(minPreferredLogicalWidth(), containerLogicalWidth, cb);
+#endif
+ } else {
</ins><span class="cx"> LayoutUnit containerWidthInInlineDirection = containerLogicalWidth;
</span><span class="cx"> if (hasPerpendicularContainingBlock)
</span><span class="cx"> containerWidthInInlineDirection = perpendicularContainingBlockLogicalHeight();
</span><span class="lines">@@ -2535,6 +2527,13 @@
</span><span class="cx"> if (isFloating() || (isInlineBlockOrInlineTable() && !isHTMLMarquee()))
</span><span class="cx"> return true;
</span><span class="cx">
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+ 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;
+ }
+#endif
+
</ins><span class="cx"> // This code may look a bit strange. Basically width:intrinsic should clamp the size when testing both
</span><span class="cx"> // min-width and width. max-width is only clamped if it is also intrinsic.
</span><span class="cx"> Length logicalWidth = (widthType == MaxSize) ? style().logicalMaxWidth() : style().logicalWidth();
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (192572 => 192573)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-11-18 12:43:39 UTC (rev 192572)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-11-18 12:53:26 UTC (rev 192573)
</span><span class="lines">@@ -263,6 +263,11 @@
</span><span class="cx"> return !defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static inline bool defaultAlignmentChangedFromStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
+{
+ return defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && !defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
+}
+
</ins><span class="cx"> static inline bool defaultAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
</span><span class="cx"> {
</span><span class="cx"> return defaultAlignmentIsStretch(oldStyle.alignItemsPosition()) && !defaultAlignmentIsStretch(newStyle.alignItemsPosition());
</span><span class="lines">@@ -274,6 +279,12 @@
</span><span class="cx"> && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) == ItemPositionStretch;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static inline bool selfAlignmentChangedFromStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
+{
+ return RenderStyle::resolveJustification(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
+ && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) != ItemPositionStretch;
+}
+
</ins><span class="cx"> static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
</span><span class="cx"> {
</span><span class="cx"> return RenderStyle::resolveAlignment(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
</span><span class="lines">@@ -287,15 +298,18 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> const RenderStyle& newStyle = style();
</span><del>- if (defaultAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle) || defaultAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle)) {
</del><ins>+ if (defaultAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle) || defaultAlignmentChangedFromStretchInRowAxis(*oldStyle, newStyle)
+ || defaultAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle)) {
</ins><span class="cx"> // Grid items that were not previously stretched in row-axis need to be relayed out so we can compute new available space.
</span><span class="cx"> // Grid items that were previously stretching in column-axis need to be relayed out so we can compute new available space.
</span><span class="cx"> // This is only necessary for stretching since other alignment values don't change the size of the box.
</span><span class="cx"> for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
</span><span class="cx"> if (child->isOutOfFlowPositioned())
</span><span class="cx"> continue;
</span><del>- if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child->style()) || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child->style()))
</del><ins>+ if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child->style()) || selfAlignmentChangedFromStretchInRowAxis(*oldStyle, newStyle, child->style())
+ || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child->style())) {
</ins><span class="cx"> child->setChildNeedsLayout(MarkOnlyThis);
</span><ins>+ }
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -1627,32 +1641,15 @@
</span><span class="cx"> // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
</span><span class="cx"> void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child)
</span><span class="cx"> {
</span><del>- ASSERT(child.overrideContainingBlockContentLogicalWidth() && child.overrideContainingBlockContentLogicalHeight());
</del><ins>+ ASSERT(child.overrideContainingBlockContentLogicalHeight());
</ins><span class="cx">
</span><del>- // We clear both width and height override values because we will decide now whether they
- // are allowed or not, evaluating the conditions which might have changed since the old
- // values were set.
- child.clearOverrideSize();
</del><ins>+ // We clear height override values because we will decide now whether it's allowed or
+ // not, evaluating the conditions which might have changed since the old values were set.
+ child.clearOverrideLogicalContentHeight();
</ins><span class="cx">
</span><span class="cx"> auto& gridStyle = style();
</span><span class="cx"> auto& childStyle = child.style();
</span><span class="cx"> bool isHorizontalMode = isHorizontalWritingMode();
</span><del>- bool hasAutoSizeInRowAxis = isHorizontalMode ? childStyle.width().isAuto() : childStyle.height().isAuto();
- bool allowedToStretchChildAlongRowAxis = hasAutoSizeInRowAxis && !childStyle.marginStartUsing(&gridStyle).isAuto() && !childStyle.marginEndUsing(&gridStyle).isAuto();
- if (!allowedToStretchChildAlongRowAxis || RenderStyle::resolveJustification(gridStyle, childStyle, ItemPositionStretch) != ItemPositionStretch) {
- bool hasAutoMinSizeInRowAxis = isHorizontalMode ? childStyle.minWidth().isAuto() : childStyle.minHeight().isAuto();
- bool canShrinkToFitInRowAxisForChild = !hasAutoMinSizeInRowAxis || child.minPreferredLogicalWidth() <= child.overrideContainingBlockContentLogicalWidth().value();
- // TODO(lajava): how to handle orthogonality in this case ?.
- // TODO(lajava): grid track sizing and positioning do not support orthogonal modes yet.
- if (hasAutoSizeInRowAxis && canShrinkToFitInRowAxisForChild) {
- LayoutUnit childWidthToFitContent = std::max(std::min(child.maxPreferredLogicalWidth(), child.overrideContainingBlockContentLogicalWidth().value() - child.marginLogicalWidth()), child.minPreferredLogicalWidth());
- LayoutUnit desiredLogicalWidth = child.constrainLogicalHeightByMinMax(childWidthToFitContent, Nullopt);
- child.setOverrideLogicalContentWidth(desiredLogicalWidth - child.borderAndPaddingLogicalWidth());
- if (desiredLogicalWidth != child.logicalWidth())
- child.setNeedsLayout();
- }
- }
-
</del><span class="cx"> bool hasAutoSizeInColumnAxis = isHorizontalMode ? childStyle.height().isAuto() : childStyle.width().isAuto();
</span><span class="cx"> bool allowedToStretchChildAlongColumnAxis = hasAutoSizeInColumnAxis && !childStyle.marginBeforeUsing(&gridStyle).isAuto() && !childStyle.marginAfterUsing(&gridStyle).isAuto();
</span><span class="cx"> if (allowedToStretchChildAlongColumnAxis && RenderStyle::resolveAlignment(gridStyle, childStyle, ItemPositionStretch) == ItemPositionStretch) {
</span></span></pre>
</div>
</div>
</body>
</html>