<!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>[197850] 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/197850">197850</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2016-03-09 02:15:23 -0800 (Wed, 09 Mar 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>[css-grid] Initial support for implicit grid before explicit grid
https://bugs.webkit.org/show_bug.cgi?id=155014

Reviewed by Darin Adler.

Source/WebCore:

Change GridSpan to store int instead of unsigned. This allows us to
resolve positions before the explicit grid with negative values.

This patch adds a new type of GridSpan called &quot;Untranslated&quot;.
This type is only used in populateExplicitGridAndOrderIterator().
Where we store the smallest negative position in both axis.

Then the GridSpans are translated into positive values, using the offset
calculated before. This is done in placeItemsOnGrid() and from that
moment the rest of the code uses &quot;Definite&quot; GridSpans, which returns
only positive positions (unsigned instead of int).
This allows us to don't have to modify the rest of the code, as it keeps
using GridSpans as before.

Let's use an example to explain how it works. Imagine that we've a 2
columns grid and 2 items placed like:
* Item A: grid-column: -5;
* Item B: grid-column: 1;

Initially we'll use &quot;Unstranslated&quot; GridSpans with the following values:
* Item A: GridSpan(-2, -1)
* Item B: GridSpan(0, 1)

Then we'll translate them using the smallest position as offset (-2)
so we've &quot;Definite&quot; GridSpans:
* Item A: GridSpan(0, 1)
* Item B: GridSpan(2, 3)

Test: fast/css-grid-layout/implicit-tracks-before-explicit.html

* css/CSSParser.cpp:
(WebCore::CSSParser::parseGridTemplateAreasRow):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::GridIterator::nextEmptyGridArea):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::insertItemIntoGrid):
(WebCore::RenderGrid::placeItemsOnGrid):
(WebCore::RenderGrid::populateExplicitGridAndOrderIterator):
(WebCore::RenderGrid::createEmptyGridAreaAtSpecifiedPositionsOutsideGrid):
(WebCore::RenderGrid::placeSpecifiedMajorAxisItemsOnGrid):
(WebCore::RenderGrid::placeAutoMajorAxisItemOnGrid):
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
(WebCore::RenderGrid::placeAutoMajorAxisItemsOnGrid): Deleted.
(WebCore::RenderGrid::layoutPositionedObject): Deleted.
* rendering/RenderGrid.h:
* rendering/style/GridCoordinate.h:
(WebCore::GridSpan::untranslatedDefiniteGridSpan):
(WebCore::GridSpan::translatedDefiniteGridSpan):
(WebCore::GridSpan::integerSpan):
(WebCore::GridSpan::untranslatedResolvedInitialPosition):
(WebCore::GridSpan::untranslatedResolvedFinalPosition):
(WebCore::GridSpan::resolvedInitialPosition):
(WebCore::GridSpan::resolvedFinalPosition):
(WebCore::GridSpan::begin):
(WebCore::GridSpan::end):
(WebCore::GridSpan::isTranslatedDefinite):
(WebCore::GridSpan::isIndefinite):
(WebCore::GridSpan::translate):
(WebCore::GridSpan::GridSpan):
(WebCore::GridSpan::operator==): Deleted.
(WebCore::GridSpan::GridSpanIterator::GridSpanIterator): Deleted.
(WebCore::GridSpan::GridSpanIterator::operator unsigned&amp;): Deleted.
* rendering/style/GridResolvedPosition.cpp:
(WebCore::resolveRowStartColumnStartNamedGridLinePositionAgainstOppositePosition):
(WebCore::resolveRowEndColumnEndNamedGridLinePositionAgainstOppositePosition):
(WebCore::resolveNamedGridLinePositionAgainstOppositePosition):
(WebCore::resolveGridPositionAgainstOppositePosition):
(WebCore::resolveGridPositionFromStyle):
(WebCore::GridResolvedPosition::resolveGridPositionsFromStyle):
(WebCore::GridResolvedPosition::spanSizeForAutoPlacedItem): Deleted.

LayoutTests:

Updated results in current tests and added specific test for this.

