<!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>[192054] 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/192054">192054</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2015-11-05 01:30:30 -0800 (Thu, 05 Nov 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>[css-grid] Support positioned grid children
https://bugs.webkit.org/show_bug.cgi?id=150837

Reviewed by Darin Adler.

Source/WebCore:

According to the spec positioned grid children have
a special behavior described at:
https://drafts.csswg.org/css-grid/#abspos

The idea is that for positioned children the containing block will
correspond to the padding edges of the grid container, unless the
grid placement properties are defined.
This not only affects to positioned grid items (direct children) but
also to any descendant where the containing block is the grid container.

In order to manage this special behavior, the patch is overriding
RenderBlock::layoutPositionedObject() to calculate the position and size
depending on the grid-placement properties.

RenderBox class has some changes to calculate the containing block width
and height for positioned objects (using the override value). And also
to compute their static position.

Finally, the positioned items are not taken into account in all the
different grid methods, in order that they do not interfere the layout
of the grid as stated in the spec.

Tests: fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html
       fast/css-grid-layout/absolute-positioning-grid-container-parent.html
       fast/css-grid-layout/grid-positioned-items-background.html
       fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html
       fast/css-grid-layout/grid-positioned-items-implicit-grid.html
       fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html
       fast/css-grid-layout/grid-sizing-positioned-items.html
       fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html
       fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html

* rendering/OrderIterator.cpp:
(WebCore::OrderIterator::next): Fix method to avoid issues if no items
are added to the iterator.
* rendering/RenderBlock.h: Mark layoutPositionedObject() as virtual.
* rendering/RenderBox.cpp: Add new maps for inline/block extra offsets.
(WebCore::RenderBox::~RenderBox): Clear the new maps.
(WebCore::RenderBox::extraInlineOffset): Extra offset that we need to
apply to positioned grid children due to the grid placement properties.
(WebCore::RenderBox::extraBlockOffset): Ditto.
(WebCore::RenderBox::setExtraInlineOffset):
(WebCore::RenderBox::setExtraBlockOffset):
(WebCore::RenderBox::clearExtraInlineAndBlockOffests):
(WebCore::RenderBox::containingBlockLogicalWidthForPositioned): Use the
override containing block if any.
(WebCore::RenderBox::containingBlockLogicalHeightForPositioned): Ditto.
(WebCore::RenderBox::computePositionedLogicalWidth): Add the extra
offset if it's a positioned element.
(WebCore::RenderBox::computePositionedLogicalHeight): Ditto.
* rendering/RenderBox.h:
(WebCore::RenderBox::scrollbarLogicalWidth): Add utility method.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock): Clear grid after layout positioned
objects instead of at the end of layoutGridItems().
(WebCore::RenderGrid::placeItemsOnGrid): Ignore positioned items.
(WebCore::RenderGrid::populateExplicitGridAndOrderIterator): Ditto.
(WebCore::RenderGrid::layoutGridItems): Ditto.
(WebCore::RenderGrid::prepareChildForPositionedLayout): Set static
position for positioned items.
(WebCore::RenderGrid::layoutPositionedObject): Calculate position and
size for positioned children.
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild): Calculate
extra offset and breadth for positioned children.
* rendering/RenderGrid.h:
* rendering/style/GridResolvedPosition.cpp:
(WebCore::GridResolvedPosition::isNonExistentNamedLineOrArea): Make it a
public static method.
(WebCore::GridUnresolvedSpan::adjustGridPositionsFromStyle): Fix calls
to isNonExistentNamedLineOrArea().
(WebCore::resolveGridPositionFromStyle): Ditto.
* rendering/style/GridResolvedPosition.h: Make
isNonExistentNamedLineOrArea() public.

LayoutTests:

* fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt: Added.
* fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html: Added.
* fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt: Added.
* fast/css-grid-layout/absolute-positioning-grid-container-parent.html: Added.
* fast/css-grid-layout/grid-positioned-items-background-expected.html: Added.
* fast/css-grid-layout/grid-positioned-items-background.html: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid.html: Added.
* fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html: Added.
* fast/css-grid-layout/grid-sizing-positioned-items-expected.txt: Added.
* fast/css-grid-layout/grid-sizing-positioned-items.html: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html: Added.
* fast/css-grid-layout/resources/grid.css: Added some common CSS classes.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid.css</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingOrderIteratorcpp">trunk/Source/WebCore/rendering/OrderIterator.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBlockh">trunk/Source/WebCore/rendering/RenderBlock.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxh">trunk/Source/WebCore/rendering/RenderBox.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleGridResolvedPositioncpp">trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleGridResolvedPositionh">trunk/Source/WebCore/rendering/style/GridResolvedPosition.h</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockhtml">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainerparentexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainerparenthtml">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridlineexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridlinehtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridhtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsunknownnamedgridlineexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemsunknownnamedgridlinehtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemshtml">trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnotcreateimplicittracksexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnotcreateimplicittrackshtml">trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnottakeupspaceexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnottakeupspacehtml">trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/LayoutTests/ChangeLog        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -1,3 +1,30 @@
</span><ins>+2015-11-05  Manuel Rego Casasnovas  &lt;rego@igalia.com&gt;
+
+        [css-grid] Support positioned grid children
+        https://bugs.webkit.org/show_bug.cgi?id=150837
+
+        Reviewed by Darin Adler.
+
+        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt: Added.
+        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html: Added.
+        * fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt: Added.
+        * fast/css-grid-layout/absolute-positioning-grid-container-parent.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-background-expected.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-background.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt: Added.
+        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html: Added.
+        * fast/css-grid-layout/grid-sizing-positioned-items-expected.txt: Added.
+        * fast/css-grid-layout/grid-sizing-positioned-items.html: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html: Added.
+        * fast/css-grid-layout/resources/grid.css: Added some common CSS classes.
+
</ins><span class="cx"> 2015-11-04  Jiewen Tan  &lt;jiewen_tan@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Null dereference loading Blink layout test editing/execCommand/delete-hidden-crash.html
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+This test checks the behavior of the absolutely positioned elements with a grid container as containing block.
+
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainercontainingblockhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,231 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.grid {
+    -webkit-grid-template-columns: 50px 100px 150px 200px;
+    -webkit-grid-template-rows: 50px 100px 150px 200px;
+    width: 500px;
+    height: 500px;
+    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;
+}
+
+.thirdRowThirdColumnSpanning2Rows {
+    -webkit-grid-column: 3;
+    -webkit-grid-row: 3 / span 2;
+    background-color: maroon;
+}
+
+.thirdRowThirdColumnSpanning2Rows2Columns {
+    -webkit-grid-column: 3 / span 2;
+    -webkit-grid-row: 3 / span 2;
+    background-color: aqua;
+}
+
+.endFirstRowEndFirstColumn {
+    background-color: blue;
+    -webkit-grid-column-end: 2;
+    -webkit-grid-row-end: 2;
+}
+
+.endFirstRowEndSecondColumn {
+    background-color: lime;
+    -webkit-grid-column-end: 3;
+    -webkit-grid-row-end: 2;
+}
+
+.endSecondRowEndFirstColumn {
+    background-color: purple;
+    -webkit-grid-column-end: 2;
+    -webkit-grid-row-end: 3;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows {
+    -webkit-grid-column-end: 4;
+    -webkit-grid-row: span 2 / 4;
+    background-color: maroon;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows2Columns {
+    -webkit-grid-column: span 2 / 4;
+    -webkit-grid-row: span 2 / 4;
+    background-color: aqua;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows {
+    -webkit-grid-column: 3 / 4;
+    -webkit-grid-row: 3 / 5;
+    background-color: maroon;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns {
+    -webkit-grid-column: 3 / 5;
+    -webkit-grid-row: 3 / 5;
+    background-color: aqua;
+}
+
+.offsetLeft25 {
+    left: 25px;
+}
+
+.offsetRight50 {
+    right: 50px;
+}
+
+.offsetTop75 {
+    top: 75px;
+}
+
+.offsetBottom100 {
+    bottom: 100px;
+}
+
+.offsetLeftMinus20 {
+    left: -20px;
+}
+
+.offsetRightMinus40 {
+    right: -40px;
+}
+
+.offsetTopMinus60 {
+    top: -60px;
+}
+
+.offsetBottomMinus80 {
+    bottom: -80px;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks the behavior of the absolutely positioned elements with a grid container as containing block.&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;530&quot; data-expected-height=&quot;530&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute firstRowFirstColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;515&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute secondRowFirstColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;465&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute firstRowSecondColumn&quot;
+        data-offset-x=&quot;65&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;465&quot; data-expected-height=&quot;515&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute secondRowSecondColumn&quot;
+        data-offset-x=&quot;65&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;465&quot; data-expected-height=&quot;465&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows&quot;
+        data-offset-x=&quot;165&quot; data-offset-y=&quot;165&quot; data-expected-width=&quot;365&quot; data-expected-height=&quot;350&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns&quot;
+        data-offset-x=&quot;165&quot; data-offset-y=&quot;165&quot; data-expected-width=&quot;350&quot; data-expected-height=&quot;350&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;315&quot; data-expected-height=&quot;250&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns&quot;
+        data-offset-x=&quot;65&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;250&quot; data-expected-height=&quot;250&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endSecondRowEndSecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;165&quot; data-expected-height=&quot;165&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endSecondRowEndFirstColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;65&quot; data-expected-height=&quot;165&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endFirstRowEndSecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;165&quot; data-expected-height=&quot;65&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endFirstRowEndFirstColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;65&quot; data-expected-height=&quot;65&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlyFirstRowOnlyFirstColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlySecondRowOnlyFirstColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;100&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlyFirstRowOnlySecondColumn&quot;
+        data-offset-x=&quot;65&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlySecondRowOnlySecondColumn&quot;
+        data-offset-x=&quot;65&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;100&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns&quot;
+        data-offset-x=&quot;165&quot; data-offset-y=&quot;165&quot; data-expected-width=&quot;350&quot; data-expected-height=&quot;350&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows&quot;
+        data-offset-x=&quot;165&quot; data-offset-y=&quot;165&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;350&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75&quot;
+        data-offset-x=&quot;25&quot; data-offset-y=&quot;75&quot; data-expected-width=&quot;530&quot; data-expected-height=&quot;530&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80&quot;
+        data-offset-x=&quot;55&quot; data-offset-y=&quot;95&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;515&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100&quot;
+        data-offset-x=&quot;-35&quot; data-offset-y=&quot;-35&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;465&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60&quot;
+        data-offset-x=&quot;45&quot; data-offset-y=&quot;-45&quot; data-expected-width=&quot;465&quot; data-expected-height=&quot;515&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;140&quot; data-expected-width=&quot;465&quot; data-expected-height=&quot;465&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100&quot;
+        data-offset-x=&quot;190&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;365&quot; data-expected-height=&quot;350&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100&quot;
+        data-offset-x=&quot;145&quot; data-offset-y=&quot;105&quot; data-expected-width=&quot;350&quot; data-expected-height=&quot;350&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div&gt;
+        &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75&quot;
+            data-offset-x=&quot;25&quot; data-offset-y=&quot;75&quot; data-expected-width=&quot;530&quot; data-expected-height=&quot;530&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80&quot;
+            data-offset-x=&quot;55&quot; data-offset-y=&quot;95&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;515&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100&quot;
+            data-offset-x=&quot;-35&quot; data-offset-y=&quot;-35&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;465&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60&quot;
+            data-offset-x=&quot;45&quot; data-offset-y=&quot;-45&quot; data-expected-width=&quot;465&quot; data-expected-height=&quot;515&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;140&quot; data-expected-width=&quot;465&quot; data-expected-height=&quot;465&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100&quot;
+            data-offset-x=&quot;190&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;365&quot; data-expected-height=&quot;350&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100&quot;
+            data-offset-x=&quot;145&quot; data-offset-y=&quot;105&quot; data-expected-width=&quot;350&quot; data-expected-height=&quot;350&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainerparentexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+This test checks the behavior of the absolutely positioned elements with a grid container as parent.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioninggridcontainerparenthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,73 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.grid {
+    -webkit-grid-template-columns: 50px 100px 150px;
+    -webkit-grid-template-rows: 25px 50px 100px;
+    width: 300px;
+    height: 200px;
+    border: 5px solid black;
+    margin: 20px 30px;
+    padding: 5px 15px;
+}
+
+.container {
+    width: 500px;
+    height: 400px;
+}
+
+.relative {
+    /* Ensures that the element is the containing block of the absolutely positioned elements. */
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.container')&quot;&gt;
+
+&lt;p&gt;This test checks the behavior of the absolutely positioned elements with a grid container as parent.&lt;/p&gt;
+
+&lt;div class=&quot;container relative&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;500&quot; data-expected-height=&quot;400&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;container relative&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute firstRowFirstColumn&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;500&quot; data-expected-height=&quot;400&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;container relative&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute secondRowSecondColumn&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;500&quot; data-expected-height=&quot;400&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;container&quot;&gt;
+    &lt;div class=&quot;grid relative&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn&quot; data-offset-x=&quot;15&quot; data-offset-y=&quot;5&quot; data-expected-width=&quot;330&quot; data-expected-height=&quot;210&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;container&quot;&gt;
+    &lt;div class=&quot;grid relative&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute firstRowFirstColumn&quot; data-offset-x=&quot;15&quot; data-offset-y=&quot;5&quot; data-expected-width=&quot;315&quot; data-expected-height=&quot;205&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;container&quot;&gt;
+    &lt;div class=&quot;grid relative&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute secondRowSecondColumn&quot; data-offset-x=&quot;65&quot; data-offset-y=&quot;30&quot; data-expected-width=&quot;265&quot; data-expected-height=&quot;180&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;style&gt;
+.grid {
+    width: 400px;
+    height: 300px;
+    border: 5px solid black;
+    margin: 30px;
+    padding: 15px;
+    background-color: grey;
+}
+
+.container {
+    position: relative;
+    float: left;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.green {
+    background-color: green;
+}
+&lt;/style&gt;
+&lt;body&gt;
+
+&lt;p&gt;This test checks that the background of positioned items is painted in the right position.&lt;/p&gt;
+
+&lt;p&gt;The test passes if you see 4 green boxes and no red.&lt;/p&gt;
+
+&lt;div class=&quot;container&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;absolute green&quot; style=&quot;left: 55px; top: 50px; width: 100px; height: 50px&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;absolute green&quot; style=&quot;left: 290px; top: 50px; width: 50px; height: 20px&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;absolute green&quot; style=&quot;left: 50px; top: 115px; width: 50px; height: 30px&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;absolute green&quot; style=&quot;left: 175px; top: 135px; width: 145px; height: 75px&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsbackgroundhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.grid {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 50px 150px;
+    width: 400px;
+    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;
+}
+
+.container {
+    position: relative;
+    float: left;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.grid &gt; div {
+    background-color: green;
+}
+
+.lengthSize {
+    width: 50px;
+    height: 20px;
+}
+
+.percentageSize {
+    width: 50%;
+    height: 20%;
+}
+
+.offsetsSize {
+    left: 25px;
+    right: 30px;
+    top: 35px;
+    bottom: 40px;
+}
+
+.red {
+    background-color: red;
+}
+&lt;/style&gt;
+&lt;body&gt;
+
+&lt;p&gt;This test checks that the background of positioned items is painted in the right position.&lt;/p&gt;
+
+&lt;p&gt;The test passes if you see 4 green boxes and no red.&lt;/p&gt;
+
+&lt;div class=&quot;container&quot;&gt;
+    &lt;div class=&quot;absolute red&quot; style=&quot;left: 55px; top: 50px; width: 100px; height: 50px&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;absolute red&quot; style=&quot;left: 290px; top: 50px; width: 50px; height: 20px&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;absolute red&quot; style=&quot;left: 50px; top: 115px; width: 50px; height: 30px&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;absolute red&quot; style=&quot;left: 175px; top: 135px; width: 145px; height: 75px&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;absolute onlyFirstRowOnlyFirstColumn sizedToGridArea&quot;
+            style=&quot;left: 5px;&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute onlyFirstRowOnlySecondColumn lengthSize&quot;
+            style=&quot;right: 10px;&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute onlySecondRowOnlyFirstColumn percentageSize&quot;
+            style=&quot;top: 15px;&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute onlySecondRowOnlySecondColumn offsetsSize&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,4 @@
</span><ins>+This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.
+
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridlineexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,4 @@
</span><ins>+This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as &quot;auto&quot;.
+
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridlinehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,69 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.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;
+}
+
+.startImplicitLine {
+    background-color: blue;
+    -webkit-grid-column: 5;
+    -webkit-grid-row: 8;
+}
+
+.endImplicitLine {
+    background-color: orange;
+    -webkit-grid-column: 1 / 5;
+    -webkit-grid-row: 1 / 8;
+}
+
+.startImplicitLineSpan {
+    background-color: blue;
+    -webkit-grid-column: span 5;
+    -webkit-grid-row: span 8;
+}
+
+.endImplicitLineSpan {
+    background-color: orange;
+    -webkit-grid-column: 1 / span 5;
+    -webkit-grid-row: 1 / span 8;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as &quot;auto&quot;.&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;absolute sizedToGridArea startImplicitLine&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;530&quot; data-expected-height=&quot;330&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;absolute sizedToGridArea endImplicitLine&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;315&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;absolute sizedToGridArea startImplicitLineSpan&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;530&quot; data-expected-height=&quot;330&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;absolute sizedToGridArea endImplicitLineSpan&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;315&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsimplicitgridhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.grid {
+    width: 200px;
+    height: 200px;
+    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;
+}
+
+.grid-columns-rows {
+    -webkit-grid-template-columns: 100px;
+    -webkit-grid-template-rows: 50px;
+}
+
+.absolute {
+    position: absolute;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute secondRowSecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;230&quot; data-expected-height=&quot;230&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endSecondRowEndSecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;230&quot; data-expected-height=&quot;230&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlySecondRowOnlySecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;230&quot; data-expected-height=&quot;230&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid grid-columns-rows&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute secondRowSecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;230&quot; data-expected-height=&quot;230&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute endSecondRowEndSecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;230&quot; data-expected-height=&quot;230&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute onlySecondRowOnlySecondColumn&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;230&quot; data-expected-height=&quot;230&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsunknownnamedgridlineexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,3 @@
</span><ins>+This test checks that grid placement properties of absolutely positioned items using unknown named grid lines are treated as &quot;auto&quot;.
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemsunknownnamedgridlinehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,57 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.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;
+}
+
+.startUnknownLine {
+    background-color: blue;
+    -webkit-grid-column: foo / 3;
+    -webkit-grid-row: bar / 3;
+}
+
+.endUnknownLine {
+    background-color: orange;
+    -webkit-grid-column: 1 / foo;
+    -webkit-grid-row: 1 / bar;
+}
+
+.startAndEndUnknownLines {
+    background-color: green;
+    -webkit-grid-column: foo / bar;
+    -webkit-grid-row: foo / bar;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks that grid placement properties of absolutely positioned items using unknown named grid lines are treated as &quot;auto&quot;.&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;absolute sizedToGridArea startAndEndUnknownLines&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;530&quot; data-expected-height=&quot;330&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;absolute sizedToGridArea endUnknownLine&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;515&quot; data-expected-height=&quot;315&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;absolute sizedToGridArea startUnknownLine&quot;
+        data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;315&quot; data-expected-height=&quot;215&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+This test checks the different size options for absolutely positioned grid items.
+
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridsizingpositioneditemshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,113 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.grid {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 50px 150px;
+    width: 100%;
+    height: 100%;
+    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;
+}
+
+.lengthSize {
+    width: 50px;
+    height: 20px;
+}
+
+.percentageSize {
+    width: 40%;
+    height: 20%;
+}
+
+.offsets {
+    left: 5px;
+    right: 10px;
+    top: 15px;
+    bottom: 20px;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks the different size options for absolutely positioned grid items.&lt;/p&gt;
+
+&lt;div class=&quot;unconstrainedContainer&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;absolute autoRowAutoColumn sizedToGridArea&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;1030&quot; data-expected-height=&quot;1030&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute secondRowSecondColumn sizedToGridArea&quot;
+            data-offset-x=&quot;115&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;915&quot; data-expected-height=&quot;965&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute onlyFirstRowOnlyFirstColumn sizedToGridArea&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute endSecondRowEndSecondColumn sizedToGridArea&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;315&quot; data-expected-height=&quot;215&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;unconstrainedContainer&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;absolute autoRowAutoColumn lengthSize&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute secondRowSecondColumn lengthSize&quot;
+            data-offset-x=&quot;115&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute onlyFirstRowOnlyFirstColumn lengthSize&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute endSecondRowEndSecondColumn lengthSize&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;unconstrainedContainer&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;absolute autoRowAutoColumn percentageSize&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;412&quot; data-expected-height=&quot;206&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute secondRowSecondColumn percentageSize&quot;
+            data-offset-x=&quot;115&quot; data-offset-y=&quot;65&quot; data-expected-width=&quot;366&quot; data-expected-height=&quot;193&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute onlyFirstRowOnlyFirstColumn percentageSize&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute endSecondRowEndSecondColumn percentageSize&quot;
+            data-offset-x=&quot;15&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;126&quot; data-expected-height=&quot;43&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;unconstrainedContainer&quot;&gt;
+    &lt;div class=&quot;grid&quot;&gt;
+        &lt;div class=&quot;absolute autoRowAutoColumn offsets&quot;
+            data-offset-x=&quot;5&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;1015&quot; data-expected-height=&quot;995&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute secondRowSecondColumn offsets&quot;
+            data-offset-x=&quot;120&quot; data-offset-y=&quot;80&quot; data-expected-width=&quot;900&quot; data-expected-height=&quot;930&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute onlyFirstRowOnlyFirstColumn offsets&quot;
+            data-offset-x=&quot;20&quot; data-offset-y=&quot;30&quot; data-expected-width=&quot;85&quot; data-expected-height=&quot;15&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;absolute endSecondRowEndSecondColumn offsets&quot;
+            data-offset-x=&quot;5&quot; data-offset-y=&quot;15&quot; data-expected-width=&quot;300&quot; data-expected-height=&quot;180&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnotcreateimplicittracksexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,3 @@
</span><ins>+This test checks that positioned items shouldn't create implicit tracks on the grid.
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnotcreateimplicittrackshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,48 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.grid {
+    -webkit-grid-auto-columns: 100px;
+    -webkit-grid-auto-rows: 50px;
+    width: 400px;
+    height: 300px;
+    /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.seventhRowFourthColumn {
+    background-color: coral;
+    -webkit-grid-column: 4;
+    -webkit-grid-row: 7;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks that positioned items shouldn't create implicit tracks on the grid.&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute seventhRowFourthColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;300&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;150&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnottakeupspaceexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.
+
+Absolutely positioned:
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+Fixed positioned:
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpositionedgriditemsshouldnottakeupspacehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html (0 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -0,0 +1,184 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+
+.grid {
+    -webkit-grid-template-columns: 50px 100px;
+    -webkit-grid-template-rows: 50px 100px;
+    width: 150px;
+    height: 150px;
+    /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+    position: relative;
+    /* Ensures that the grid container is the containing block of the fixed positioned grid children. */
+    transform: translate(10px, 20px);
+}
+
+.absolute {
+    position: absolute;
+}
+
+.fixed {
+    position: fixed;
+}
+
+.offsetLeft100 {
+    left: 100px;
+}
+
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.&lt;/p&gt;
+
+&lt;p&gt;Absolutely positioned:&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn offsetLeft100&quot;
+        data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn offsetLeft100&quot;
+        data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn&quot;
+            data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;100&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea absolute autoRowAutoColumn offsetLeft100&quot;
+            data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;100&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Fixed positioned:&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea fixed autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea fixed autoRowAutoColumn offsetLeft100&quot;
+        data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea fixed autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea fixed autoRowAutoColumn offsetLeft100&quot;
+        data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea fixed autoRowAutoColumn&quot;
+            data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;100&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;
+        &lt;div class=&quot;sizedToGridArea fixed autoRowAutoColumn offsetLeft100&quot;
+            data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;sizedToGridArea autoRowAutoColumn&quot;
+        data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;100&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid.css        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid.css        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -21,12 +21,24 @@
</span><span class="cx">     -webkit-grid-row: 1;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.onlyFirstRowOnlyFirstColumn {
+    background-color: blue;
+    -webkit-grid-column: 1 / 2;
+    -webkit-grid-row: 1 / 2;
+}
+
</ins><span class="cx"> .firstRowSecondColumn {
</span><span class="cx">     background-color: lime;
</span><span class="cx">     -webkit-grid-column: 2;
</span><span class="cx">     -webkit-grid-row: 1;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.onlyFirstRowOnlySecondColumn {
+    background-color: lime;
+    -webkit-grid-column: 2 / 3;
+    -webkit-grid-row: 1 / 2;
+}
+
</ins><span class="cx"> .firstRowThirdColumn {
</span><span class="cx">     background-color: magenta;
</span><span class="cx">     -webkit-grid-column: 3;
</span><span class="lines">@@ -45,12 +57,30 @@
</span><span class="cx">     -webkit-grid-row: 2;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.onlySecondRowOnlyFirstColumn {
+    background-color: purple;
+    -webkit-grid-column: 1 / 2;
+    -webkit-grid-row: 2 / 3;
+}
+
</ins><span class="cx"> .secondRowSecondColumn {
</span><span class="cx">     background-color: orange;
</span><span class="cx">     -webkit-grid-column: 2;
</span><span class="cx">     -webkit-grid-row: 2;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.onlySecondRowOnlySecondColumn {
+    background-color: orange;
+    -webkit-grid-column: 2 / 3;
+    -webkit-grid-row: 2 / 3;
+}
+
+.endSecondRowEndSecondColumn {
+    background-color: orange;
+    -webkit-grid-column-end: 3;
+    -webkit-grid-row-end: 3;
+}
+
</ins><span class="cx"> .secondRowThirdColumn {
</span><span class="cx">     background-color: navy;
</span><span class="cx">     -webkit-grid-column: 3;
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/ChangeLog        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -1,3 +1,84 @@
</span><ins>+2015-11-05  Manuel Rego Casasnovas  &lt;rego@igalia.com&gt;
+
+        [css-grid] Support positioned grid children
+        https://bugs.webkit.org/show_bug.cgi?id=150837
+
+        Reviewed by Darin Adler.
+
+        According to the spec positioned grid children have
+        a special behavior described at:
+        https://drafts.csswg.org/css-grid/#abspos
+
+        The idea is that for positioned children the containing block will
+        correspond to the padding edges of the grid container, unless the
+        grid placement properties are defined.
+        This not only affects to positioned grid items (direct children) but
+        also to any descendant where the containing block is the grid container.
+
+        In order to manage this special behavior, the patch is overriding
+        RenderBlock::layoutPositionedObject() to calculate the position and size
+        depending on the grid-placement properties.
+
+        RenderBox class has some changes to calculate the containing block width
+        and height for positioned objects (using the override value). And also
+        to compute their static position.
+
+        Finally, the positioned items are not taken into account in all the
+        different grid methods, in order that they do not interfere the layout
+        of the grid as stated in the spec.
+
+        Tests: fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html
+               fast/css-grid-layout/absolute-positioning-grid-container-parent.html
+               fast/css-grid-layout/grid-positioned-items-background.html
+               fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html
+               fast/css-grid-layout/grid-positioned-items-implicit-grid.html
+               fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html
+               fast/css-grid-layout/grid-sizing-positioned-items.html
+               fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html
+               fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html
+
+        * rendering/OrderIterator.cpp:
+        (WebCore::OrderIterator::next): Fix method to avoid issues if no items
+        are added to the iterator.
+        * rendering/RenderBlock.h: Mark layoutPositionedObject() as virtual.
+        * rendering/RenderBox.cpp: Add new maps for inline/block extra offsets.
+        (WebCore::RenderBox::~RenderBox): Clear the new maps.
+        (WebCore::RenderBox::extraInlineOffset): Extra offset that we need to
+        apply to positioned grid children due to the grid placement properties.
+        (WebCore::RenderBox::extraBlockOffset): Ditto.
+        (WebCore::RenderBox::setExtraInlineOffset):
+        (WebCore::RenderBox::setExtraBlockOffset):
+        (WebCore::RenderBox::clearExtraInlineAndBlockOffests):
+        (WebCore::RenderBox::containingBlockLogicalWidthForPositioned): Use the
+        override containing block if any.
+        (WebCore::RenderBox::containingBlockLogicalHeightForPositioned): Ditto.
+        (WebCore::RenderBox::computePositionedLogicalWidth): Add the extra
+        offset if it's a positioned element.
+        (WebCore::RenderBox::computePositionedLogicalHeight): Ditto.
+        * rendering/RenderBox.h:
+        (WebCore::RenderBox::scrollbarLogicalWidth): Add utility method.
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::layoutBlock): Clear grid after layout positioned
+        objects instead of at the end of layoutGridItems().
+        (WebCore::RenderGrid::placeItemsOnGrid): Ignore positioned items.
+        (WebCore::RenderGrid::populateExplicitGridAndOrderIterator): Ditto.
+        (WebCore::RenderGrid::layoutGridItems): Ditto.
+        (WebCore::RenderGrid::prepareChildForPositionedLayout): Set static
+        position for positioned items.
+        (WebCore::RenderGrid::layoutPositionedObject): Calculate position and
+        size for positioned children.
+        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild): Calculate
+        extra offset and breadth for positioned children.
+        * rendering/RenderGrid.h:
+        * rendering/style/GridResolvedPosition.cpp:
+        (WebCore::GridResolvedPosition::isNonExistentNamedLineOrArea): Make it a
+        public static method.
+        (WebCore::GridUnresolvedSpan::adjustGridPositionsFromStyle): Fix calls
+        to isNonExistentNamedLineOrArea().
+        (WebCore::resolveGridPositionFromStyle): Ditto.
+        * rendering/style/GridResolvedPosition.h: Make
+        isNonExistentNamedLineOrArea() public.
+
</ins><span class="cx"> 2015-11-04  Jiewen Tan  &lt;jiewen_tan@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Null dereference loading Blink layout test editing/execCommand/delete-hidden-crash.html
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingOrderIteratorcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/OrderIterator.cpp (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/OrderIterator.cpp        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/OrderIterator.cpp        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -59,16 +59,14 @@
</span><span class="cx">             continue;
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        if (m_orderIndex == endIndex)
-            return nullptr;
-
-        if (m_orderIndex != cInvalidIndex) {
</del><ins>+        if (m_orderIndex != cInvalidIndex)
</ins><span class="cx">             ++m_orderIndex;
</span><del>-            if (m_orderIndex == endIndex)
-                return nullptr;
-        } else
</del><ins>+        else
</ins><span class="cx">             m_orderIndex = 0;
</span><span class="cx"> 
</span><ins>+        if (m_orderIndex == endIndex)
+            return nullptr;
+
</ins><span class="cx">         m_currentChild = m_containerBox.firstChildBox();
</span><span class="cx">     } while (!m_currentChild || m_currentChild-&gt;style().order() != m_orderValues[m_orderIndex]);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBlockh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBlock.h (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBlock.h        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/RenderBlock.h        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -313,7 +313,7 @@
</span><span class="cx">     virtual void layout() override;
</span><span class="cx"> 
</span><span class="cx">     void layoutPositionedObjects(bool relayoutChildren, bool fixedPositionObjectsOnly = false);
</span><del>-    void layoutPositionedObject(RenderBox&amp;, bool relayoutChildren, bool fixedPositionObjectsOnly);
</del><ins>+    virtual void layoutPositionedObject(RenderBox&amp;, bool relayoutChildren, bool fixedPositionObjectsOnly);
</ins><span class="cx">     
</span><span class="cx">     void markFixedPositionObjectForLayoutIfNeeded(RenderObject&amp; child);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -95,6 +95,8 @@
</span><span class="cx"> typedef WTF::HashMap&lt;const RenderBox*, Optional&lt;LayoutUnit&gt;&gt; OverrideOptionalSizeMap;
</span><span class="cx"> static OverrideOptionalSizeMap* gOverrideContainingBlockLogicalHeightMap = nullptr;
</span><span class="cx"> static OverrideOptionalSizeMap* gOverrideContainingBlockLogicalWidthMap = nullptr;
</span><ins>+static OverrideSizeMap* gExtraInlineOffsetMap = nullptr;
+static OverrideSizeMap* gExtraBlockOffsetMap = nullptr;
</ins><span class="cx"> #endif
</span><span class="cx"> 
</span><span class="cx"> // Size of border belt for autoscroll. When mouse pointer in border belt,
</span><span class="lines">@@ -141,6 +143,7 @@
</span><span class="cx">     clearOverrideSize();
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><span class="cx">     clearContainingBlockOverrideSize();
</span><ins>+    clearExtraInlineAndBlockOffests();
</ins><span class="cx"> #endif
</span><span class="cx"> 
</span><span class="cx">     RenderBlock::removePercentHeightDescendantIfNeeded(*this);
</span><span class="lines">@@ -1137,6 +1140,38 @@
</span><span class="cx">     if (gOverrideContainingBlockLogicalHeightMap)
</span><span class="cx">         gOverrideContainingBlockLogicalHeightMap-&gt;remove(this);
</span><span class="cx"> }
</span><ins>+
+LayoutUnit RenderBox::extraInlineOffset() const
+{
+    return gExtraInlineOffsetMap ? gExtraInlineOffsetMap-&gt;get(this) : LayoutUnit();
+}
+
+LayoutUnit RenderBox::extraBlockOffset() const
+{
+    return gExtraBlockOffsetMap ? gExtraBlockOffsetMap-&gt;get(this) : LayoutUnit();
+}
+
+void RenderBox::setExtraInlineOffset(LayoutUnit inlineOffest)
+{
+    if (!gExtraInlineOffsetMap)
+        gExtraInlineOffsetMap = new OverrideSizeMap;
+    gExtraInlineOffsetMap-&gt;set(this, inlineOffest);
+}
+
+void RenderBox::setExtraBlockOffset(LayoutUnit blockOffest)
+{
+    if (!gExtraBlockOffsetMap)
+        gExtraBlockOffsetMap = new OverrideSizeMap;
+    gExtraBlockOffsetMap-&gt;set(this, blockOffest);
+}
+
+void RenderBox::clearExtraInlineAndBlockOffests()
+{
+    if (gExtraInlineOffsetMap)
+        gExtraInlineOffsetMap-&gt;remove(this);
+    if (gExtraBlockOffsetMap)
+        gExtraBlockOffsetMap-&gt;remove(this);
+}
</ins><span class="cx"> #endif // ENABLE(CSS_GRID_LAYOUT)
</span><span class="cx"> 
</span><span class="cx"> LayoutUnit RenderBox::adjustBorderBoxLogicalWidthForBoxSizing(LayoutUnit width) const
</span><span class="lines">@@ -3170,6 +3205,13 @@
</span><span class="cx">     if (checkForPerpendicularWritingMode &amp;&amp; containingBlock-&gt;isHorizontalWritingMode() != isHorizontalWritingMode())
</span><span class="cx">         return containingBlockLogicalHeightForPositioned(containingBlock, false);
</span><span class="cx"> 
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+    if (hasOverrideContainingBlockLogicalWidth()) {
+        if (auto overrideLogicalWidth = overrideContainingBlockContentLogicalWidth())
+            return overrideLogicalWidth.value();
+    }
+#endif
+
</ins><span class="cx">     if (is&lt;RenderBox&gt;(*containingBlock)) {
</span><span class="cx">         bool isFixedPosition = style().position() == FixedPosition;
</span><span class="cx"> 
</span><span class="lines">@@ -3233,6 +3275,13 @@
</span><span class="cx">     if (checkForPerpendicularWritingMode &amp;&amp; containingBlock-&gt;isHorizontalWritingMode() != isHorizontalWritingMode())
</span><span class="cx">         return containingBlockLogicalWidthForPositioned(containingBlock, nullptr, false);
</span><span class="cx"> 
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+    if (hasOverrideContainingBlockLogicalHeight()) {
+        if (auto overrideLogicalHeight = overrideContainingBlockContentLogicalHeight())
+            return overrideLogicalHeight.value();
+    }
+#endif
+
</ins><span class="cx">     if (containingBlock-&gt;isBox()) {
</span><span class="cx">         bool isFixedPosition = style().position() == FixedPosition;
</span><span class="cx"> 
</span><span class="lines">@@ -3431,6 +3480,11 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+    if (!style().hasStaticInlinePosition(isHorizontal))
+        computedValues.m_position += extraInlineOffset();
+#endif
+
</ins><span class="cx">     computedValues.m_extent += bordersPlusPadding;
</span><span class="cx">     
</span><span class="cx">     // Adjust logicalLeft if we need to for the flipped version of our writing mode in regions.
</span><span class="lines">@@ -3750,6 +3804,11 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+    if (!style().hasStaticBlockPosition(isHorizontalWritingMode()))
+        computedValues.m_position += extraBlockOffset();
+#endif
+
</ins><span class="cx">     // Set final height value.
</span><span class="cx">     computedValues.m_extent += bordersPlusPadding;
</span><span class="cx">     
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.h (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.h        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/RenderBox.h        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -326,6 +326,11 @@
</span><span class="cx">     void setOverrideContainingBlockContentLogicalHeight(Optional&lt;LayoutUnit&gt;);
</span><span class="cx">     void clearContainingBlockOverrideSize();
</span><span class="cx">     void clearOverrideContainingBlockContentLogicalHeight();
</span><ins>+    LayoutUnit extraInlineOffset() const;
+    LayoutUnit extraBlockOffset() const;
+    void setExtraInlineOffset(LayoutUnit);
+    void setExtraBlockOffset(LayoutUnit);
+    void clearExtraInlineAndBlockOffests();
</ins><span class="cx"> #endif
</span><span class="cx"> 
</span><span class="cx">     virtual LayoutSize offsetFromContainer(RenderElement&amp;, const LayoutPoint&amp;, bool* offsetDependsOnPoint = nullptr) const override;
</span><span class="lines">@@ -449,6 +454,7 @@
</span><span class="cx">     virtual int verticalScrollbarWidth() const;
</span><span class="cx">     int horizontalScrollbarHeight() const;
</span><span class="cx">     int intrinsicScrollbarLogicalWidth() const;
</span><ins>+    int scrollbarLogicalWidth() const { return style().isHorizontalWritingMode() ? verticalScrollbarWidth() : horizontalScrollbarHeight(); }
</ins><span class="cx">     int scrollbarLogicalHeight() const { return style().isHorizontalWritingMode() ? horizontalScrollbarHeight() : verticalScrollbarWidth(); }
</span><span class="cx">     virtual bool scroll(ScrollDirection, ScrollGranularity, float multiplier = 1, Element** stopElement = nullptr, RenderBox* startBox = nullptr, const IntPoint&amp; wheelEventAbsolutePoint = IntPoint());
</span><span class="cx">     virtual bool logicalScroll(ScrollLogicalDirection, ScrollGranularity, float multiplier = 1, Element** stopElement = nullptr);
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -322,6 +322,8 @@
</span><span class="cx"> 
</span><span class="cx">     layoutPositionedObjects(relayoutChildren || isDocumentElementRenderer());
</span><span class="cx"> 
</span><ins>+    clearGrid();
+
</ins><span class="cx">     computeOverflow(oldClientAfterEdge);
</span><span class="cx">     statePusher.pop();
</span><span class="cx"> 
</span><span class="lines">@@ -1050,6 +1052,9 @@
</span><span class="cx">     Vector&lt;RenderBox*&gt; autoMajorAxisAutoGridItems;
</span><span class="cx">     Vector&lt;RenderBox*&gt; specifiedMajorAxisAutoGridItems;
</span><span class="cx">     for (RenderBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {
</span><ins>+        if (child-&gt;isOutOfFlowPositioned())
+            continue;
+
</ins><span class="cx">         auto unresolvedRowPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), *child, ForRows);
</span><span class="cx">         auto unresolvedColumnPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), *child, ForColumns);
</span><span class="cx"> 
</span><span class="lines">@@ -1082,6 +1087,9 @@
</span><span class="cx">     unsigned maximumColumnIndex = std::max&lt;unsigned&gt;(1, GridResolvedPosition::explicitGridColumnCount(style()));
</span><span class="cx"> 
</span><span class="cx">     for (RenderBox* child = firstChildBox(); child; child = child-&gt;nextSiblingBox()) {
</span><ins>+        if (child-&gt;isOutOfFlowPositioned())
+            continue;
+
</ins><span class="cx">         populator.collectChild(*child);
</span><span class="cx"> 
</span><span class="cx">         auto unresolvedRowPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), *child, ForRows);
</span><span class="lines">@@ -1286,6 +1294,11 @@
</span><span class="cx">     populateGridPositions(sizingData);
</span><span class="cx"> 
</span><span class="cx">     for (RenderBox* child = firstChildBox(); child; child = child-&gt;nextSiblingBox()) {
</span><ins>+        if (child-&gt;isOutOfFlowPositioned()) {
+            prepareChildForPositionedLayout(*child);
+            continue;
+        }
+
</ins><span class="cx">         // Because the grid area cannot be styled, we don't need to adjust
</span><span class="cx">         // the grid breadth to account for 'box-sizing'.
</span><span class="cx">         Optional&lt;LayoutUnit&gt; oldOverrideContainingBlockContentLogicalWidth = child-&gt;hasOverrideContainingBlockLogicalWidth() ? child-&gt;overrideContainingBlockContentLogicalWidth() : LayoutUnit();
</span><span class="lines">@@ -1336,10 +1349,98 @@
</span><span class="cx">         height = std::max(height, minHeight);
</span><span class="cx">     }
</span><span class="cx">     setLogicalHeight(height);
</span><ins>+}
</ins><span class="cx"> 
</span><del>-    clearGrid();
</del><ins>+void RenderGrid::prepareChildForPositionedLayout(RenderBox&amp; child)
+{
+    ASSERT(child.isOutOfFlowPositioned());
+    child.containingBlock()-&gt;insertPositionedObject(child);
+
+    RenderLayer* childLayer = child.layer();
+    childLayer-&gt;setStaticInlinePosition(borderAndPaddingStart());
+    childLayer-&gt;setStaticBlockPosition(borderAndPaddingBefore());
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+void RenderGrid::layoutPositionedObject(RenderBox&amp; child, bool relayoutChildren, bool fixedPositionObjectsOnly)
+{
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+    // FIXME: Properly support orthogonal writing mode.
+    if (!hasOrthogonalWritingMode) {
+        LayoutUnit columnOffset = LayoutUnit();
+        LayoutUnit columnBreadth = LayoutUnit();
+        offsetAndBreadthForPositionedChild(child, ForColumns, columnOffset, columnBreadth);
+        LayoutUnit rowOffset = LayoutUnit();
+        LayoutUnit rowBreadth = LayoutUnit();
+        offsetAndBreadthForPositionedChild(child, ForRows, rowOffset, rowBreadth);
+
+        child.setOverrideContainingBlockContentLogicalWidth(columnBreadth);
+        child.setOverrideContainingBlockContentLogicalHeight(rowBreadth);
+        child.setExtraInlineOffset(columnOffset);
+        child.setExtraBlockOffset(rowOffset);
+    }
+
+    RenderBlock::layoutPositionedObject(child, relayoutChildren, fixedPositionObjectsOnly);
+}
+
+void RenderGrid::offsetAndBreadthForPositionedChild(const RenderBox&amp; child, GridTrackSizingDirection direction, LayoutUnit&amp; offset, LayoutUnit&amp; breadth)
+{
+    ASSERT(child.isHorizontalWritingMode() == isHorizontalWritingMode());
+
+    auto unresolvedPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), child, direction);
+    if (unresolvedPositions.requiresAutoPlacement()) {
+        offset = LayoutUnit();
+        breadth = (direction == ForColumns) ? clientLogicalWidth() : clientLogicalHeight();
+        return;
+    }
+
+    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;
+
+    GridSpan positions = GridResolvedPosition::resolveGridPositionsFromStyle(unresolvedPositions, style());
+    bool startIsAuto = startPosition.isAuto()
+        || (startPosition.isNamedGridArea() &amp;&amp; GridResolvedPosition::isNonExistentNamedLineOrArea(startPosition.namedGridLine(), style(), (direction == ForColumns) ? ColumnStartSide : RowStartSide))
+        || (positions.resolvedInitialPosition.toInt() &gt; lastTrackIndex);
+    bool endIsAuto = endPosition.isAuto()
+        || (endPosition.isNamedGridArea() &amp;&amp; GridResolvedPosition::isNonExistentNamedLineOrArea(endPosition.namedGridLine(), style(), (direction == ForColumns) ? ColumnEndSide : RowEndSide))
+        || (positions.resolvedFinalPosition.toInt() &gt; lastTrackIndex);
+
+    GridResolvedPosition firstPosition = GridResolvedPosition(0);
+    GridResolvedPosition initialPosition = startIsAuto ? firstPosition : positions.resolvedInitialPosition;
+    GridResolvedPosition lastPosition = GridResolvedPosition(lastTrackIndex);
+    GridResolvedPosition finalPosition = endIsAuto ? lastPosition : positions.resolvedFinalPosition;
+
+    // Positioned children do not grow the grid, so we need to clamp the positions to avoid ending up outside of it.
+    initialPosition = std::min&lt;GridResolvedPosition&gt;(initialPosition, lastPosition);
+    finalPosition = std::min&lt;GridResolvedPosition&gt;(finalPosition, lastPosition);
+
+    LayoutUnit start = startIsAuto ? LayoutUnit() : (direction == ForColumns) ?  m_columnPositions[initialPosition.toInt()] : m_rowPositions[initialPosition.toInt()];
+    LayoutUnit end = endIsAuto ? (direction == ForColumns) ? logicalWidth() : logicalHeight() : (direction == ForColumns) ?  m_columnPositions[finalPosition.next().toInt()] : m_rowPositions[finalPosition.next().toInt()];
+
+    breadth = end - start;
+
+    if (startIsAuto)
+        breadth -= (direction == ForColumns) ? borderStart() : borderBefore();
+    else
+        start -= ((direction == ForColumns) ? borderStart() : borderBefore());
+
+    if (endIsAuto) {
+        breadth -= (direction == ForColumns) ? borderEnd() : borderAfter();
+        breadth -= scrollbarLogicalWidth();
+    }
+
+    offset = start;
+
+    if (child.parent() == this &amp;&amp; !startIsAuto) {
+        // If column/row start is &quot;auto&quot; the static position has been already set in prepareChildForPositionedLayout().
+        RenderLayer* childLayer = child.layer();
+        if (direction == ForColumns)
+            childLayer-&gt;setStaticInlinePosition(borderStart() + offset);
+        else
+            childLayer-&gt;setStaticBlockPosition(borderBefore() + offset);
+    }
+}
+
</ins><span class="cx"> GridCoordinate RenderGrid::cachedGridCoordinate(const RenderBox&amp; gridItem) const
</span><span class="cx"> {
</span><span class="cx">     ASSERT(m_gridItemCoordinate.contains(&amp;gridItem));
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/RenderGrid.h        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -88,6 +88,9 @@
</span><span class="cx">     GridTrackSizingDirection autoPlacementMinorAxisDirection() const;
</span><span class="cx"> 
</span><span class="cx">     void layoutGridItems();
</span><ins>+    void prepareChildForPositionedLayout(RenderBox&amp;);
+    void layoutPositionedObject(RenderBox&amp;, bool relayoutChildren, bool fixedPositionObjectsOnly) override;
+    void offsetAndBreadthForPositionedChild(const RenderBox&amp;, GridTrackSizingDirection, LayoutUnit&amp; offset, LayoutUnit&amp; breadth);
</ins><span class="cx">     void populateGridPositions(GridSizingData&amp;);
</span><span class="cx">     void clearGrid();
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleGridResolvedPositioncpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -58,7 +58,7 @@
</span><span class="cx">     return lineName + (isStartSide(side) ? &quot;-start&quot; : &quot;-end&quot;);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-static bool isNonExistentNamedLineOrArea(const String&amp; lineName, const RenderStyle&amp; style, GridPositionSide side)
</del><ins>+bool GridResolvedPosition::isNonExistentNamedLineOrArea(const String&amp; lineName, const RenderStyle&amp; style, GridPositionSide side)
</ins><span class="cx"> {
</span><span class="cx">     const NamedGridLinesMap&amp; gridLineNames = gridLinesForSide(style, side);
</span><span class="cx">     return !gridLineNames.contains(implicitNamedGridLineForSide(lineName, side)) &amp;&amp; !gridLineNames.contains(lineName);
</span><span class="lines">@@ -81,10 +81,10 @@
</span><span class="cx">     // Try to early detect the case of non existing named grid lines. This way we could assume later that
</span><span class="cx">     // GridResolvedPosition::resolveGrisPositionFromStyle() won't require the autoplacement to run, i.e., it'll always return a
</span><span class="cx">     // valid resolved position.
</span><del>-    if (m_initialPosition.isNamedGridArea() &amp;&amp; isNonExistentNamedLineOrArea(m_initialPosition.namedGridLine(), gridContainerStyle, m_initialPositionSide))
</del><ins>+    if (m_initialPosition.isNamedGridArea() &amp;&amp; GridResolvedPosition::isNonExistentNamedLineOrArea(m_initialPosition.namedGridLine(), gridContainerStyle, m_initialPositionSide))
</ins><span class="cx">         m_initialPosition.setAutoPosition();
</span><span class="cx"> 
</span><del>-    if (m_finalPosition.isNamedGridArea() &amp;&amp; isNonExistentNamedLineOrArea(m_finalPosition.namedGridLine(), gridContainerStyle, m_finalPositionSide))
</del><ins>+    if (m_finalPosition.isNamedGridArea() &amp;&amp; GridResolvedPosition::isNonExistentNamedLineOrArea(m_finalPosition.namedGridLine(), gridContainerStyle, m_finalPositionSide))
</ins><span class="cx">         m_finalPosition.setAutoPosition();
</span><span class="cx"> 
</span><span class="cx">     // If the grid item has an automatic position and a grid span for a named line in a given dimension, instead treat the grid span as one.
</span><span class="lines">@@ -272,7 +272,7 @@
</span><span class="cx">         // ''&lt;custom-ident&gt;-start (for grid-*-start) / &lt;custom-ident&gt;-end'' (for grid-*-end), contributes the first such
</span><span class="cx">         // line to the grid item's placement.
</span><span class="cx">         String namedGridLine = position.namedGridLine();
</span><del>-        ASSERT(!isNonExistentNamedLineOrArea(namedGridLine, gridContainerStyle, side));
</del><ins>+        ASSERT(!GridResolvedPosition::isNonExistentNamedLineOrArea(namedGridLine, gridContainerStyle, side));
</ins><span class="cx"> 
</span><span class="cx">         const NamedGridLinesMap&amp; gridLineNames = gridLinesForSide(gridContainerStyle, side);
</span><span class="cx">         auto implicitLine = gridLineNames.find(implicitNamedGridLineForSide(namedGridLine, side));
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleGridResolvedPositionh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/GridResolvedPosition.h (192053 => 192054)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/GridResolvedPosition.h        2015-11-05 09:29:40 UTC (rev 192053)
+++ trunk/Source/WebCore/rendering/style/GridResolvedPosition.h        2015-11-05 09:30:30 UTC (rev 192054)
</span><span class="lines">@@ -138,6 +138,7 @@
</span><span class="cx">     static GridUnresolvedSpan unresolvedSpanFromStyle(const RenderStyle&amp;, const RenderBox&amp;, GridTrackSizingDirection);
</span><span class="cx">     static unsigned explicitGridColumnCount(const RenderStyle&amp;);
</span><span class="cx">     static unsigned explicitGridRowCount(const RenderStyle&amp;);
</span><ins>+    static bool isNonExistentNamedLineOrArea(const String&amp; lineName, const RenderStyle&amp;, GridPositionSide);
</ins><span class="cx"> 
</span><span class="cx"> private:
</span><span class="cx">     unsigned m_integerPosition;
</span></span></pre>
</div>
</div>

</body>
</html>