<!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>[207663] 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/207663">207663</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2016-10-21 01:11:14 -0700 (Fri, 21 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Content Alignment broken with indefinite sized grid container
https://bugs.webkit.org/show_bug.cgi?id=163724
Reviewed by Manuel Rego Casasnovas.
Source/WebCore:
The Grid Tracks sizing algorithm receives as parameter the
available space to be used as space for tracks. We hold a variable
to store the remaining free space for each dimension.
When the grid container size is indefinite we can't compute the
available free space after computing track sizes until such
indefinite size is resolved.
No new tests, just added some additional test cases.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock): Compute freeSpace for Rows
after doing layout and resolving the indefinite height.
LayoutTests:
Added additional test cases to verify we compute properly the
available free space for content-alignment, handling correctly the
overflow when needed.
* fast/css-grid-layout/grid-content-alignment-overflow.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowhtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (207662 => 207663)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-10-21 08:04:43 UTC (rev 207662)
+++ trunk/LayoutTests/ChangeLog 2016-10-21 08:11:14 UTC (rev 207663)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-10-21 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Content Alignment broken with indefinite sized grid container
+ https://bugs.webkit.org/show_bug.cgi?id=163724
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ Added additional test cases to verify we compute properly the
+ available free space for content-alignment, handling correctly the
+ overflow when needed.
+
+ * fast/css-grid-layout/grid-content-alignment-overflow.html:
+
</ins><span class="cx"> 2016-10-21 Jer Noble <jer.noble@apple.com>
</span><span class="cx">
</span><span class="cx"> [mac-wk2 release] LayoutTest media/media-source/media-source-seek-detach-crash.html is a flaky failure
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt (207662 => 207663)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt 2016-10-21 08:04:43 UTC (rev 207662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt 2016-10-21 08:11:14 UTC (rev 207663)
</span><span class="lines">@@ -1,10 +1,59 @@
</span><span class="cx"> This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.
</span><span class="cx">
</span><span class="cx"> PASS
</span><ins>+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: center and Overflow-Alignment: default
+
</ins><span class="cx"> PASS
</span><ins>+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
</ins><span class="cx"> PASS
</span><ins>+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: center and Overflow-Alignment: safe
+
</ins><span class="cx"> PASS
</span><ins>+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: center and Overflow-Alignment: safe
+
</ins><span class="cx"> PASS
</span><ins>+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: end and Overflow-Alignment: default
+
</ins><span class="cx"> PASS
</span><ins>+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
</ins><span class="cx"> PASS
</span><ins>+Grid container width of 60px not enough for 2 column tracks of 50px.
+Content-Alignment: end and Overflow-Alignment: safe
+
</ins><span class="cx"> PASS
</span><ins>+Grid container height of 150px not enough for 2 row tracks of 100px.
+Content-Alignment: end and Overflow-Alignment: safe
+
+PASS
+Grid container indefinite size using fit-content, hence no possible overflow.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, hence no possible overflow.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.
+Content-Alignment: end and Overflow-Alignment: unsafe
+
+PASS
+Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.
+Content-Alignment: center and Overflow-Alignment: unsafe
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html (207662 => 207663)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html 2016-10-21 08:04:43 UTC (rev 207662)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html 2016-10-21 08:11:14 UTC (rev 207663)
</span><span class="lines">@@ -3,11 +3,16 @@
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><ins>+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
</ins><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <style>
</span><span class="cx"> body {
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><ins>+.container {
+ position: relative;
+ float: left;
+}
</ins><span class="cx">
</span><span class="cx"> .grid {
</span><span class="cx"> grid-template-columns: 50px 50px;
</span><span class="lines">@@ -14,6 +19,10 @@
</span><span class="cx"> grid-template-rows: 100px 100px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.contentSizedTracks {
+ grid-template: -webkit-max-content 100px / -webkit-max-content 50px;
+}
+
</ins><span class="cx"> .overflowWidth {
</span><span class="cx"> width: 60px;
</span><span class="cx"> height: 300px;
</span><span class="lines">@@ -23,6 +32,24 @@
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 150px;
</span><span class="cx"> }
</span><ins>+
+.item1 {
+ width: 50px;
+ height: 150px;
+}
+.item2 {
+ width: 150px;
+ height: 100px;
+}
+
+.minSize {
+ min-width: 300px;
+ min-height: 400px;
+}
+.maxSize {
+ max-width: 100px;
+ max-height: 100px;
+}
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -29,7 +56,7 @@
</span><span class="cx">
</span><span class="cx"> <p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p>
</span><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -37,8 +64,11 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
</ins><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -46,8 +76,11 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
</ins><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -55,8 +88,11 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
</ins><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -64,8 +100,11 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
</ins><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -73,8 +112,11 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
</ins><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -82,8 +124,11 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
</ins><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -91,8 +136,11 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
</ins><span class="cx">
</span><del>-<div style="position: relative">
</del><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
</ins><span class="cx"> <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150">
</span><span class="cx"> <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="lines">@@ -100,6 +148,73 @@
</span><span class="cx"> <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><ins>+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
</ins><span class="cx">
</span><ins>+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid fit-content contentEndUnsafe" data-expected-width="100" data-expected-height="200">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div clas="title">Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
+ <div class="grid fit-content contentCenterUnsafe" data-expected-width="100" data-expected-height="200">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+ <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+ <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
+ <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100">
+ <div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y="-150" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset-y="0" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
+ <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100">
+ <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+ <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400">
+ <div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-y="300" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-right: 25px;">
+ <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400">
+ <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
+ <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (207662 => 207663)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-10-21 08:04:43 UTC (rev 207662)
+++ trunk/Source/WebCore/ChangeLog 2016-10-21 08:11:14 UTC (rev 207663)
</span><span class="lines">@@ -1,3 +1,24 @@
</span><ins>+2016-10-21 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Content Alignment broken with indefinite sized grid container
+ https://bugs.webkit.org/show_bug.cgi?id=163724
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ The Grid Tracks sizing algorithm receives as parameter the
+ available space to be used as space for tracks. We hold a variable
+ to store the remaining free space for each dimension.
+
+ When the grid container size is indefinite we can't compute the
+ available free space after computing track sizes until such
+ indefinite size is resolved.
+
+ No new tests, just added some additional test cases.
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::layoutBlock): Compute freeSpace for Rows
+ after doing layout and resolving the indefinite height.
+
</ins><span class="cx"> 2016-10-21 Jer Noble <jer.noble@apple.com>
</span><span class="cx">
</span><span class="cx"> CRASH in SourceBuffer::sourceBufferPrivateDidReceiveSample + 2169
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (207662 => 207663)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-10-21 08:04:43 UTC (rev 207662)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-10-21 08:11:14 UTC (rev 207663)
</span><span class="lines">@@ -494,11 +494,17 @@
</span><span class="cx"> computeIntrinsicLogicalHeight(sizingData);
</span><span class="cx"> else
</span><span class="cx"> computeTrackSizesForDirection(ForRows, sizingData, availableLogicalHeight(ExcludeMarginBorderPadding));
</span><del>- setLogicalHeight(computeTrackBasedLogicalHeight(sizingData) + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight());
</del><ins>+ LayoutUnit trackBasedLogicalHeight = computeTrackBasedLogicalHeight(sizingData) + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
+ setLogicalHeight(trackBasedLogicalHeight);
</ins><span class="cx">
</span><span class="cx"> LayoutUnit oldClientAfterEdge = clientLogicalBottom();
</span><span class="cx"> updateLogicalHeight();
</span><span class="cx">
</span><ins>+ // Once grid's indefinite height is resolved, we can compute the
+ // available free space for Content Alignment.
+ if (!hasDefiniteLogicalHeight)
+ sizingData.setFreeSpace(ForRows, logicalHeight() - trackBasedLogicalHeight);
+
</ins><span class="cx"> // 3- If the min-content contribution of any grid items have changed based on the row
</span><span class="cx"> // sizes calculated in step 2, steps 1 and 2 are repeated with the new min-content
</span><span class="cx"> // contribution (once only).
</span></span></pre>
</div>
</div>
</body>
</html>