* fast/css-grid-layout/grid-auto-flow-resolution.html:
* fast/css-grid-layout/grid-item-negative-position-resolution.html:
* fast/css-grid-layout/grid-item-spanning-resolution.html:
* fast/css-grid-layout/implicit-tracks-before-explicit-expected.txt: Added.
* fast/css-grid-layout/implicit-tracks-before-explicit.html: Added.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautoflowresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnegativepositionresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemspanningresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSParsercpp">trunk/Source/WebCore/css/CSSParser.cpp</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="#trunkSourceWebCorerenderingstyleGridCoordinateh">trunk/Source/WebCore/rendering/style/GridCoordinate.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleGridResolvedPositioncpp">trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutimplicittracksbeforeexplicitexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutimplicittracksbeforeexplicithtml">trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/LayoutTests/ChangeLog        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2016-03-09  Manuel Rego Casasnovas  &lt;rego@igalia.com&gt;
+
+        [css-grid] Initial support for implicit grid before explicit grid
+        https://bugs.webkit.org/show_bug.cgi?id=155014
+
+        Reviewed by Darin Adler.
+
+        Updated results in current tests and added specific test for this.
+
+        * fast/css-grid-layout/grid-auto-flow-resolution.html:
+        * fast/css-grid-layout/grid-item-negative-position-resolution.html:
+        * fast/css-grid-layout/grid-item-spanning-resolution.html:
+        * fast/css-grid-layout/implicit-tracks-before-explicit-expected.txt: Added.
+        * fast/css-grid-layout/implicit-tracks-before-explicit.html: Added.
+
</ins><span class="cx"> 2016-03-09  Myles C. Maxfield  &lt;mmaxfield@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [iOS] Arabic text on Wikipedia is shown as boxes
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautoflowresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -23,8 +23,6 @@
</span><span class="cx">     -webkit-grid-column: auto / 8;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-/* These 2 classes forces the grid to be sized after the grid-{column|row}-end, thus end up in the
-   first row / columns. */
</del><span class="cx"> .negativeOverflowingRowFirstColumn {
</span><span class="cx">     -webkit-grid-row: auto / -10;
</span><span class="cx">     -webkit-grid-column: 1;
</span><span class="lines">@@ -153,15 +151,15 @@
</span><span class="cx"> 
</span><span class="cx"> &lt;div class=&quot;unconstrainedContainer&quot;&gt;
</span><span class="cx">     &lt;div class=&quot;grid bigGrid gridAutoFlowColumnSparse justifyContentStart&quot;&gt;
</span><del>-        &lt;div class=&quot;sizedToGridArea negativeOverflowingRowFirstColumn&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;XXXXX XXXXX XXXXX&lt;/div&gt;
-        &lt;div class=&quot;sizedToGridArea secondRowNegativeOverflowingColumn&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;XXXXX XXXXX XXXXX&lt;/div&gt;
</del><ins>+        &lt;div class=&quot;sizedToGridArea negativeOverflowingRowFirstColumn&quot; data-offset-x=&quot;170&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;30&quot;&gt;XXXXX XXXXX XXXXX&lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea secondRowNegativeOverflowingColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;80&quot; data-expected-width=&quot;170&quot; data-expected-height=&quot;100&quot;&gt;XXXXX XXXXX XXXXX&lt;/div&gt;
</ins><span class="cx">     &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div class=&quot;unconstrainedContainer&quot;&gt;
</span><span class="cx">     &lt;div class=&quot;grid bigGrid gridAutoFlowRowSparse justifyContentStart&quot;&gt;
</span><del>-        &lt;div class=&quot;sizedToGridArea negativeOverflowingRowFirstColumn&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;XXXXX XXXXX XXXXX&lt;/div&gt;
-        &lt;div class=&quot;sizedToGridArea secondRowNegativeOverflowingColumn&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;XXXXX XXXXX XXXXX&lt;/div&gt;
</del><ins>+        &lt;div class=&quot;sizedToGridArea negativeOverflowingRowFirstColumn&quot; data-offset-x=&quot;170&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;30&quot;&gt;XXXXX XXXXX XXXXX&lt;/div&gt;
+        &lt;div class=&quot;sizedToGridArea secondRowNegativeOverflowingColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;80&quot; data-expected-width=&quot;170&quot; data-expected-height=&quot;100&quot;&gt;XXXXX XXXXX XXXXX&lt;/div&gt;
</ins><span class="cx">     &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnegativepositionresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -158,8 +158,8 @@
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><del>-&lt;div class=&quot;grid&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
-    &lt;div class=&quot;sizedToGridArea negativeEndPositionStartSpanInRowDirection&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;150&quot;&gt;&lt;/div&gt;
</del><ins>+&lt;div class=&quot;grid&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;750&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea negativeEndPositionStartSpanInRowDirection&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;750&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -170,8 +170,8 @@
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><del>-&lt;div class=&quot;grid&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
-    &lt;div class=&quot;sizedToGridArea negativeNamedGridLineEndPositionStartSpanInRowDirection&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;150&quot;&gt;&lt;/div&gt;
</del><ins>+&lt;div class=&quot;grid&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;750&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea negativeNamedGridLineEndPositionStartSpanInRowDirection&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;750&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -182,8 +182,8 @@
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><del>-&lt;div class=&quot;grid&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
-    &lt;div class=&quot;sizedToGridArea negativeEndPositionStartNegativeInRowDirection&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;
</del><ins>+&lt;div class=&quot;grid&quot; data-expected-width=&quot;550&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea negativeEndPositionStartNegativeInRowDirection&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;450&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -194,8 +194,8 @@
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><del>-&lt;div class=&quot;grid&quot; data-expected-width=&quot;150&quot; data-expected-height=&quot;150&quot;&gt;
-    &lt;div class=&quot;sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection&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;
</del><ins>+&lt;div class=&quot;grid&quot; data-expected-width=&quot;550&quot; data-expected-height=&quot;150&quot;&gt;
+    &lt;div class=&quot;sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;450&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemspanningresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -7,6 +7,8 @@
</span><span class="cx">     -webkit-grid-template-rows: 30% 70%;
</span><span class="cx">     width: 400px;
</span><span class="cx">     height: 300px;
</span><ins>+    -webkit-grid-auto-columns: 200px;
+    -webkit-grid-auto-rows: 250px;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> #bigGrid {
</span><span class="lines">@@ -124,25 +126,25 @@
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><span class="cx"> &lt;div class=&quot;grid&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;300&quot;&gt;
</span><del>-    &lt;div class=&quot;sizedToGridArea negativeOverflowRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;160&quot; data-expected-height=&quot;90&quot;&gt;&lt;/div&gt;
</del><ins>+    &lt;div class=&quot;sizedToGridArea negativeOverflowRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;160&quot; data-expected-height=&quot;500&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><span class="cx"> &lt;div class=&quot;grid&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;300&quot;&gt;
</span><del>-    &lt;div class=&quot;sizedToGridArea overflowRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;160&quot; data-expected-height=&quot;300&quot;&gt;&lt;/div&gt;
</del><ins>+    &lt;div class=&quot;sizedToGridArea overflowRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;160&quot; data-expected-height=&quot;800&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><span class="cx"> &lt;div class=&quot;grid&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;300&quot;&gt;
</span><del>-    &lt;div class=&quot;sizedToGridArea firstRowNegativeOverflowColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;160&quot; data-expected-height=&quot;90&quot;&gt;&lt;/div&gt;
</del><ins>+    &lt;div class=&quot;sizedToGridArea firstRowNegativeOverflowColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;90&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><span class="cx"> &lt;div class=&quot;grid&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;300&quot;&gt;
</span><del>-    &lt;div class=&quot;sizedToGridArea firstRowOverflowColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;90&quot;&gt;&lt;/div&gt;
</del><ins>+    &lt;div class=&quot;sizedToGridArea firstRowOverflowColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;800&quot; data-expected-height=&quot;90&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -154,7 +156,7 @@
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><span class="cx"> &lt;div class=&quot;grid&quot; data-expected-width=&quot;400&quot; data-expected-height=&quot;300&quot;&gt;
</span><del>-    &lt;div class=&quot;sizedToGridArea autoSecondRowAutoFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;160&quot; data-expected-height=&quot;90&quot;&gt;&lt;/div&gt;
</del><ins>+    &lt;div class=&quot;sizedToGridArea autoSecondRowAutoFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;90&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -188,7 +190,7 @@
</span><span class="cx"> 
</span><span class="cx"> &lt;div style=&quot;position: relative&quot;&gt;
</span><span class="cx"> &lt;div class=&quot;grid&quot; id=&quot;bigGrid&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;100&quot;&gt;
</span><del>-    &lt;div class=&quot;sizedToGridArea underflowSpanning&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;75&quot;&gt;&lt;/div&gt;
</del><ins>+    &lt;div class=&quot;sizedToGridArea underflowSpanning&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;300&quot; data-expected-height=&quot;1325&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;!-- Check that the end span is ignored when two opposing spans are specified--&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutimplicittracksbeforeexplicitexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit-expected.txt (0 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit-expected.txt        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -0,0 +1,112 @@
</span><ins>+This test checks that it's possible to create implicit tracks before the explicit ones using negative indexes.
+
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+PASS
+X
+XX
+XXX
+XXXX
+XXXXX
+PASS
+X
+XX
+XXX
+XXXX
+XXXXX
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutimplicittracksbeforeexplicithtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html (0 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -0,0 +1,234 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;link href=&quot;resources/grid-alignment.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+.grid {
+    -webkit-grid: 50px / 100px;
+    font: 10px/1 Ahem;
+    position: relative;
+    margin: 25px;
+}
+
+.firstNegativeRowFirstColumn {
+    background-color: purple;
+    -webkit-grid-row: -3;
+    -webkit-grid-column: 1;
+}
+
+.firstNegativeRowFirstNegativeColumn {
+    background-color: navy;
+    -webkit-grid-row: -3;
+    -webkit-grid-column: -3;
+}
+
+.secondNegativeRowFirstColumn {
+    background-color: lime;
+    -webkit-grid-row: -4;
+    -webkit-grid-column: 1;
+}
+
+.secondNegativeRowSecondNegativeColumn {
+    background-color: orange;
+    -webkit-grid-row: -4;
+    -webkit-grid-column: -4;
+}
+
+.firstRowFirstNegativeColumn {
+    background-color: magenta;
+    -webkit-grid-row: 1;
+    -webkit-grid-column: -3;
+}
+
+.firstNegativeRowFirstNegativeColumn {
+    background-color: maroon;
+    -webkit-grid-row: -3;
+    -webkit-grid-column: -3;
+}
+
+.firstRowSecondNegativeColumn {
+    background-color: aqua;
+    -webkit-grid-row: 1;
+    -webkit-grid-column: -4;
+}
+
+&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 it's possible to create implicit tracks before the explicit ones using negative indexes.&lt;/p&gt;
+
+&lt;div class=&quot;grid&quot;&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;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;50&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;50&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;50&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;50&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;50&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;50&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;autoRowAutoColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstNegativeColumn&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;50&quot;&gt;XX&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;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;50&quot;&gt;XX&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;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;90&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;90&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;50&quot;&gt;XXXX&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;50&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;grid justifyContentStart&quot;&gt;
+    &lt;div class=&quot;secondNegativeRowFirstColumn&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;X&lt;/div&gt;
+    &lt;div class=&quot;firstRowSecondNegativeColumn&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;50&quot;&gt;XX&lt;/div&gt;
+    &lt;div class=&quot;firstNegativeRowFirstColumn&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstNegativeColumn&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;50&quot;&gt;XXXX&lt;/div&gt;
+    &lt;div class=&quot;firstRowFirstColumn&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;20&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;50&quot;&gt;XXXXX&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/Source/WebCore/ChangeLog        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -1,3 +1,82 @@
</span><ins>+2016-03-09  Manuel Rego Casasnovas  &lt;rego@igalia.com&gt;
+
+        [css-grid] Initial support for implicit grid before explicit grid
+        https://bugs.webkit.org/show_bug.cgi?id=155014
+
+        Reviewed by Darin Adler.
+
+        Change GridSpan to store int instead of unsigned. This allows us to
+        resolve positions before the explicit grid with negative values.
+
+        This patch adds a new type of GridSpan called &quot;Untranslated&quot;.
+        This type is only used in populateExplicitGridAndOrderIterator().
+        Where we store the smallest negative position in both axis.
+
+        Then the GridSpans are translated into positive values, using the offset
+        calculated before. This is done in placeItemsOnGrid() and from that
+        moment the rest of the code uses &quot;Definite&quot; GridSpans, which returns
+        only positive positions (unsigned instead of int).
+        This allows us to don't have to modify the rest of the code, as it keeps
+        using GridSpans as before.
+
+        Let's use an example to explain how it works. Imagine that we've a 2
+        columns grid and 2 items placed like:
+        * Item A: grid-column: -5;
+        * Item B: grid-column: 1;
+
+        Initially we'll use &quot;Unstranslated&quot; GridSpans with the following values:
+        * Item A: GridSpan(-2, -1)
+        * Item B: GridSpan(0, 1)
+
+        Then we'll translate them using the smallest position as offset (-2)
+        so we've &quot;Definite&quot; GridSpans:
+        * Item A: GridSpan(0, 1)
+        * Item B: GridSpan(2, 3)
+
+        Test: fast/css-grid-layout/implicit-tracks-before-explicit.html
+
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseGridTemplateAreasRow):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::GridIterator::nextEmptyGridArea):
+        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+        (WebCore::RenderGrid::gridTrackSize):
+        (WebCore::RenderGrid::insertItemIntoGrid):
+        (WebCore::RenderGrid::placeItemsOnGrid):
+        (WebCore::RenderGrid::populateExplicitGridAndOrderIterator):
+        (WebCore::RenderGrid::createEmptyGridAreaAtSpecifiedPositionsOutsideGrid):
+        (WebCore::RenderGrid::placeSpecifiedMajorAxisItemsOnGrid):
+        (WebCore::RenderGrid::placeAutoMajorAxisItemOnGrid):
+        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+        (WebCore::RenderGrid::placeAutoMajorAxisItemsOnGrid): Deleted.
+        (WebCore::RenderGrid::layoutPositionedObject): Deleted.
+        * rendering/RenderGrid.h:
+        * rendering/style/GridCoordinate.h:
+        (WebCore::GridSpan::untranslatedDefiniteGridSpan):
+        (WebCore::GridSpan::translatedDefiniteGridSpan):
+        (WebCore::GridSpan::integerSpan):
+        (WebCore::GridSpan::untranslatedResolvedInitialPosition):
+        (WebCore::GridSpan::untranslatedResolvedFinalPosition):
+        (WebCore::GridSpan::resolvedInitialPosition):
+        (WebCore::GridSpan::resolvedFinalPosition):
+        (WebCore::GridSpan::begin):
+        (WebCore::GridSpan::end):
+        (WebCore::GridSpan::isTranslatedDefinite):
+        (WebCore::GridSpan::isIndefinite):
+        (WebCore::GridSpan::translate):
+        (WebCore::GridSpan::GridSpan):
+        (WebCore::GridSpan::operator==): Deleted.
+        (WebCore::GridSpan::GridSpanIterator::GridSpanIterator): Deleted.
+        (WebCore::GridSpan::GridSpanIterator::operator unsigned&amp;): Deleted.
+        * rendering/style/GridResolvedPosition.cpp:
+        (WebCore::resolveRowStartColumnStartNamedGridLinePositionAgainstOppositePosition):
+        (WebCore::resolveRowEndColumnEndNamedGridLinePositionAgainstOppositePosition):
+        (WebCore::resolveNamedGridLinePositionAgainstOppositePosition):
+        (WebCore::resolveGridPositionAgainstOppositePosition):
+        (WebCore::resolveGridPositionFromStyle):
+        (WebCore::GridResolvedPosition::resolveGridPositionsFromStyle):
+        (WebCore::GridResolvedPosition::spanSizeForAutoPlacedItem): Deleted.
+
</ins><span class="cx"> 2016-03-09  Myles C. Maxfield  &lt;mmaxfield@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [iOS] Arabic text on Wikipedia is shown as boxes
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/Source/WebCore/css/CSSParser.cpp        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -6249,7 +6249,7 @@
</span><span class="cx"> 
</span><span class="cx">         auto gridAreaIterator = gridAreaMap.find(gridAreaName);
</span><span class="cx">         if (gridAreaIterator == gridAreaMap.end())
</span><del>-            gridAreaMap.add(gridAreaName, GridCoordinate(GridSpan::definiteGridSpan(rowCount, rowCount + 1), GridSpan::definiteGridSpan(currentColumn, lookAheadColumn)));
</del><ins>+            gridAreaMap.add(gridAreaName, GridCoordinate(GridSpan::translatedDefiniteGridSpan(rowCount, rowCount + 1), GridSpan::translatedDefiniteGridSpan(currentColumn, lookAheadColumn)));
</ins><span class="cx">         else {
</span><span class="cx">             GridCoordinate&amp; gridCoordinate = gridAreaIterator-&gt;value;
</span><span class="cx"> 
</span><span class="lines">@@ -6266,7 +6266,7 @@
</span><span class="cx">             if (lookAheadColumn != gridCoordinate.columns.resolvedFinalPosition())
</span><span class="cx">                 return false;
</span><span class="cx"> 
</span><del>-            gridCoordinate.rows = GridSpan::definiteGridSpan(gridCoordinate.rows.resolvedInitialPosition(), gridCoordinate.rows.resolvedFinalPosition() + 1);
</del><ins>+            gridCoordinate.rows = GridSpan::translatedDefiniteGridSpan(gridCoordinate.rows.resolvedInitialPosition(), gridCoordinate.rows.resolvedFinalPosition() + 1);
</ins><span class="cx">         }
</span><span class="cx">         currentColumn = lookAheadColumn - 1;
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -34,6 +34,7 @@
</span><span class="cx"> #include &quot;LayoutRepainter.h&quot;
</span><span class="cx"> #include &quot;RenderLayer.h&quot;
</span><span class="cx"> #include &quot;RenderView.h&quot;
</span><ins>+#include &lt;cstdlib&gt;
</ins><span class="cx"> 
</span><span class="cx"> namespace WebCore {
</span><span class="cx"> 
</span><span class="lines">@@ -190,7 +191,7 @@
</span><span class="cx">         const unsigned endOfVaryingTrackIndex = (m_direction == ForColumns) ? m_grid.size() : m_grid[0].size();
</span><span class="cx">         for (; varyingTrackIndex &lt; endOfVaryingTrackIndex; ++varyingTrackIndex) {
</span><span class="cx">             if (isEmptyAreaEnough(rowSpan, columnSpan)) {
</span><del>-                std::unique_ptr&lt;GridCoordinate&gt; result = std::make_unique&lt;GridCoordinate&gt;(GridSpan::definiteGridSpan(m_rowIndex, m_rowIndex + rowSpan), GridSpan::definiteGridSpan(m_columnIndex, m_columnIndex + columnSpan));
</del><ins>+                std::unique_ptr&lt;GridCoordinate&gt; result = std::make_unique&lt;GridCoordinate&gt;(GridSpan::translatedDefiniteGridSpan(m_rowIndex, m_rowIndex + rowSpan), GridSpan::translatedDefiniteGridSpan(m_columnIndex, m_columnIndex + columnSpan));
</ins><span class="cx">                 // Advance the iterator to avoid an infinite loop where we would return the same grid area over and over.
</span><span class="cx">                 ++varyingTrackIndex;
</span><span class="cx">                 return result;
</span><span class="lines">@@ -566,7 +567,7 @@
</span><span class="cx">     // 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
</span><span class="cx">     double flexFraction = 0;
</span><span class="cx">     if (hasDefiniteFreeSpace)
</span><del>-        flexFraction = findFlexFactorUnitSize(tracks, GridSpan::definiteGridSpan(0, tracks.size()), direction, initialFreeSpace.value());
</del><ins>+        flexFraction = findFlexFactorUnitSize(tracks, GridSpan::translatedDefiniteGridSpan(0, tracks.size()), direction, initialFreeSpace.value());
</ins><span class="cx">     else {
</span><span class="cx">         for (const auto&amp; trackIndex : flexibleSizedTracksIndex)
</span><span class="cx">             flexFraction = std::max(flexFraction, normalizedFlexFraction(tracks[trackIndex], gridTrackSize(direction, trackIndex).maxTrackBreadth().flex()));
</span><span class="lines">@@ -687,8 +688,11 @@
</span><span class="cx"> {
</span><span class="cx">     bool isForColumns = (direction == ForColumns);
</span><span class="cx">     auto&amp; trackStyles =  isForColumns ? style().gridColumns() : style().gridRows();
</span><del>-    auto&amp; trackSize = (i &gt;= trackStyles.size()) ? (isForColumns ? style().gridAutoColumns() : style().gridAutoRows()) : trackStyles[i];
</del><span class="cx"> 
</span><ins>+    auto&amp; autoTrackSize = isForColumns ? style().gridAutoColumns() : style().gridAutoRows();
+    int translatedIndex = i + (isForColumns ? m_smallestColumnStart : m_smallestRowStart);
+    auto&amp; trackSize = (translatedIndex &lt; 0 || translatedIndex &gt;= static_cast&lt;int&gt;(trackStyles.size())) ? autoTrackSize : trackStyles[translatedIndex];
+
</ins><span class="cx">     GridLength minTrackBreadth = trackSize.minTrackBreadth();
</span><span class="cx">     GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
</span><span class="cx"> 
</span><span class="lines">@@ -1137,7 +1141,7 @@
</span><span class="cx"> 
</span><span class="cx"> void RenderGrid::insertItemIntoGrid(RenderBox&amp; child, const GridCoordinate&amp; coordinate)
</span><span class="cx"> {
</span><del>-    ASSERT(coordinate.rows.isDefinite() &amp;&amp; coordinate.columns.isDefinite());
</del><ins>+    ASSERT(coordinate.rows.isTranslatedDefinite() &amp;&amp; coordinate.columns.isTranslatedDefinite());
</ins><span class="cx">     ensureGridSize(coordinate.rows.resolvedFinalPosition(), coordinate.columns.resolvedFinalPosition());
</span><span class="cx"> 
</span><span class="cx">     for (auto row : coordinate.rows) {
</span><span class="lines">@@ -1160,11 +1164,16 @@
</span><span class="cx">             continue;
</span><span class="cx"> 
</span><span class="cx">         GridCoordinate coordinate = cachedGridCoordinate(*child);
</span><ins>+        if (!coordinate.rows.isIndefinite())
+            coordinate.rows.translate(std::abs(m_smallestRowStart));
+        if (!coordinate.columns.isIndefinite())
+            coordinate.columns.translate(std::abs(m_smallestColumnStart));
+        m_gridItemCoordinate.set(child, coordinate);
</ins><span class="cx"> 
</span><del>-        if (!coordinate.rows.isDefinite() || !coordinate.columns.isDefinite()) {
</del><ins>+        if (coordinate.rows.isIndefinite() || coordinate.columns.isIndefinite()) {
</ins><span class="cx">             bool majorAxisDirectionIsForColumns = autoPlacementMajorAxisDirection() == ForColumns;
</span><del>-            if ((majorAxisDirectionIsForColumns &amp;&amp; !coordinate.columns.isDefinite())
-                || (!majorAxisDirectionIsForColumns &amp;&amp; !coordinate.rows.isDefinite()))
</del><ins>+            if ((majorAxisDirectionIsForColumns &amp;&amp; coordinate.columns.isIndefinite())
+                || (!majorAxisDirectionIsForColumns &amp;&amp; coordinate.rows.isIndefinite()))
</ins><span class="cx">                 autoMajorAxisAutoGridItems.append(child);
</span><span class="cx">             else
</span><span class="cx">                 specifiedMajorAxisAutoGridItems.append(child);
</span><span class="lines">@@ -1185,7 +1194,7 @@
</span><span class="cx">             continue;
</span><span class="cx"> 
</span><span class="cx">         GridCoordinate coordinate = cachedGridCoordinate(*child);
</span><del>-        ASSERT(coordinate.rows.isDefinite() &amp;&amp; coordinate.columns.isDefinite());
</del><ins>+        ASSERT(coordinate.rows.isTranslatedDefinite() &amp;&amp; coordinate.columns.isTranslatedDefinite());
</ins><span class="cx">     }
</span><span class="cx"> #endif
</span><span class="cx"> }
</span><span class="lines">@@ -1193,6 +1202,7 @@
</span><span class="cx"> void RenderGrid::populateExplicitGridAndOrderIterator()
</span><span class="cx"> {
</span><span class="cx">     OrderIteratorPopulator populator(m_orderIterator);
</span><ins>+    m_smallestRowStart = m_smallestColumnStart = 0;
</ins><span class="cx">     unsigned maximumRowIndex = std::max&lt;unsigned&gt;(1, GridResolvedPosition::explicitGridRowCount(style()));
</span><span class="cx">     unsigned maximumColumnIndex = std::max&lt;unsigned&gt;(1, GridResolvedPosition::explicitGridColumnCount(style()));
</span><span class="cx"> 
</span><span class="lines">@@ -1203,8 +1213,9 @@
</span><span class="cx">         populator.collectChild(*child);
</span><span class="cx"> 
</span><span class="cx">         GridSpan rowPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *child, ForRows);
</span><del>-        if (rowPositions.isDefinite()) {
-            maximumRowIndex = std::max(maximumRowIndex, rowPositions.resolvedFinalPosition());
</del><ins>+        if (!rowPositions.isIndefinite()) {
+            m_smallestRowStart = std::min(m_smallestRowStart, rowPositions.untranslatedResolvedInitialPosition());
+            maximumRowIndex = std::max&lt;int&gt;(maximumRowIndex, rowPositions.untranslatedResolvedFinalPosition());
</ins><span class="cx">         } else {
</span><span class="cx">             // Grow the grid for items with a definite row span, getting the largest such span.
</span><span class="cx">             unsigned spanSize = GridResolvedPosition::spanSizeForAutoPlacedItem(style(), *child, ForRows);
</span><span class="lines">@@ -1212,8 +1223,9 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         GridSpan columnPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *child, ForColumns);
</span><del>-        if (columnPositions.isDefinite()) {
-            maximumColumnIndex = std::max(maximumColumnIndex, columnPositions.resolvedFinalPosition());
</del><ins>+        if (!columnPositions.isIndefinite()) {
+            m_smallestColumnStart = std::min(m_smallestColumnStart, columnPositions.untranslatedResolvedInitialPosition());
+            maximumColumnIndex = std::max&lt;int&gt;(maximumColumnIndex, columnPositions.untranslatedResolvedFinalPosition());
</ins><span class="cx">         } else {
</span><span class="cx">             // Grow the grid for items with a definite column span, getting the largest such span.
</span><span class="cx">             unsigned spanSize = GridResolvedPosition::spanSizeForAutoPlacedItem(style(), *child, ForColumns);
</span><span class="lines">@@ -1223,9 +1235,9 @@
</span><span class="cx">         m_gridItemCoordinate.set(child, GridCoordinate(rowPositions, columnPositions));
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    m_grid.grow(maximumRowIndex);
</del><ins>+    m_grid.grow(maximumRowIndex + std::abs(m_smallestRowStart));
</ins><span class="cx">     for (auto&amp; column : m_grid)
</span><del>-        column.grow(maximumColumnIndex);
</del><ins>+        column.grow(maximumColumnIndex + std::abs(m_smallestColumnStart));
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> std::unique_ptr&lt;GridCoordinate&gt; RenderGrid::createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(const RenderBox&amp; gridItem, GridTrackSizingDirection specifiedDirection, const GridSpan&amp; specifiedPositions) const
</span><span class="lines">@@ -1233,7 +1245,7 @@
</span><span class="cx">     GridTrackSizingDirection crossDirection = specifiedDirection == ForColumns ? ForRows : ForColumns;
</span><span class="cx">     const unsigned endOfCrossDirection = crossDirection == ForColumns ? gridColumnCount() : gridRowCount();
</span><span class="cx">     unsigned crossDirectionSpanSize = GridResolvedPosition::spanSizeForAutoPlacedItem(style(), gridItem, crossDirection);
</span><del>-    GridSpan crossDirectionPositions = GridSpan::definiteGridSpan(endOfCrossDirection, endOfCrossDirection + crossDirectionSpanSize);
</del><ins>+    GridSpan crossDirectionPositions = GridSpan::translatedDefiniteGridSpan(endOfCrossDirection, endOfCrossDirection + crossDirectionSpanSize);
</ins><span class="cx">     return std::make_unique&lt;GridCoordinate&gt;(specifiedDirection == ForColumns ? crossDirectionPositions : specifiedPositions, specifiedDirection == ForColumns ? specifiedPositions : crossDirectionPositions);
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -1249,8 +1261,8 @@
</span><span class="cx"> 
</span><span class="cx">     for (auto&amp; autoGridItem : autoGridItems) {
</span><span class="cx">         GridSpan majorAxisPositions = cachedGridSpan(*autoGridItem, autoPlacementMajorAxisDirection());
</span><del>-        ASSERT(majorAxisPositions.isDefinite());
-        ASSERT(!cachedGridSpan(*autoGridItem, autoPlacementMinorAxisDirection()).isDefinite());
</del><ins>+        ASSERT(majorAxisPositions.isTranslatedDefinite());
+        ASSERT(cachedGridSpan(*autoGridItem, autoPlacementMinorAxisDirection()).isIndefinite());
</ins><span class="cx">         unsigned minorAxisSpanSize = GridResolvedPosition::spanSizeForAutoPlacedItem(style(), *autoGridItem, autoPlacementMinorAxisDirection());
</span><span class="cx">         unsigned majorAxisInitialPosition = majorAxisPositions.resolvedInitialPosition();
</span><span class="cx"> 
</span><span class="lines">@@ -1284,7 +1296,7 @@
</span><span class="cx"> 
</span><span class="cx"> void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox&amp; gridItem, AutoPlacementCursor&amp; autoPlacementCursor)
</span><span class="cx"> {
</span><del>-    ASSERT(!cachedGridSpan(gridItem, autoPlacementMajorAxisDirection()).isDefinite());
</del><ins>+    ASSERT(cachedGridSpan(gridItem, autoPlacementMajorAxisDirection()).isIndefinite());
</ins><span class="cx">     unsigned majorAxisSpanSize = GridResolvedPosition::spanSizeForAutoPlacedItem(style(), gridItem, autoPlacementMajorAxisDirection());
</span><span class="cx"> 
</span><span class="cx">     const unsigned endOfMajorAxis = (autoPlacementMajorAxisDirection() == ForColumns) ? gridColumnCount() : gridRowCount();
</span><span class="lines">@@ -1293,7 +1305,7 @@
</span><span class="cx"> 
</span><span class="cx">     std::unique_ptr&lt;GridCoordinate&gt; emptyGridArea;
</span><span class="cx">     GridSpan minorAxisPositions = cachedGridSpan(gridItem, autoPlacementMinorAxisDirection());
</span><del>-    if (minorAxisPositions.isDefinite()) {
</del><ins>+    if (minorAxisPositions.isTranslatedDefinite()) {
</ins><span class="cx">         // Move to the next track in major axis if initial position in minor axis is before auto-placement cursor.
</span><span class="cx">         if (minorAxisPositions.resolvedInitialPosition() &lt; minorAxisAutoPlacementCursor)
</span><span class="cx">             majorAxisAutoPlacementCursor++;
</span><span class="lines">@@ -1329,7 +1341,7 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         if (!emptyGridArea)
</span><del>-            emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(gridItem, autoPlacementMinorAxisDirection(), GridSpan::definiteGridSpan(0, minorAxisSpanSize));
</del><ins>+            emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(gridItem, autoPlacementMinorAxisDirection(), GridSpan::translatedDefiniteGridSpan(0, minorAxisSpanSize));
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     m_gridItemCoordinate.set(&amp;gridItem, *emptyGridArea);
</span><span class="lines">@@ -1474,11 +1486,12 @@
</span><span class="cx">     ASSERT(child.isHorizontalWritingMode() == isHorizontalWritingMode());
</span><span class="cx"> 
</span><span class="cx">     GridSpan positions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), child, direction);
</span><del>-    if (!positions.isDefinite()) {
</del><ins>+    if (positions.isIndefinite()) {
</ins><span class="cx">         offset = LayoutUnit();
</span><span class="cx">         breadth = (direction == ForColumns) ? clientLogicalWidth() : clientLogicalHeight();
</span><span class="cx">         return;
</span><span class="cx">     }
</span><ins>+    positions.translate(direction == ForColumns ? m_smallestColumnStart : m_smallestRowStart);
</ins><span class="cx"> 
</span><span class="cx">     GridPosition startPosition = (direction == ForColumns) ? child.style().gridItemColumnStart() : child.style().gridItemRowStart();
</span><span class="cx">     GridPosition endPosition = (direction == ForColumns) ? child.style().gridItemColumnEnd() : child.style().gridItemRowEnd();
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/Source/WebCore/rendering/RenderGrid.h        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -190,6 +190,9 @@
</span><span class="cx"> 
</span><span class="cx">     Optional&lt;LayoutUnit&gt; m_minContentHeight;
</span><span class="cx">     Optional&lt;LayoutUnit&gt; m_maxContentHeight;
</span><ins>+
+    int m_smallestColumnStart;
+    int m_smallestRowStart;
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> } // namespace WebCore
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleGridCoordinateh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/GridCoordinate.h (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/GridCoordinate.h        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/Source/WebCore/rendering/style/GridCoordinate.h        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -41,7 +41,7 @@
</span><span class="cx"> namespace WebCore {
</span><span class="cx"> 
</span><span class="cx"> // Recommended maximum size for both explicit and implicit grids.
</span><del>-const unsigned kGridMaxTracks = 1000000;
</del><ins>+const int kGridMaxTracks = 1000000;
</ins><span class="cx"> 
</span><span class="cx"> // A span in a single direction (either rows or columns). Note that |resolvedInitialPosition|
</span><span class="cx"> // and |resolvedFinalPosition| are grid lines' indexes.
</span><span class="lines">@@ -49,11 +49,16 @@
</span><span class="cx"> class GridSpan {
</span><span class="cx"> public:
</span><span class="cx"> 
</span><del>-    static GridSpan definiteGridSpan(unsigned resolvedInitialPosition, unsigned resolvedFinalPosition)
</del><ins>+    static GridSpan untranslatedDefiniteGridSpan(int resolvedInitialPosition, int resolvedFinalPosition)
</ins><span class="cx">     {
</span><del>-        return GridSpan(resolvedInitialPosition, resolvedFinalPosition, Definite);
</del><ins>+        return GridSpan(resolvedInitialPosition, resolvedFinalPosition, UntranslatedDefinite);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    static GridSpan translatedDefiniteGridSpan(unsigned resolvedInitialPosition, unsigned resolvedFinalPosition)
+    {
+        return GridSpan(resolvedInitialPosition, resolvedFinalPosition, TranslatedDefinite);
+    }
+
</ins><span class="cx">     static GridSpan indefiniteGridSpan()
</span><span class="cx">     {
</span><span class="cx">         return GridSpan(0, 1, Indefinite);
</span><span class="lines">@@ -66,20 +71,33 @@
</span><span class="cx"> 
</span><span class="cx">     unsigned integerSpan() const
</span><span class="cx">     {
</span><del>-        ASSERT(isDefinite());
</del><ins>+        ASSERT(isTranslatedDefinite());
</ins><span class="cx">         return m_resolvedFinalPosition - m_resolvedInitialPosition;
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    int untranslatedResolvedInitialPosition() const
+    {
+        ASSERT(m_type == UntranslatedDefinite);
+        return m_resolvedInitialPosition;
+    }
+
+    int untranslatedResolvedFinalPosition() const
+    {
+        ASSERT(m_type == UntranslatedDefinite);
+        return m_resolvedFinalPosition;
+    }
+
</ins><span class="cx">     unsigned resolvedInitialPosition() const
</span><span class="cx">     {
</span><del>-        ASSERT(isDefinite());
</del><ins>+        ASSERT(isTranslatedDefinite());
+        ASSERT(m_resolvedFinalPosition &gt;= 0);
</ins><span class="cx">         return m_resolvedInitialPosition;
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     unsigned resolvedFinalPosition() const
</span><span class="cx">     {
</span><del>-        ASSERT(isDefinite());
-        ASSERT(m_resolvedFinalPosition);
</del><ins>+        ASSERT(isTranslatedDefinite());
+        ASSERT(m_resolvedFinalPosition &gt; 0);
</ins><span class="cx">         return m_resolvedFinalPosition;
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="lines">@@ -97,35 +115,59 @@
</span><span class="cx"> 
</span><span class="cx">     GridSpanIterator begin() const
</span><span class="cx">     {
</span><del>-        ASSERT(isDefinite());
</del><ins>+        ASSERT(isTranslatedDefinite());
</ins><span class="cx">         return m_resolvedInitialPosition;
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     GridSpanIterator end() const
</span><span class="cx">     {
</span><del>-        ASSERT(isDefinite());
</del><ins>+        ASSERT(isTranslatedDefinite());
</ins><span class="cx">         return m_resolvedFinalPosition;
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    bool isDefinite() const
</del><ins>+    bool isTranslatedDefinite() const
</ins><span class="cx">     {
</span><del>-        return m_type == Definite;
</del><ins>+        return m_type == TranslatedDefinite;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    bool isIndefinite() const
+    {
+        return m_type == Indefinite;
+    }
+
+    void translate(unsigned offset)
+    {
+        ASSERT(m_type == UntranslatedDefinite);
+
+        m_type = TranslatedDefinite;
+        m_resolvedInitialPosition += offset;
+        m_resolvedFinalPosition += offset;
+
+        ASSERT(m_resolvedInitialPosition &gt;= 0);
+        ASSERT(m_resolvedFinalPosition &gt; 0);
+    }
+
</ins><span class="cx"> private:
</span><span class="cx"> 
</span><del>-    enum GridSpanType {Definite, Indefinite};
</del><ins>+    enum GridSpanType {UntranslatedDefinite, TranslatedDefinite, Indefinite};
</ins><span class="cx"> 
</span><del>-    GridSpan(unsigned resolvedInitialPosition, unsigned resolvedFinalPosition, GridSpanType type)
-        : m_resolvedInitialPosition(std::min(resolvedInitialPosition, kGridMaxTracks - 1))
-        , m_resolvedFinalPosition(std::min(resolvedFinalPosition, kGridMaxTracks))
-        , m_type(type)
</del><ins>+    GridSpan(int resolvedInitialPosition, int resolvedFinalPosition, GridSpanType type)
+        : m_type(type)
</ins><span class="cx">     {
</span><ins>+#if ENABLE(ASSERT)
</ins><span class="cx">         ASSERT(resolvedInitialPosition &lt; resolvedFinalPosition);
</span><ins>+        if (type == TranslatedDefinite) {
+            ASSERT(resolvedInitialPosition &gt;= 0);
+            ASSERT(resolvedFinalPosition &gt; 0);
+        }
+#endif
+
+        m_resolvedInitialPosition = std::max(-kGridMaxTracks, std::min(resolvedInitialPosition, kGridMaxTracks - 1));
+        m_resolvedFinalPosition = std::max(-kGridMaxTracks + 1, std::min(resolvedFinalPosition, kGridMaxTracks));
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    unsigned m_resolvedInitialPosition;
-    unsigned m_resolvedFinalPosition;
</del><ins>+    int m_resolvedInitialPosition;
+    int m_resolvedFinalPosition;
</ins><span class="cx">     GridSpanType m_type;
</span><span class="cx"> 
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleGridResolvedPositioncpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp (197849 => 197850)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp        2016-03-09 10:05:59 UTC (rev 197849)
+++ trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp        2016-03-09 10:15:23 UTC (rev 197850)
</span><span class="lines">@@ -35,6 +35,7 @@
</span><span class="cx"> 
</span><span class="cx"> #include &quot;GridCoordinate.h&quot;
</span><span class="cx"> #include &quot;RenderBox.h&quot;
</span><ins>+#include &lt;cstdlib&gt;
</ins><span class="cx"> 
</span><span class="cx"> namespace WebCore {
</span><span class="cx"> 
</span><span class="lines">@@ -140,7 +141,7 @@
</span><span class="cx"> static GridSpan resolveRowStartColumnStartNamedGridLinePositionAgainstOppositePosition(unsigned resolvedOppositePosition, const GridPosition&amp; position, const Vector&lt;unsigned&gt;&amp; gridLines)
</span><span class="cx"> {
</span><span class="cx">     if (!resolvedOppositePosition)
</span><del>-        return GridSpan::definiteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</del><ins>+        return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</ins><span class="cx"> 
</span><span class="cx">     unsigned firstLineBeforePositionIndex = 0;
</span><span class="cx">     auto firstLineBeforePosition = std::lower_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition);
</span><span class="lines">@@ -152,7 +153,7 @@
</span><span class="cx">     unsigned resolvedGridLinePosition = gridLines[gridLineIndex];
</span><span class="cx">     if (resolvedGridLinePosition &gt;= resolvedOppositePosition)
</span><span class="cx">         resolvedGridLinePosition = resolvedOppositePosition - 1;
</span><del>-    return GridSpan::definiteGridSpan(std::min(resolvedGridLinePosition, resolvedOppositePosition), resolvedOppositePosition);
</del><ins>+    return GridSpan::untranslatedDefiniteGridSpan(std::min(resolvedGridLinePosition, resolvedOppositePosition), resolvedOppositePosition);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> static GridSpan resolveRowEndColumnEndNamedGridLinePositionAgainstOppositePosition(unsigned resolvedOppositePosition, const GridPosition&amp; position, const Vector&lt;unsigned&gt;&amp; gridLines)
</span><span class="lines">@@ -167,7 +168,7 @@
</span><span class="cx">     unsigned resolvedGridLinePosition = gridLines[gridLineIndex];
</span><span class="cx">     if (resolvedGridLinePosition &lt;= resolvedOppositePosition)
</span><span class="cx">         resolvedGridLinePosition = resolvedOppositePosition + 1;
</span><del>-    return GridSpan::definiteGridSpan(resolvedOppositePosition, resolvedGridLinePosition);
</del><ins>+    return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedGridLinePosition);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const RenderStyle&amp; gridContainerStyle, unsigned resolvedOppositePosition, const GridPosition&amp; position, GridPositionSide side)
</span><span class="lines">@@ -183,9 +184,9 @@
</span><span class="cx">     // If there is no named grid line of that name, we resolve the position to 'auto' (which is equivalent to 'span 1' in this case).
</span><span class="cx">     // See http://lists.w3.org/Archives/Public/www-style/2013Jun/0394.html.
</span><span class="cx">     if (it == gridLinesNames.end()) {
</span><del>-        if (isStartSide(side) &amp;&amp; resolvedOppositePosition)
-            return GridSpan::definiteGridSpan(resolvedOppositePosition - 1, resolvedOppositePosition);
-        return GridSpan::definiteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</del><ins>+        if (isStartSide(side))
+            return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition - 1, resolvedOppositePosition);
+        return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     if (side == RowStartSide || side == ColumnStartSide)
</span><span class="lines">@@ -197,9 +198,9 @@
</span><span class="cx"> static GridSpan resolveGridPositionAgainstOppositePosition(const RenderStyle&amp; gridContainerStyle, unsigned resolvedOppositePosition, const GridPosition&amp; position, GridPositionSide side)
</span><span class="cx"> {
</span><span class="cx">     if (position.isAuto()) {
</span><del>-        if (isStartSide(side) &amp;&amp; resolvedOppositePosition)
-            return GridSpan::definiteGridSpan(resolvedOppositePosition - 1, resolvedOppositePosition);
-        return GridSpan::definiteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</del><ins>+        if (isStartSide(side))
+            return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition - 1, resolvedOppositePosition);
+        return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     ASSERT(position.isSpan());
</span><span class="lines">@@ -213,15 +214,10 @@
</span><span class="cx">     // 'span 1' is contained inside a single grid track regardless of the direction.
</span><span class="cx">     // That's why the CSS span value is one more than the offset we apply.
</span><span class="cx">     unsigned positionOffset = position.spanPosition();
</span><del>-    if (isStartSide(side)) {
-        if (!resolvedOppositePosition)
-            return GridSpan::definiteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</del><ins>+    if (isStartSide(side))
+        return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition - positionOffset, resolvedOppositePosition);
</ins><span class="cx"> 
</span><del>-        unsigned initialResolvedPosition = std::max&lt;int&gt;(0, resolvedOppositePosition - positionOffset);
-        return GridSpan::definiteGridSpan(initialResolvedPosition, resolvedOppositePosition);
-    }
-
-    return GridSpan::definiteGridSpan(resolvedOppositePosition, resolvedOppositePosition + positionOffset);
</del><ins>+    return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + positionOffset);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> unsigned GridResolvedPosition::spanSizeForAutoPlacedItem(const RenderStyle&amp; gridContainerStyle, const RenderBox&amp; gridItem, GridTrackSizingDirection direction)
</span><span class="lines">@@ -242,7 +238,7 @@
</span><span class="cx">     return position.spanPosition();
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-static unsigned resolveGridPositionFromStyle(const RenderStyle&amp; gridContainerStyle, const GridPosition&amp; position, GridPositionSide side)
</del><ins>+static int resolveGridPositionFromStyle(const RenderStyle&amp; gridContainerStyle, const GridPosition&amp; position, GridPositionSide side)
</ins><span class="cx"> {
</span><span class="cx">     switch (position.type()) {
</span><span class="cx">     case ExplicitPosition: {
</span><span class="lines">@@ -255,13 +251,9 @@
</span><span class="cx">         if (position.isPositive())
</span><span class="cx">             return position.integerPosition() - 1;
</span><span class="cx"> 
</span><del>-        unsigned resolvedPosition = abs(position.integerPosition()) - 1;
</del><ins>+        unsigned resolvedPosition = std::abs(position.integerPosition()) - 1;
</ins><span class="cx">         const unsigned endOfTrack = explicitGridSizeForSide(gridContainerStyle, side);
</span><span class="cx"> 
</span><del>-        // Per http://lists.w3.org/Archives/Public/www-style/2013Mar/0589.html, we clamp negative value to the first line.
-        if (endOfTrack &lt; resolvedPosition)
-            return 0;
-
</del><span class="cx">         return endOfTrack - resolvedPosition;
</span><span class="cx">     }
</span><span class="cx">     case NamedGridAreaPosition:
</span><span class="lines">@@ -323,15 +315,15 @@
</span><span class="cx">         return resolveGridPositionAgainstOppositePosition(gridContainerStyle, initialResolvedPosition, finalPosition, finalSide);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    unsigned resolvedInitialPosition = resolveGridPositionFromStyle(gridContainerStyle, initialPosition, initialSide);
-    unsigned resolvedFinalPosition = resolveGridPositionFromStyle(gridContainerStyle, finalPosition, finalSide);
</del><ins>+    int resolvedInitialPosition = resolveGridPositionFromStyle(gridContainerStyle, initialPosition, initialSide);
+    int resolvedFinalPosition = resolveGridPositionFromStyle(gridContainerStyle, finalPosition, finalSide);
</ins><span class="cx"> 
</span><span class="cx">     if (resolvedInitialPosition &gt; resolvedFinalPosition)
</span><span class="cx">         std::swap(resolvedInitialPosition, resolvedFinalPosition);
</span><span class="cx">     else if (resolvedInitialPosition == resolvedFinalPosition)
</span><span class="cx">         resolvedFinalPosition = resolvedInitialPosition + 1;
</span><span class="cx"> 
</span><del>-    return GridSpan::definiteGridSpan(resolvedInitialPosition, std::max(resolvedInitialPosition, resolvedFinalPosition));
</del><ins>+    return GridSpan::untranslatedDefiniteGridSpan(resolvedInitialPosition, std::max(resolvedInitialPosition, resolvedFinalPosition));
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> } // namespace WebCore
</span></span></pre>
</div>
</div>

</body>
</html>