<!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>[197930] 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/197930">197930</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2016-03-10 04:15:34 -0800 (Thu, 10 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Fix placement for unknown named grid lines
https://bugs.webkit.org/show_bug.cgi?id=155230
Reviewed by Sergio Villar Senin.
Source/WebCore:
The spec has changed and now all the implicit lines should be considered
when we're resolving named grid lines with an unknown name.
The relevant part of the spec is
(http://dev.w3.org/csswg/css-grid/#line-placement):
"If a name is given as a <custom-ident>, only lines with that name
are counted. If not enough lines with that name exist,
all implicit grid lines are assumed to have that name
for the purpose of finding this position."
Modified the code to resolve named grid lines in GridResolvedPosition.
We need to keep the old behavior of considering "auto" unknown named
grid lines for the case of positioned grid items.
Test: fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html
* rendering/style/GridResolvedPosition.cpp:
(WebCore::adjustGridPositionsFromStyle):
(WebCore::lookAheadForNamedGridLine):
(WebCore::lookBackForNamedGridLine):
(WebCore::resolveNamedGridLinePositionFromStyle):
(WebCore::definiteGridSpanWithNamedLineSpanAgainstOpposite):
(WebCore::resolveNamedGridLinePositionAgainstOppositePosition):
(WebCore::resolveGridPositionAgainstOppositePosition):
(WebCore::resolveGridPositionFromStyle):
LayoutTests:
Updated current tests to the new expected behavior and created a new
test checking different cases explicitly.
* fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
* fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt:
* fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html:
* fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
* fast/css-grid-layout/grid-item-named-grid-line-resolution-expected.txt:
* fast/css-grid-layout/grid-item-named-grid-line-resolution.html:
* fast/css-grid-layout/grid-item-negative-position-resolution.html:
* fast/css-grid-layout/grid-item-position-changed-dynamic.html:
* fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution-expected.txt: Added.
* fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html: Added.
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainerchangenamedgridlinesrecomputechildhtml">trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditembadnamedareaautoplacementexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditembadnamedareaautoplacementhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnamedgridarearesolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnamedgridlineresolutionexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemnamedgridlineresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-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="#trunkLayoutTestsfastcssgridlayoutgriditempositionchangeddynamichtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleGridResolvedPositioncpp">trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemunknownnamedgridlineresolutionexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemunknownnamedgridlineresolutionhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/ChangeLog 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2016-03-10 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Fix placement for unknown named grid lines
+ https://bugs.webkit.org/show_bug.cgi?id=155230
+
+ Reviewed by Sergio Villar Senin.
+
+ Updated current tests to the new expected behavior and created a new
+ test checking different cases explicitly.
+
+ * fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
+ * fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt:
+ * fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html:
+ * fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
+ * fast/css-grid-layout/grid-item-named-grid-line-resolution-expected.txt:
+ * fast/css-grid-layout/grid-item-named-grid-line-resolution.html:
+ * fast/css-grid-layout/grid-item-negative-position-resolution.html:
+ * fast/css-grid-layout/grid-item-position-changed-dynamic.html:
+ * fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html: Added.
+ * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
+
</ins><span class="cx"> 2016-03-09 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Get a RemoteObject or ObjectPreview from HeapSnapshot Object Identifier
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerchangenamedgridlinesrecomputechildhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -55,8 +55,8 @@
</span><span class="cx"> function testChangingGridDefinitions()
</span><span class="cx"> {
</span><span class="cx"> testGridDefinitions('10px [row] 20px', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
</span><del>- testGridDefinitions('10px [row] 20px', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' });
- testGridDefinitions('10px 20px [row]', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' });
</del><ins>+ testGridDefinitions('10px [row] 20px', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
+ testGridDefinitions('10px 20px [row]', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
</ins><span class="cx"> testGridDefinitions('10px 20px [row]', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditembadnamedareaautoplacementexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-This test checks that unknown named area are treated as 'auto' by applying the auto-placement algorithm when mandated.
</del><ins>+This test checks that unknown named area are resolved properly considering all the implicit grid lines to have the given names.
</ins><span class="cx">
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditembadnamedareaautoplacementhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -5,60 +5,66 @@
</span><span class="cx"> <style>
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-rows: 10px 20px;
</span><ins>+ -webkit-grid-auto-rows: 5px;
</ins><span class="cx"> -webkit-grid-template-columns: 30px 40px;
</span><ins>+ -webkit-grid-auto-columns: 15px;
</ins><span class="cx"> -webkit-grid-auto-flow: row;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothNamedGridLineRow {
</span><span class="cx"> -webkit-grid-row: nonExistentArea / nonExistentArea;
</span><span class="cx"> -webkit-grid-column: 1;
</span><ins>+ background-color: lime;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .bothNamedGridLineColumn {
</span><span class="cx"> -webkit-grid-row: 1;
</span><span class="cx"> -webkit-grid-column: nonExistentArea / span 3;
</span><ins>+ background-color: lime;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedGridLineSpanRow {
</span><span class="cx"> -webkit-grid-row: nonExistentArea / span 5 firstRow;
</span><span class="cx"> -webkit-grid-column: 1;
</span><ins>+ background-color: lime;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .namedGridLineSpanColumn {
</span><span class="cx"> -webkit-grid-row: 1;
</span><span class="cx"> -webkit-grid-column: nonExistentArea / span;
</span><ins>+ background-color: lime;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="cx">
</span><del>-<p>This test checks that unknown named area are treated as 'auto' by applying the auto-placement algorithm when mandated.</p>
</del><ins>+<p>This test checks that unknown named area are resolved properly considering all the implicit grid lines to have the given names.</p>
</ins><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
</span><del>- <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
</del><ins>+ <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0" data-offset-y="35" data-expected-width="30" data-expected-height="5"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid contentStart">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
</span><del>- <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
</del><ins>+ <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="85" data-offset-y="0" data-expected-width="45" data-expected-height="10"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
</span><del>- <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
</del><ins>+ <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0" data-offset-y="35" data-expected-width="30" data-expected-height="25"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid">
</span><span class="cx"> <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
</span><del>- <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
</del><ins>+ <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="85" data-offset-y="0" data-expected-width="15" data-expected-height="10"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnamedgridarearesolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -76,8 +76,8 @@
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithRepeat justifyContentStart">
</span><span class="cx"> <!-- fifth and sixth are invalid named grid areas. -->
</span><del>- <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="150"></div>
- <div class="sizedToGridArea gridItemFifthArea" data-offset-x="40" data-offset-y="150" data-expected-width="80" data-expected-height="150"></div>
</del><ins>+ <div class="sizedToGridArea gridItemSixthArea" data-offset-x="280" data-offset-y="300" data-expected-width="0" data-expected-height="0"></div>
+ <div class="sizedToGridArea gridItemFifthArea" data-offset-x="280" data-offset-y="300" data-expected-width="0" data-expected-height="0"></div>
</ins><span class="cx">
</span><span class="cx"> <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-offset-y="50" data-expected-width="120" data-expected-height="100"></div>
</span><span class="cx"> <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-offset-y="0" data-expected-width="160" data-expected-height="150"></div>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnamedgridlineresolutionexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution-expected.txt (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution-expected.txt 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution-expected.txt 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -23,3 +23,4 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemnamedgridlineresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -3,6 +3,11 @@
</span><span class="cx"> <head>
</span><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <style>
</span><ins>+.grid {
+ -webkit-grid-auto-columns: 5px;
+ -webkit-grid-auto-rows: 5px;
+}
+
</ins><span class="cx"> .gridWithoutRepeat {
</span><span class="cx"> -webkit-grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
</span><span class="cx"> -webkit-grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
</span><span class="lines">@@ -79,29 +84,26 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithRepeat">
</span><del>- <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
</del><ins>+ <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-y="0" data-expected-width="355" data-expected-height="50"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithRepeat">
</span><del>- <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
</del><ins>+ <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="355"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>-<!-- FIXME: this needs span working for autoplacement as the syntax is no longer invalid -->
-<!--
</del><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithoutRepeat">
</span><del>- <div class="sizedToGridArea gridItemInvalidPositiveGridLine" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
</del><ins>+ <div class="sizedToGridArea gridItemInvalidPositiveGridLine" data-offset-x="355" data-offset-y="150" data-expected-width="10" data-expected-height="205"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>--->
</del><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithoutRepeat">
</span><del>- <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
</del><ins>+ <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset-x="0" data-offset-y="0" data-expected-width="5" data-expected-height="10"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -120,31 +122,29 @@
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithoutRepeat">
</span><del>- <!-- There is only one 'b' so we should pick this one. Also span 2 'b' should resolve to the same 'b'.
- Thus being actually 'b' / span 1. -->
- <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</del><ins>+ <!-- Consider all the implicit lines to be called 'b' too. -->
+ <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="355" data-offset-y="0" data-expected-width="10" data-expected-height="50"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithoutRepeat">
</span><del>- <!-- There is only one 'g' so we should pick this one. Also both initial and final position are equal so
- this is resolved as span 1 / 'g'. -->
- <div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</del><ins>+ <!-- Consider all the implicit lines to be called 'g' too. -->
+ <div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="160"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithRepeat">
</span><del>- <!-- There is no 'a' or 'c' so it should default to auto / auto. -->
- <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
</del><ins>+ <!-- There is no 'a' or 'c' so all the implicit lines are considered to have those names. -->
+ <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="355" data-offset-y="0" data-expected-width="5" data-expected-height="50"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridWithRepeat">
</span><del>- <!-- There is no 'f' or 'h' so it should default to auto / auto. -->
- <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
</del><ins>+ <!-- There is no 'f' or 'h' so all the implicit lines are considered to have those names. -->
+ <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="360"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</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 (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -146,8 +146,8 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" data-expected-width="150" data-expected-height="550">
- <div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div>
</del><ins>+<div class="grid" data-expected-width="150" data-expected-height="950">
+ <div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="600"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -188,14 +188,14 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><del>-<div class="grid" data-expected-width="150" data-expected-height="150">
- <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
</del><ins>+<div class="grid" data-expected-width="1950" data-expected-height="150">
+ <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="1950" data-expected-height="50"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid" data-expected-width="550" data-expected-height="150">
</span><del>- <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="450" data-expected-height="50"></div>
</del><ins>+ <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditempositionchangeddynamichtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -5,6 +5,8 @@
</span><span class="cx"> .grid {
</span><span class="cx"> -webkit-grid-template-columns: [col] 50px [col] 100px [col] 200px [col];
</span><span class="cx"> -webkit-grid-template-rows: [row] 70px [row] 140px [row] 280px [row];
</span><ins>+ -webkit-grid-auto-columns: 5px;
+ -webkit-grid-auto-rows: 10px;
</ins><span class="cx"> }
</span><span class="cx"> .differentNamedGridLines {
</span><span class="cx"> -webkit-grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4];
</span><span class="lines">@@ -67,23 +69,23 @@
</span><span class="cx">
</span><span class="cx"> // 4. Named grid lines, changing the name of the grid lines.
</span><span class="cx"> testPosition({ 'column': '1 / 3 col', 'row': '1 / 2 row' }, { 'width': '150', 'height': '70' });
</span><del>- testPosition({ 'column': '1 / 3 invalid', 'row': '1 / 2 row' }, { 'width': '50', 'height': '70' });
</del><ins>+ testPosition({ 'column': '1 / 3 invalid', 'row': '1 / 2 row' }, { 'width': '365', 'height': '70' });
</ins><span class="cx">
</span><del>- testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 invalid' }, { 'width': '350', 'height': '70' });
</del><ins>+ testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 invalid' }, { 'width': '350', 'height': '530' });
</ins><span class="cx"> testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 row' }, { 'width': '350', 'height': '490' });
</span><span class="cx">
</span><del>- testPosition({ 'column': '2 invalid / 4', 'row': '1 row / 4' }, { 'width': '350', 'height': '490' });
</del><ins>+ testPosition({ 'column': '2 invalid / 4', 'row': '1 row / 4' }, { 'width': '10', 'height': '490' });
</ins><span class="cx"> testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300', 'height': '490' });
</span><span class="cx">
</span><span class="cx"> testPosition({ 'column': '2 col / 4', 'row': '2 row / 4' }, { 'width': '300', 'height': '420' });
</span><del>- testPosition({ 'column': '2 col / 4', 'row': '2 invalid / 4' }, { 'width': '300', 'height': '490' });
</del><ins>+ testPosition({ 'column': '2 col / 4', 'row': '2 invalid / 4' }, { 'width': '300', 'height': '20' });
</ins><span class="cx">
</span><span class="cx"> // 5. Span named grid lines, changing the grid line number.
</span><span class="cx"> testPosition({ 'column': '1 / span 3 col', 'row': '1 / span 2 row' }, { 'width': '350', 'height': '210' });
</span><span class="cx"> testPosition({ 'column': '1 / span 2 col', 'row': '1 / span 2 row' }, { 'width': '150', 'height': '210' });
</span><span class="cx">
</span><del>- testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 2 row' }, { 'width': '300', 'height': '210' });
- testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 1 row' }, { 'width': '300', 'height': '70' });
</del><ins>+ testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 2 row' }, { 'width': '305', 'height': '210' });
+ testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 1 row' }, { 'width': '305', 'height': '70' });
</ins><span class="cx">
</span><span class="cx"> testPosition({ 'column': 'span 2 col / 3', 'row': 'span 2 row / 4' }, { 'width': '150', 'height': '420' });
</span><span class="cx"> testPosition({ 'column': 'span 1 col / 3', 'row': 'span 2 row / 4' }, { 'width': '100', 'height': '420' });
</span><span class="lines">@@ -106,8 +108,8 @@
</span><span class="cx"> testPosition({ 'column': '1 / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
</span><span class="cx">
</span><span class="cx"> // 2. Span <-> named grid lines.
</span><del>- testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150', 'height': '490' });
- testPosition({ 'column': '1 / span 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '490' });
</del><ins>+ testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150', 'height': '500' });
+ testPosition({ 'column': '1 / span 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '500' });
</ins><span class="cx">
</span><span class="cx"> testPosition({ 'column': '1 / col 3', 'row': '1 / span 3' }, { 'width': '150', 'height': '490' });
</span><span class="cx"> testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' });
</span><span class="lines">@@ -115,12 +117,12 @@
</span><span class="cx"> testPosition({ 'column': 'span 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' });
</span><span class="cx"> testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
</span><span class="cx">
</span><del>- testPosition({ 'column': 'span 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100', 'height': '490' });
</del><ins>+ testPosition({ 'column': 'span 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100', 'height': '10' });
</ins><span class="cx"> testPosition({ 'column': 'span 1 / 3', 'row': 'span 1 / 4' }, { 'width': '100', 'height': '280' });
</span><span class="cx">
</span><span class="cx"> // 3. Named grid lines to span named grid line.
</span><del>- testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150', 'height': '490' });
- testPosition({ 'column': '1 / span col 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '490' });
</del><ins>+ testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150', 'height': '500' });
+ testPosition({ 'column': '1 / span col 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '500' });
</ins><span class="cx">
</span><span class="cx"> testPosition({ 'column': '1 / col 3', 'row': '1 / span row 3' }, { 'width': '150', 'height': '490' });
</span><span class="cx"> testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' });
</span><span class="lines">@@ -128,19 +130,19 @@
</span><span class="cx"> testPosition({ 'column': 'span col 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' });
</span><span class="cx"> testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
</span><span class="cx">
</span><del>- testPosition({ 'column': 'span col 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100', 'height': '490' });
- testPosition({ 'column': 'span col 1 / 3', 'row': 'span col 1 / 4' }, { 'width': '100', 'height': '280' });
</del><ins>+ testPosition({ 'column': 'span col 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100', 'height': '10' });
+ testPosition({ 'column': 'span col 1 / 3', 'row': 'span col 1 / 4' }, { 'width': '100', 'height': '500' });
</ins><span class="cx">
</span><span class="cx"> // 4. Explicit <-> named grid lines.
</span><span class="cx"> // We need to modify the grid's definitions so that we have explicit and named grid lines not match anymore.
</span><span class="cx"> var gridElement = document.getElementsByClassName("grid")[0];
</span><span class="cx"> gridElement.classList.add("differentNamedGridLines");
</span><span class="cx">
</span><del>- testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '350', 'height': '490' });
</del><ins>+ testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '360', 'height': '490' });
</ins><span class="cx"> testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'height': '490' });
</span><span class="cx">
</span><del>- testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '350', 'height': '490' });
- testPosition({ 'column': '1 / col4 3', 'row': '1 / row3 4' }, { 'width': '350', 'height': '210' });
</del><ins>+ testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '360', 'height': '490' });
+ testPosition({ 'column': '1 / col4 3', 'row': '1 / row3 4' }, { 'width': '360', 'height': '520' });
</ins><span class="cx">
</span><span class="cx"> testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '300', 'height': '420' });
</span><span class="cx"> testPosition({ 'column': '1 / 4', 'row': '1 row2 / 4' }, { 'width': '350', 'height': '420' });
</span><span class="lines">@@ -149,29 +151,29 @@
</span><span class="cx"> testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '300', 'height': '420' });
</span><span class="cx">
</span><span class="cx"> // 5. Span <-> span named grid lines.
</span><del>- testPosition({ 'column': '1 / span col4 2', 'row': '3 / span 1' }, { 'width': '350', 'height': '280' });
</del><ins>+ testPosition({ 'column': '1 / span col4 2', 'row': '3 / span 1' }, { 'width': '355', 'height': '280' });
</ins><span class="cx"> testPosition({ 'column': '1 / span 2', 'row': '3 / span 1' }, { 'width': '150', 'height': '280' });
</span><span class="cx">
</span><del>- testPosition({ 'column': '1 / span col4 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '490' });
- testPosition({ 'column': '1 / span col4 3', 'row': '1 / span row3 4' }, { 'width': '350', 'height': '210' });
</del><ins>+ testPosition({ 'column': '1 / span col4 3', 'row': '1 / span 4' }, { 'width': '360', 'height': '500' });
+ testPosition({ 'column': '1 / span col4 3', 'row': '1 / span row3 4' }, { 'width': '360', 'height': '520' });
</ins><span class="cx">
</span><span class="cx"> testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '300', 'height': '280' });
</span><del>- testPosition({ 'column': 'span col1 2 / 4', 'row': 'span 1 / 4' }, { 'width': '350', 'height': '280' });
</del><ins>+ testPosition({ 'column': 'span col1 2 / 4', 'row': 'span 1 / 4' }, { 'width': '355', 'height': '280' });
</ins><span class="cx">
</span><span class="cx"> testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '300', 'height': '280' });
</span><span class="cx"> testPosition({ 'column': 'span 2 / 4', 'row': 'span row2 1 / 4' }, { 'width': '300', 'height': '420' });
</span><span class="cx">
</span><span class="cx"> // 6. Explicit to span named grid line.
</span><span class="cx"> testPosition({ 'column': '1 / 2', 'row': '2 / span row3 1' }, { 'width': '50', 'height': '140' });
</span><del>- testPosition({ 'column': '1 / span col3 2', 'row': '2 / span row3 1' }, { 'width': '150', 'height': '140' });
</del><ins>+ testPosition({ 'column': '1 / span col3 2', 'row': '2 / span row3 1' }, { 'width': '355', 'height': '140' });
</ins><span class="cx">
</span><del>- testPosition({ 'column': '1 / 2', 'row': '2 / span row3 4' }, { 'width': '50', 'height': '140' });
</del><ins>+ testPosition({ 'column': '1 / 2', 'row': '2 / span row3 4' }, { 'width': '50', 'height': '450' });
</ins><span class="cx"> testPosition({ 'column': '1 / 2', 'row': '2 / 4' }, { 'width': '50', 'height': '420' });
</span><span class="cx">
</span><del>- testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '300', 'height': '490' });
- testPosition({ 'column': '1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '350', 'height': '490' });
</del><ins>+ testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '300', 'height': '510' });
+ testPosition({ 'column': '1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '350', 'height': '510' });
</ins><span class="cx">
</span><del>- testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '300', 'height': '490' });
</del><ins>+ testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '300', 'height': '510' });
</ins><span class="cx"> testPosition({ 'column': 'span col2 1 / 4', 'row': '3 / 4' }, { 'width': '300', 'height': '280' });
</span><span class="cx"> }
</span><span class="cx"> window.addEventListener("load", updateGridItemPosition, false);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemunknownnamedgridlineresolutionexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution-expected.txt (0 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution-expected.txt 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+This test checks that we resolve unknown named grid lines considering that all the implicit lines have the unknown names.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemunknownnamedgridlineresolutionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html (0 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -0,0 +1,444 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-columns: [vertical] 50px [middle vertical] 100px [vertical];
+ -webkit-grid-auto-columns: 10px;
+ -webkit-grid-template-rows: [horizontal] 30px [middle horizontal] 60px [horizontal];
+ -webkit-grid-auto-rows: 5px;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that we resolve unknown named grid lines considering that all the implicit lines have the unknown names.</p>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: foo; -webkit-grid-row: bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: a; -webkit-grid-row: b;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: line; -webkit-grid-row: line;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: foo; -webkit-grid-row: bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 1 / foo; -webkit-grid-row: 1 / bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="-webkit-grid-column: foo / 1; -webkit-grid-row: bar / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="-webkit-grid-column: foo / foo; -webkit-grid-row: bar / bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: foo / bar; -webkit-grid-row: bar / foo;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: 1 foo; -webkit-grid-row: 1 bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 2 foo; -webkit-grid-row: 2 bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 3 foo; -webkit-grid-row: 3 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 4 foo; -webkit-grid-row: 4 bar;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 5 foo; -webkit-grid-row: 5 bar;"
+ data-offset-x="200" data-offset-y="115" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 2 foo / 4 foo; -webkit-grid-row: 2 bar / 4 bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: 2 foo / 4 bar; -webkit-grid-row: 2 bar / 4 foo;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: 5 foo / 3 foo; -webkit-grid-row: 5 bar / 3 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: 5 foo / 3 bar; -webkit-grid-row: 5 bar / 3 foo;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: -1 foo; -webkit-grid-row: -1 bar;"
+ data-offset-x="40" data-offset-y="20" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -2 foo; -webkit-grid-row: -2 bar;"
+ data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -3 foo; -webkit-grid-row: -3 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -4 foo; -webkit-grid-row: -4 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -5 foo; -webkit-grid-row: -5 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -4 foo / -2 foo; -webkit-grid-row: -4 bar / -2 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: -4 foo / -2 bar; -webkit-grid-row: -4 bar / -2 foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: -3 foo / -5 foo; -webkit-grid-row: -3 bar / -5 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: -3 foo / -5 bar; -webkit-grid-row: -3 bar / -5 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: 1 / span foo; -webkit-grid-row: 1 / span bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="-webkit-grid-column: span foo / 1; -webkit-grid-row: span bar / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: foo / span foo; -webkit-grid-row: bar / span bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: foo / span bar; -webkit-grid-row: bar / span foo;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: span foo / foo; -webkit-grid-row: span bar / bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="-webkit-grid-column: span foo / bar; -webkit-grid-row: span bar / foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: -1 / span foo; -webkit-grid-row: -1 / span bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: span foo / -1; -webkit-grid-row: span bar / -1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="-webkit-grid-column: -1 foo / span foo; -webkit-grid-row: -1 bar / span bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="-webkit-grid-column: -1 foo / span bar; -webkit-grid-row: -1 bar / span foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="-webkit-grid-column: span foo / -1 foo; -webkit-grid-row: span bar / -1 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: span foo / -1 bar; -webkit-grid-row: span bar / -1 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: 1 / span 2 foo; -webkit-grid-row: 1 / span 2 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / 1; -webkit-grid-row: span 2 bar / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: foo / span 2 foo; -webkit-grid-row: bar / span 2 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: foo / span 2 bar; -webkit-grid-row: bar / span 2 foo;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / foo; -webkit-grid-row: span 2 bar / bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / bar; -webkit-grid-row: span 2 bar / foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: -1 / span 2 foo; -webkit-grid-row: -1 / span 2 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / -1; -webkit-grid-row: span 2 bar / -1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="-webkit-grid-column: -1 foo / span 2 foo; -webkit-grid-row: -1 bar / span 2 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="-webkit-grid-column: -1 foo / span 2 bar; -webkit-grid-row: -1 bar / span 2 foo;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / -1 foo; -webkit-grid-row: span 2 bar / -1 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / -1 bar; -webkit-grid-row: span 2 bar / -1 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: 2 foo / span foo; -webkit-grid-row: 2 bar / span bar;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 2 foo / span bar; -webkit-grid-row: 2 bar / span foo;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 2 foo / span 2 foo; -webkit-grid-row: 2 bar / span 2 bar;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: 2 foo / span 2 bar; -webkit-grid-row: 2 bar / span 2 foo;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: span foo / 2 foo; -webkit-grid-row: span bar / 2 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="-webkit-grid-column: span foo / 2 bar; -webkit-grid-row: span bar / 2 foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / 2 foo; -webkit-grid-row: span 2 bar / 2 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / 2 bar; -webkit-grid-row: span 2 bar / 2 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: -2 foo / span foo; -webkit-grid-row: -2 bar / span bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="-webkit-grid-column: -2 foo / span bar; -webkit-grid-row: -2 bar / span foo;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="-webkit-grid-column: -2 foo / span 2 foo; -webkit-grid-row: -2 bar / span 2 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="-webkit-grid-column: -2 foo / span 2 bar; -webkit-grid-row: -2 bar / span 2 foo;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="-webkit-grid-column: span foo / -2 foo; -webkit-grid-row: span bar / -2 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: span foo / -2 bar; -webkit-grid-row: span bar / -2 foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / -2 foo; -webkit-grid-row: span 2 bar / -2 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: span 2 foo / -2 bar; -webkit-grid-row: span 2 bar / -2 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: 1 middle; -webkit-grid-row: 1 middle;"
+ data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="-webkit-grid-column: 2 middle; -webkit-grid-row: 2 middle;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 3 middle; -webkit-grid-row: 3 middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 4 middle; -webkit-grid-row: 4 middle;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 5 middle; -webkit-grid-row: 5 middle;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 2 middle / 4 middle; -webkit-grid-row: 2 middle / 4 middle;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: 5 middle / 3 middle; -webkit-grid-row: 5 middle / 3 middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: -1 middle; -webkit-grid-row: -1 middle;"
+ data-offset-x="90" data-offset-y="50" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="-webkit-grid-column: -2 middle; -webkit-grid-row: -2 middle;"
+ data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -3 middle; -webkit-grid-row: -3 middle;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -4 middle; -webkit-grid-row: -4 middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -5 middle; -webkit-grid-row: -5 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -2 middle / -4 middle; -webkit-grid-row: -2 middle / -4 middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: -5 middle / -3 middle; -webkit-grid-row: -5 middle / -3 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: 1 vertical; -webkit-grid-row: 1 horizontal;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">
+ </div>
+ <div style="-webkit-grid-column: 2 vertical; -webkit-grid-row: 2 horizontal;"
+ data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="-webkit-grid-column: 3 vertical; -webkit-grid-row: 3 horizontal;"
+ data-offset-x="150" data-offset-y="90" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 4 vertical; -webkit-grid-row: 4 horizontal;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 5 vertical; -webkit-grid-row: 5 horizontal;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 2 vertical / 4 vertical; -webkit-grid-row: 2 horizontal / 4 horizontal;"
+ data-offset-x="50" data-offset-y="30" data-expected-width="110" data-expected-height="65">
+ </div>
+ <div style="-webkit-grid-column: 5 vertical / 3 vertical; -webkit-grid-row: 5 horizontal / 3 horizontal;"
+ data-offset-x="150" data-offset-y="90" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: -1 vertical; -webkit-grid-row: -1 horizontal;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -2 vertical; -webkit-grid-row: -2 horizontal;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="-webkit-grid-column: -3 vertical; -webkit-grid-row: -3 horizontal;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
+ </div>
+ <div style="-webkit-grid-column: -4 vertical; -webkit-grid-row: -4 horizontal;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -5 vertical; -webkit-grid-row: -5 horizontal;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: -2 vertical / -4 vertical; -webkit-grid-row: -2 horizontal / -4 horizontal;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
+ </div>
+ <div style="-webkit-grid-column: -5 vertical / -3 vertical; -webkit-grid-row: -5 horizontal / -3 horizontal;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: 1 / span middle; -webkit-grid-row: 1 / span middle;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
+ </div>
+ <div style="-webkit-grid-column: span middle / 1; -webkit-grid-row: span middle / 1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: 1 / span 2 middle; -webkit-grid-row: 1 / span 2 middle;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="-webkit-grid-column: span 2 middle / 1; -webkit-grid-row: span 2 middle / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: middle / span middle; -webkit-grid-row: middle / span middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
+ </div>
+ <div style="-webkit-grid-column: span middle / middle; -webkit-grid-row: span middle / middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
+ </div>
+ <div style="-webkit-grid-column: middle / span 2 middle; -webkit-grid-row: middle / span 2 middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
+ </div>
+ <div style="-webkit-grid-column: span 2 middle / middle; -webkit-grid-row: span 2 middle / middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: -1 / span middle; -webkit-grid-row: -1 / span middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="-webkit-grid-column: span middle / -1; -webkit-grid-row: span middle / -1;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="-webkit-grid-column: -1 / span 2 middle; -webkit-grid-row: -1 / span 2 middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="-webkit-grid-column: span 2 middle / -1; -webkit-grid-row: span 2 middle / -1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="-webkit-grid-column: -1 middle / span middle; -webkit-grid-row: -1 middle / span middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
+ </div>
+ <div style="-webkit-grid-column: span middle / -1 middle; -webkit-grid-row: span middle / -1 middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
+ </div>
+ <div style="-webkit-grid-column: -1 middle / span 2 middle; -webkit-grid-row: -1 middle / span 2 middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
+ </div>
+ <div style="-webkit-grid-column: span 2 middle / -1 middle; -webkit-grid-row: span 2 middle / -1 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="-webkit-grid-column: span middle / 6; -webkit-grid-row: span middle / 6;"
+ data-offset-x="80" data-offset-y="45" data-expected-width="130" data-expected-height="75">
+ </div>
+ <div style="-webkit-grid-column: span 2 middle / 6; -webkit-grid-row: span 2 middle / 6;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="-webkit-grid-column: -6 / span middle; -webkit-grid-row: -6 / span middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="45">
+ </div>
+ <div style="-webkit-grid-column: -6 / span 2 middle; -webkit-grid-row: -6 / span 2 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
+ </div>
+ </div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlineswithnamedgridareasresolutionhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -90,10 +90,10 @@
</span><span class="cx"> <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridUniqueNames justifyContentStart">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: b-end; -webkit-grid-row: h-start" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</del><ins>+ <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
+ <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
+ <div class="sizedToGridArea" style="-webkit-grid-column: b-end; -webkit-grid-row: h-start" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -206,9 +206,9 @@
</span><span class="cx"> <!-- Check behavior with areas named *-start or *-end -->
</span><span class="cx"> <div style="position: relative">
</span><span class="cx"> <div class="grid gridAreasSpecial gridNoLineNames justifyContentStart">
</span><del>- <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
- <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</del><ins>+ <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
+ <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
+ <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/Source/WebCore/ChangeLog 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+2016-03-10 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Fix placement for unknown named grid lines
+ https://bugs.webkit.org/show_bug.cgi?id=155230
+
+ Reviewed by Sergio Villar Senin.
+
+ The spec has changed and now all the implicit lines should be considered
+ when we're resolving named grid lines with an unknown name.
+
+ The relevant part of the spec is
+ (http://dev.w3.org/csswg/css-grid/#line-placement):
+ "If a name is given as a <custom-ident>, only lines with that name
+ are counted. If not enough lines with that name exist,
+ all implicit grid lines are assumed to have that name
+ for the purpose of finding this position."
+
+ Modified the code to resolve named grid lines in GridResolvedPosition.
+ We need to keep the old behavior of considering "auto" unknown named
+ grid lines for the case of positioned grid items.
+
+ Test: fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html
+
+ * rendering/style/GridResolvedPosition.cpp:
+ (WebCore::adjustGridPositionsFromStyle):
+ (WebCore::lookAheadForNamedGridLine):
+ (WebCore::lookBackForNamedGridLine):
+ (WebCore::resolveNamedGridLinePositionFromStyle):
+ (WebCore::definiteGridSpanWithNamedLineSpanAgainstOpposite):
+ (WebCore::resolveNamedGridLinePositionAgainstOppositePosition):
+ (WebCore::resolveGridPositionAgainstOppositePosition):
+ (WebCore::resolveGridPositionFromStyle):
+
</ins><span class="cx"> 2016-03-10 Eric Carlson <eric.carlson@apple.com>
</span><span class="cx">
</span><span class="cx"> [MediaStream] push media stream state to the UI process
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleGridResolvedPositioncpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp (197929 => 197930)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp 2016-03-10 12:15:34 UTC (rev 197930)
</span><span class="lines">@@ -86,14 +86,14 @@
</span><span class="cx"> if (initialPosition.isSpan() && finalPosition.isSpan())
</span><span class="cx"> finalPosition.setAutoPosition();
</span><span class="cx">
</span><del>- // Try to early detect the case of non existing named grid lines. This way we could assume later that
- // GridResolvedPosition::resolveGrisPositionFromStyle() won't require the autoplacement to run, i.e., it'll always return a
- // valid resolved position.
- if (initialPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(initialPosition.namedGridLine(), gridContainerStyle, initialPositionSide(direction)))
- initialPosition.setAutoPosition();
</del><ins>+ if (gridItem.isOutOfFlowPositioned()) {
+ // Early detect the case of non existing named grid lines for positioned items.
+ if (initialPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(initialPosition.namedGridLine(), gridContainerStyle, initialPositionSide(direction)))
+ initialPosition.setAutoPosition();
</ins><span class="cx">
</span><del>- if (finalPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, finalPositionSide(direction)))
- finalPosition.setAutoPosition();
</del><ins>+ if (finalPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, finalPositionSide(direction)))
+ finalPosition.setAutoPosition();
+ }
</ins><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="cx"> if (initialPosition.isAuto() && finalPosition.isSpan() && !finalPosition.namedGridLine().isNull())
</span><span class="lines">@@ -117,85 +117,89 @@
</span><span class="cx"> return isColumnSide(side) ? GridResolvedPosition::explicitGridColumnCount(gridContainerStyle) : GridResolvedPosition::explicitGridRowCount(gridContainerStyle);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static unsigned resolveNamedGridLinePositionFromStyle(const RenderStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
</del><ins>+static unsigned lookAheadForNamedGridLine(int start, unsigned numberOfLines, const Vector<unsigned>* namedGridLinesIndexes, unsigned gridLastLine)
</ins><span class="cx"> {
</span><del>- ASSERT(!position.namedGridLine().isNull());
</del><ins>+ ASSERT(numberOfLines);
</ins><span class="cx">
</span><del>- const NamedGridLinesMap& gridLinesNames = isColumnSide(side) ? gridContainerStyle.namedGridColumnLines() : gridContainerStyle.namedGridRowLines();
- NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
- if (it == gridLinesNames.end()) {
- if (position.isPositive())
- return 0;
- const unsigned lastLine = explicitGridSizeForSide(gridContainerStyle, side);
- return lastLine;
</del><ins>+ // Only implicit lines on the search direction are assumed to have the given name, so we can start to look from first line.
+ // See: https://drafts.csswg.org/css-grid/#grid-placement-span-int
+ unsigned end = std::max(start, 0);
+
+ if (!namedGridLinesIndexes)
+ return std::max(end, gridLastLine + 1) + numberOfLines - 1;
+
+ for (; numberOfLines; ++end) {
+ if (end > gridLastLine || namedGridLinesIndexes->contains(end))
+ numberOfLines--;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- unsigned namedGridLineIndex;
- if (position.isPositive())
- namedGridLineIndex = std::min<unsigned>(position.integerPosition(), it->value.size()) - 1;
- else
- namedGridLineIndex = std::max<int>(0, it->value.size() - abs(position.integerPosition()));
- return it->value[namedGridLineIndex];
</del><ins>+ ASSERT(end);
+ return end - 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static GridSpan resolveRowStartColumnStartNamedGridLinePositionAgainstOppositePosition(unsigned resolvedOppositePosition, const GridPosition& position, const Vector<unsigned>& gridLines)
</del><ins>+static int lookBackForNamedGridLine(int end, unsigned numberOfLines, const Vector<unsigned>* namedGridLinesIndexes, int gridLastLine)
</ins><span class="cx"> {
</span><del>- if (!resolvedOppositePosition)
- return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
</del><ins>+ ASSERT(numberOfLines);
</ins><span class="cx">
</span><del>- unsigned firstLineBeforePositionIndex = 0;
- auto firstLineBeforePosition = std::lower_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition);
- if (firstLineBeforePosition != gridLines.end())
- firstLineBeforePositionIndex = firstLineBeforePosition - gridLines.begin();
</del><ins>+ // Only implicit lines on the search direction are assumed to have the given name, so we can start to look from last line.
+ // See: https://drafts.csswg.org/css-grid/#grid-placement-span-int
+ int start = std::min(end, gridLastLine);
</ins><span class="cx">
</span><del>- unsigned gridLineIndex = std::max<int>(0, firstLineBeforePositionIndex - position.spanPosition());
</del><ins>+ if (!namedGridLinesIndexes)
+ return std::min(start, -1) - numberOfLines + 1;
</ins><span class="cx">
</span><del>- unsigned resolvedGridLinePosition = gridLines[gridLineIndex];
- if (resolvedGridLinePosition >= resolvedOppositePosition)
- resolvedGridLinePosition = resolvedOppositePosition - 1;
- return GridSpan::untranslatedDefiniteGridSpan(std::min(resolvedGridLinePosition, resolvedOppositePosition), resolvedOppositePosition);
</del><ins>+ for (; numberOfLines; --start) {
+ if (start < 0 || namedGridLinesIndexes->contains(static_cast<size_t>(start)))
+ numberOfLines--;
+ }
+
+ return start + 1;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static GridSpan resolveRowEndColumnEndNamedGridLinePositionAgainstOppositePosition(unsigned resolvedOppositePosition, const GridPosition& position, const Vector<unsigned>& gridLines)
</del><ins>+static int resolveNamedGridLinePositionFromStyle(const RenderStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
</ins><span class="cx"> {
</span><del>- ASSERT(gridLines.size());
- unsigned firstLineAfterOppositePositionIndex = gridLines.size() - 1;
- const unsigned* firstLineAfterOppositePosition = std::upper_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition);
- if (firstLineAfterOppositePosition != gridLines.end())
- firstLineAfterOppositePositionIndex = firstLineAfterOppositePosition - gridLines.begin();
</del><ins>+ ASSERT(!position.namedGridLine().isNull());
</ins><span class="cx">
</span><del>- unsigned gridLineIndex = std::min<unsigned>(gridLines.size() - 1, firstLineAfterOppositePositionIndex + position.spanPosition() - 1);
- unsigned resolvedGridLinePosition = gridLines[gridLineIndex];
- if (resolvedGridLinePosition <= resolvedOppositePosition)
- resolvedGridLinePosition = resolvedOppositePosition + 1;
- return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedGridLinePosition);
</del><ins>+ const NamedGridLinesMap& gridLinesNames = isColumnSide(side) ? gridContainerStyle.namedGridColumnLines() : gridContainerStyle.namedGridRowLines();
+ auto iterator = gridLinesNames.find(position.namedGridLine());
+ const Vector<unsigned>* gridLines = iterator == gridLinesNames.end() ? nullptr : &iterator->value;
+ unsigned lastLine = explicitGridSizeForSide(gridContainerStyle, side);
+ if (position.isPositive())
+ return lookAheadForNamedGridLine(0, std::abs(position.integerPosition()), gridLines, lastLine);
+ return lookBackForNamedGridLine(lastLine, std::abs(position.integerPosition()), gridLines, lastLine);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const RenderStyle& gridContainerStyle, unsigned resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
</del><ins>+static GridSpan definiteGridSpanWithNamedLineSpanAgainstOpposite(int resolvedOppositePosition, const GridPosition& position, GridPositionSide side, const Vector<unsigned>* gridLines, unsigned lastLine)
</ins><span class="cx"> {
</span><ins>+ int start, end;
+
+ if (side == RowStartSide || side == ColumnStartSide) {
+ start = lookBackForNamedGridLine(resolvedOppositePosition - 1, position.spanPosition(), gridLines, lastLine);
+ end = resolvedOppositePosition;
+ } else {
+ start = resolvedOppositePosition;
+ end = lookAheadForNamedGridLine(resolvedOppositePosition + 1, position.spanPosition(), gridLines, lastLine);
+ }
+
+ return GridSpan::untranslatedDefiniteGridSpan(start, end);
+}
+
+static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const RenderStyle& gridContainerStyle, int resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
+{
</ins><span class="cx"> ASSERT(position.isSpan());
</span><span class="cx"> ASSERT(!position.namedGridLine().isNull());
</span><span class="cx"> // Negative positions are not allowed per the specification and should have been handled during parsing.
</span><span class="cx"> ASSERT(position.spanPosition() > 0);
</span><span class="cx">
</span><span class="cx"> const NamedGridLinesMap& gridLinesNames = isColumnSide(side) ? gridContainerStyle.namedGridColumnLines() : gridContainerStyle.namedGridRowLines();
</span><del>- NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
</del><ins>+ auto iterator = gridLinesNames.find(position.namedGridLine());
+ const Vector<unsigned>* gridLines = iterator == gridLinesNames.end() ? nullptr : &iterator->value;
+ unsigned lastLine = explicitGridSizeForSide(gridContainerStyle, side);
</ins><span class="cx">
</span><del>- // 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).
- // See http://lists.w3.org/Archives/Public/www-style/2013Jun/0394.html.
- if (it == gridLinesNames.end()) {
- if (isStartSide(side))
- return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition - 1, resolvedOppositePosition);
- return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
- }
-
- if (side == RowStartSide || side == ColumnStartSide)
- return resolveRowStartColumnStartNamedGridLinePositionAgainstOppositePosition(resolvedOppositePosition, position, it->value);
-
- return resolveRowEndColumnEndNamedGridLinePositionAgainstOppositePosition(resolvedOppositePosition, position, it->value);
</del><ins>+ return definiteGridSpanWithNamedLineSpanAgainstOpposite(resolvedOppositePosition, position, side, gridLines, lastLine);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-static GridSpan resolveGridPositionAgainstOppositePosition(const RenderStyle& gridContainerStyle, unsigned resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
</del><ins>+static GridSpan resolveGridPositionAgainstOppositePosition(const RenderStyle& gridContainerStyle, int resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
</ins><span class="cx"> {
</span><span class="cx"> if (position.isAuto()) {
</span><span class="cx"> if (isStartSide(side))
</span><span class="lines">@@ -262,7 +266,7 @@
</span><span class="cx"> // ''<custom-ident>-start (for grid-*-start) / <custom-ident>-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(!GridResolvedPosition::isNonExistentNamedLineOrArea(namedGridLine, gridContainerStyle, side));
</del><ins>+ ASSERT(!position.namedGridLine().isNull());
</ins><span class="cx">
</span><span class="cx"> const NamedGridLinesMap& gridLineNames = gridLinesForSide(gridContainerStyle, side);
</span><span class="cx"> auto implicitLine = gridLineNames.find(implicitNamedGridLineForSide(namedGridLine, side));
</span><span class="lines">@@ -275,11 +279,10 @@
</span><span class="cx"> if (explicitLine != gridLineNames.end())
</span><span class="cx"> return explicitLine->value[0];
</span><span class="cx">
</span><del>- // If none of the above works specs mandate us to treat it as auto BUT we should have detected it before calling
- // this function in resolveGridPositionsFromStyle(). We should be covered anyway by the ASSERT at the beginning
- // of this case block.
- ASSERT_NOT_REACHED();
- return 0;
</del><ins>+ ASSERT(GridResolvedPosition::isNonExistentNamedLineOrArea(namedGridLine, gridContainerStyle, side));
+ // If none of the above works specs mandate to assume that all the lines in the implicit grid have this name.
+ unsigned lastLine = explicitGridSizeForSide(gridContainerStyle, side);
+ return lastLine + 1;
</ins><span class="cx"> }
</span><span class="cx"> case AutoPosition:
</span><span class="cx"> case SpanPosition:
</span></span></pre>
</div>
</div>
</body>
</html>