<!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>[197857] 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/197857">197857</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2016-03-09 06:26:39 -0800 (Wed, 09 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Allow to place positioned grid items on the padding
https://bugs.webkit.org/show_bug.cgi?id=155199
Reviewed by Sergio Villar Senin.
Source/WebCore:
According to the following discussion on the CSS WG mailing list,
we should be able to place positioned grid items on the padding directly:
https://lists.w3.org/Archives/Public/www-style/2015Nov/0070.html
This means that a positioned grid item can be placed on the padding itself.
The "auto" value resolves to the padding edges (0th and -0th lines).
So if a positioned item is placed with: grid-column: auto / 1;
it'd be placed on the padding, from line 0th to 1st line.
On top of that, we've to detect properly the first and last explicit
grid lines during the layout of positioned grid items.
We have to consider that the grid can have implicit tracks created
previously by regular grid items.
Tests: fast/css-grid-layout/grid-positioned-items-padding.html
fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
LayoutTests:
Add new tests and updated results in a current one.
* fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
* fast/css-grid-layout/grid-positioned-items-padding-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-padding.html: Added.
* fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.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>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddingexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (197856 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-03-09 12:00:32 UTC (rev 197856)
+++ trunk/LayoutTests/ChangeLog 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2016-03-09 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Allow to place positioned grid items on the padding
+ https://bugs.webkit.org/show_bug.cgi?id=155199
+
+ Reviewed by Sergio Villar Senin.
+
+ Add new tests and updated results in a current one.
+
+ * fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
+ * fast/css-grid-layout/grid-positioned-items-padding-expected.txt: Added.
+ * fast/css-grid-layout/grid-positioned-items-padding.html: Added.
+ * fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt: Added.
+ * fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html: Added.
+
</ins><span class="cx"> 2016-03-09 Andreas Kling <akling@apple.com>
</span><span class="cx">
</span><span class="cx"> ImageDocuments leak their world.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html (197856 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html 2016-03-09 12:00:32 UTC (rev 197856)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -42,13 +42,13 @@
</span><span class="cx">
</span><span class="cx"> <div class="grid grid-columns-rows">
</span><span class="cx"> <div class="sizedToGridArea absolute secondRowSecondColumn"
</span><del>- data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
</del><ins>+ data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165">
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
</span><span class="cx"> data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
</span><span class="cx"> </div>
</span><span class="cx"> <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
</span><del>- data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
</del><ins>+ data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165">
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt (0 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+This test checks that positioned grid items can be placed directly on the padding.
+
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html (0 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -0,0 +1,116 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ -webkit-grid-template-columns: 100px 200px;
+ -webkit-grid-template-rows: 50px 150px;
+ width: 500px;
+ height: 300px;
+ border: 5px solid black;
+ margin: 30px;
+ padding: 15px;
+ /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+ position: relative;
+}
+
+.absolute {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: lime;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that positioned grid items can be placed directly on the padding.</p>
+
+<div class="grid">
+ <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: auto / 1;"
+ data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / auto;"
+ data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 2 / 3;"
+ data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: -5 / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: -5 / 1;"
+ data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: -5 / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 3 / 5;"
+ data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / 5;"
+ data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / 5; -webkit-grid-row: 2 / 3;"
+ data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: span 2 / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: span 2 / 1;"
+ data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: span 2 / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 3 / span 2;"
+ data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / span 2;"
+ data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / span 2; -webkit-grid-row: 2 / 3;"
+ data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: foo / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: foo / 1;"
+ data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: foo / 1; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 3 / foo;"
+ data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 3 / foo;"
+ data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / foo; -webkit-grid-row: 2 / 3;"
+ data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+ </div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt (0 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track-expected.txt 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+This test checks that positioned grid items are placed properly (ignoring implicit tracks) even if the grid has implicit tracks.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemswithingridimplicittrackhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html (0 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -0,0 +1,112 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ -webkit-grid-template-columns: 200px 300px;
+ -webkit-grid-template-rows: 150px 250px;
+ -webkit-grid-auto-columns: 100px;
+ -webkit-grid-auto-rows: 50px;
+ width: 800px;
+ height: 600px;
+ border: 5px solid black;
+ margin: 30px;
+ padding: 15px;
+ /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+ position: relative;
+}
+
+.absolute {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: cyan;
+}
+
+.sixRowsAndSixColumns {
+ background: magenta;
+ -webkit-grid-row: -5 / 5;
+ -webkit-grid-column: -5 / 5;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that positioned grid items are placed properly (ignoring implicit tracks) even if the grid has implicit tracks.</p>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: -4 / 1; -webkit-grid-row: -4 / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: -4 / 2; -webkit-grid-row: -4 / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 3 / 4; -webkit-grid-row: 3 / 4;"
+ data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sixRowsAndSixColumns"
+ data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+ </div>
+ <div class="absolute" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
+ data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365">
+ </div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (197856 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-03-09 12:00:32 UTC (rev 197856)
+++ trunk/Source/WebCore/ChangeLog 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -1,3 +1,30 @@
</span><ins>+2016-03-09 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Allow to place positioned grid items on the padding
+ https://bugs.webkit.org/show_bug.cgi?id=155199
+
+ Reviewed by Sergio Villar Senin.
+
+ According to the following discussion on the CSS WG mailing list,
+ we should be able to place positioned grid items on the padding directly:
+ https://lists.w3.org/Archives/Public/www-style/2015Nov/0070.html
+
+ This means that a positioned grid item can be placed on the padding itself.
+ The "auto" value resolves to the padding edges (0th and -0th lines).
+ So if a positioned item is placed with: grid-column: auto / 1;
+ it'd be placed on the padding, from line 0th to 1st line.
+
+ On top of that, we've to detect properly the first and last explicit
+ grid lines during the layout of positioned grid items.
+ We have to consider that the grid can have implicit tracks created
+ previously by regular grid items.
+
+ Tests: fast/css-grid-layout/grid-positioned-items-padding.html
+ fast/css-grid-layout/grid-positioned-items-within-grid-implicit-track.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+
</ins><span class="cx"> 2016-03-09 Andreas Kling <akling@apple.com>
</span><span class="cx">
</span><span class="cx"> ImageDocuments leak their world.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (197856 => 197857)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-03-09 12:00:32 UTC (rev 197856)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-03-09 14:26:39 UTC (rev 197857)
</span><span class="lines">@@ -1484,47 +1484,49 @@
</span><span class="cx"> void RenderGrid::offsetAndBreadthForPositionedChild(const RenderBox& child, GridTrackSizingDirection direction, LayoutUnit& offset, LayoutUnit& breadth)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(child.isHorizontalWritingMode() == isHorizontalWritingMode());
</span><ins>+ bool isRowAxis = direction == ForColumns;
</ins><span class="cx">
</span><span class="cx"> GridSpan positions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), child, direction);
</span><span class="cx"> if (positions.isIndefinite()) {
</span><span class="cx"> offset = LayoutUnit();
</span><del>- breadth = (direction == ForColumns) ? clientLogicalWidth() : clientLogicalHeight();
</del><ins>+ breadth = isRowAxis ? clientLogicalWidth() : clientLogicalHeight();
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><del>- positions.translate(direction == ForColumns ? m_smallestColumnStart : m_smallestRowStart);
</del><span class="cx">
</span><del>- GridPosition startPosition = (direction == ForColumns) ? child.style().gridItemColumnStart() : child.style().gridItemRowStart();
- GridPosition endPosition = (direction == ForColumns) ? child.style().gridItemColumnEnd() : child.style().gridItemRowEnd();
- size_t lastTrackIndex = (direction == ForColumns ? gridColumnCount() : gridRowCount()) - 1;
</del><ins>+ // For positioned items we cannot use GridSpan::translate() because we could end up with negative values, as the positioned items do not create implicit tracks per spec.
+ int smallestStart = std::abs(isRowAxis ? m_smallestColumnStart : m_smallestRowStart);
+ int resolvedInitialPosition = positions.untranslatedResolvedInitialPosition() + smallestStart;
+ int resolvedFinalPosition = positions.untranslatedResolvedFinalPosition() + smallestStart;
</ins><span class="cx">
</span><ins>+ GridPosition startPosition = isRowAxis ? child.style().gridItemColumnStart() : child.style().gridItemRowStart();
+ GridPosition endPosition = isRowAxis ? child.style().gridItemColumnEnd() : child.style().gridItemRowEnd();
+ int firstExplicitLine = smallestStart;
+ int lastExplicitLine = (isRowAxis ? GridResolvedPosition::explicitGridColumnCount(style()) : GridResolvedPosition::explicitGridRowCount(style())) + smallestStart;
+
</ins><span class="cx"> bool startIsAuto = startPosition.isAuto()
</span><span class="cx"> || (startPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(startPosition.namedGridLine(), style(), (direction == ForColumns) ? ColumnStartSide : RowStartSide))
</span><del>- || (positions.resolvedInitialPosition() > lastTrackIndex);
</del><ins>+ || (resolvedInitialPosition < firstExplicitLine)
+ || (resolvedInitialPosition > lastExplicitLine);
</ins><span class="cx"> bool endIsAuto = endPosition.isAuto()
</span><span class="cx"> || (endPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(endPosition.namedGridLine(), style(), (direction == ForColumns) ? ColumnEndSide : RowEndSide))
</span><del>- || (positions.resolvedFinalPosition() - 1 > lastTrackIndex);
</del><ins>+ || (resolvedFinalPosition < firstExplicitLine)
+ || (resolvedFinalPosition > lastExplicitLine);
</ins><span class="cx">
</span><del>- unsigned firstPosition = 0;
- unsigned initialPosition = startIsAuto ? firstPosition : positions.resolvedInitialPosition();
- unsigned lastPosition = lastTrackIndex;
- unsigned finalPosition = endIsAuto ? lastPosition : positions.resolvedFinalPosition() - 1;
</del><ins>+ unsigned initialPosition = startIsAuto ? 0 : resolvedInitialPosition;
+ unsigned finalPosition = endIsAuto ? lastExplicitLine : resolvedFinalPosition;
</ins><span class="cx">
</span><del>- // Positioned children do not grow the grid, so we need to clamp the positions to avoid ending up outside of it.
- initialPosition = std::min(initialPosition, lastPosition);
- finalPosition = std::min(finalPosition, lastPosition);
</del><ins>+ LayoutUnit start = startIsAuto ? LayoutUnit() : isRowAxis ? m_columnPositions[initialPosition] : m_rowPositions[initialPosition];
+ LayoutUnit end = endIsAuto ? (isRowAxis ? logicalWidth() : logicalHeight()) : (isRowAxis ? m_columnPositions[finalPosition] : m_rowPositions[finalPosition]);
</ins><span class="cx">
</span><del>- LayoutUnit start = startIsAuto ? LayoutUnit() : (direction == ForColumns) ? m_columnPositions[initialPosition] : m_rowPositions[initialPosition];
- LayoutUnit end = endIsAuto ? (direction == ForColumns) ? logicalWidth() : logicalHeight() : (direction == ForColumns) ? m_columnPositions[finalPosition + 1] : m_rowPositions[finalPosition + 1];
-
</del><span class="cx"> breadth = end - start;
</span><span class="cx">
</span><span class="cx"> if (startIsAuto)
</span><del>- breadth -= (direction == ForColumns) ? borderStart() : borderBefore();
</del><ins>+ breadth -= isRowAxis ? borderStart() : borderBefore();
</ins><span class="cx"> else
</span><del>- start -= ((direction == ForColumns) ? borderStart() : borderBefore());
</del><ins>+ start -= isRowAxis ? borderStart() : borderBefore();
</ins><span class="cx">
</span><span class="cx"> if (endIsAuto) {
</span><del>- breadth -= (direction == ForColumns) ? borderEnd() : borderAfter();
</del><ins>+ breadth -= isRowAxis ? borderEnd() : borderAfter();
</ins><span class="cx"> breadth -= scrollbarLogicalWidth();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1533,7 +1535,7 @@
</span><span class="cx"> if (child.parent() == this && !startIsAuto) {
</span><span class="cx"> // If column/row start is "auto" the static position has been already set in prepareChildForPositionedLayout().
</span><span class="cx"> RenderLayer* childLayer = child.layer();
</span><del>- if (direction == ForColumns)
</del><ins>+ if (isRowAxis)
</ins><span class="cx"> childLayer->setStaticInlinePosition(borderStart() + offset);
</span><span class="cx"> else
</span><span class="cx"> childLayer->setStaticBlockPosition(borderBefore() + offset);
</span></span></pre>
</div>
</div>
</body>
</html>