Diff
Modified: trunk/LayoutTests/ChangeLog (197929 => 197930)
--- trunk/LayoutTests/ChangeLog 2016-03-10 12:05:59 UTC (rev 197929)
+++ trunk/LayoutTests/ChangeLog 2016-03-10 12:15:34 UTC (rev 197930)
@@ -1,3 +1,25 @@
+2016-03-10 Manuel Rego Casasnovas <[email protected]>
+
+ [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:
+
2016-03-09 Joseph Pecoraro <[email protected]>
Web Inspector: Get a RemoteObject or ObjectPreview from HeapSnapshot Object Identifier
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html (197929 => 197930)
--- 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)
@@ -55,8 +55,8 @@
function testChangingGridDefinitions()
{
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' });
- 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' });
+ 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' });
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' });
}
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt (197929 => 197930)
--- 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)
@@ -1,4 +1,4 @@
-This test checks that unknown named area are treated as 'auto' by applying the auto-placement algorithm when mandated.
+This test checks that unknown named area are resolved properly considering all the implicit grid lines to have the given names.
PASS
PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html (197929 => 197930)
--- 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)
@@ -5,60 +5,66 @@
<style>
.grid {
-webkit-grid-template-rows: 10px 20px;
+ -webkit-grid-auto-rows: 5px;
-webkit-grid-template-columns: 30px 40px;
+ -webkit-grid-auto-columns: 15px;
-webkit-grid-auto-flow: row;
}
.bothNamedGridLineRow {
-webkit-grid-row: nonExistentArea / nonExistentArea;
-webkit-grid-column: 1;
+ background-color: lime;
}
.bothNamedGridLineColumn {
-webkit-grid-row: 1;
-webkit-grid-column: nonExistentArea / span 3;
+ background-color: lime;
}
.namedGridLineSpanRow {
-webkit-grid-row: nonExistentArea / span 5 firstRow;
-webkit-grid-column: 1;
+ background-color: lime;
}
.namedGridLineSpanColumn {
-webkit-grid-row: 1;
-webkit-grid-column: nonExistentArea / span;
+ background-color: lime;
}
</style>
<script src=""
<body _onload_="checkLayout('.grid')">
-<p>This test checks that unknown named area are treated as 'auto' by applying the auto-placement algorithm when mandated.</p>
+<p>This test checks that unknown named area are resolved properly considering all the implicit grid lines to have the given names.</p>
<div style="position: relative">
<div class="grid">
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
- <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
+ <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0" data-offset-y="35" data-expected-width="30" data-expected-height="5"></div>
</div>
</div>
<div style="position: relative">
<div class="grid contentStart">
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
- <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
+ <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="85" data-offset-y="0" data-expected-width="45" data-expected-height="10"></div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
- <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
+ <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0" data-offset-y="35" data-expected-width="30" data-expected-height="25"></div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
- <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
+ <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="85" data-offset-y="0" data-expected-width="15" data-expected-height="10"></div>
</div>
</div>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html (197929 => 197930)
--- 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)
@@ -76,8 +76,8 @@
<div style="position: relative">
<div class="grid gridWithRepeat justifyContentStart">
<!-- fifth and sixth are invalid named grid areas. -->
- <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>
+ <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>
<div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-offset-y="50" data-expected-width="120" data-expected-height="100"></div>
<div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-offset-y="0" data-expected-width="160" data-expected-height="150"></div>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution-expected.txt (197929 => 197930)
--- 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)
@@ -23,3 +23,4 @@
PASS
PASS
PASS
+PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html (197929 => 197930)
--- 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)
@@ -3,6 +3,11 @@
<head>
<link href="" rel="stylesheet">
<style>
+.grid {
+ -webkit-grid-auto-columns: 5px;
+ -webkit-grid-auto-rows: 5px;
+}
+
.gridWithoutRepeat {
-webkit-grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
-webkit-grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
@@ -79,29 +84,26 @@
<div style="position: relative">
<div class="grid gridWithRepeat">
- <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea gridItemBToD" data-offset-x="0" data-offset-y="0" data-expected-width="355" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid gridWithRepeat">
- <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea gridItemGToH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="355"></div>
</div>
</div>
-<!-- FIXME: this needs span working for autoplacement as the syntax is no longer invalid -->
-<!--
<div style="position: relative">
<div class="grid gridWithoutRepeat">
- <div class="sizedToGridArea gridItemInvalidPositiveGridLine" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+ <div class="sizedToGridArea gridItemInvalidPositiveGridLine" data-offset-x="355" data-offset-y="150" data-expected-width="10" data-expected-height="205"></div>
</div>
</div>
</div>
--->
<div style="position: relative">
<div class="grid gridWithoutRepeat">
- <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
+ <div class="sizedToGridArea gridItemInvalidNegativeGridLine" data-offset-x="0" data-offset-y="0" data-expected-width="5" data-expected-height="10"></div>
</div>
</div>
</div>
@@ -120,31 +122,29 @@
<div style="position: relative">
<div class="grid gridWithoutRepeat">
- <!-- 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>
+ <!-- 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>
</div>
</div>
<div style="position: relative">
<div class="grid gridWithoutRepeat">
- <!-- 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>
+ <!-- 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>
</div>
</div>
<div style="position: relative">
<div class="grid gridWithRepeat">
- <!-- 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>
+ <!-- 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>
</div>
</div>
<div style="position: relative">
<div class="grid gridWithRepeat">
- <!-- 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>
+ <!-- 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>
</div>
</div>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html (197929 => 197930)
--- 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)
@@ -146,8 +146,8 @@
</div>
<div style="position: relative">
-<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>
+<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>
</div>
</div>
@@ -188,14 +188,14 @@
</div>
<div style="position: relative">
-<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>
+<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>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
- <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="450" data-expected-height="50"></div>
+ <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html (197929 => 197930)
--- 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)
@@ -5,6 +5,8 @@
.grid {
-webkit-grid-template-columns: [col] 50px [col] 100px [col] 200px [col];
-webkit-grid-template-rows: [row] 70px [row] 140px [row] 280px [row];
+ -webkit-grid-auto-columns: 5px;
+ -webkit-grid-auto-rows: 10px;
}
.differentNamedGridLines {
-webkit-grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4];
@@ -67,23 +69,23 @@
// 4. Named grid lines, changing the name of the grid lines.
testPosition({ 'column': '1 / 3 col', 'row': '1 / 2 row' }, { 'width': '150', 'height': '70' });
- testPosition({ 'column': '1 / 3 invalid', 'row': '1 / 2 row' }, { 'width': '50', 'height': '70' });
+ testPosition({ 'column': '1 / 3 invalid', 'row': '1 / 2 row' }, { 'width': '365', 'height': '70' });
- testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 invalid' }, { 'width': '350', 'height': '70' });
+ testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 invalid' }, { 'width': '350', 'height': '530' });
testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 row' }, { 'width': '350', 'height': '490' });
- testPosition({ 'column': '2 invalid / 4', 'row': '1 row / 4' }, { 'width': '350', 'height': '490' });
+ testPosition({ 'column': '2 invalid / 4', 'row': '1 row / 4' }, { 'width': '10', 'height': '490' });
testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300', 'height': '490' });
testPosition({ 'column': '2 col / 4', 'row': '2 row / 4' }, { 'width': '300', 'height': '420' });
- testPosition({ 'column': '2 col / 4', 'row': '2 invalid / 4' }, { 'width': '300', 'height': '490' });
+ testPosition({ 'column': '2 col / 4', 'row': '2 invalid / 4' }, { 'width': '300', 'height': '20' });
// 5. Span named grid lines, changing the grid line number.
testPosition({ 'column': '1 / span 3 col', 'row': '1 / span 2 row' }, { 'width': '350', 'height': '210' });
testPosition({ 'column': '1 / span 2 col', 'row': '1 / span 2 row' }, { 'width': '150', 'height': '210' });
- 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' });
+ 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' });
testPosition({ 'column': 'span 2 col / 3', 'row': 'span 2 row / 4' }, { 'width': '150', 'height': '420' });
testPosition({ 'column': 'span 1 col / 3', 'row': 'span 2 row / 4' }, { 'width': '100', 'height': '420' });
@@ -106,8 +108,8 @@
testPosition({ 'column': '1 / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
// 2. Span <-> named grid lines.
- 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' });
+ 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' });
testPosition({ 'column': '1 / col 3', 'row': '1 / span 3' }, { 'width': '150', 'height': '490' });
testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' });
@@ -115,12 +117,12 @@
testPosition({ 'column': 'span 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' });
testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
- testPosition({ 'column': 'span 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100', 'height': '490' });
+ testPosition({ 'column': 'span 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100', 'height': '10' });
testPosition({ 'column': 'span 1 / 3', 'row': 'span 1 / 4' }, { 'width': '100', 'height': '280' });
// 3. Named grid lines to span named grid line.
- 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' });
+ 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' });
testPosition({ 'column': '1 / col 3', 'row': '1 / span row 3' }, { 'width': '150', 'height': '490' });
testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' });
@@ -128,19 +130,19 @@
testPosition({ 'column': 'span col 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' });
testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
- 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' });
+ 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' });
// 4. Explicit <-> named grid lines.
// We need to modify the grid's definitions so that we have explicit and named grid lines not match anymore.
var gridElement = document.getElementsByClassName("grid")[0];
gridElement.classList.add("differentNamedGridLines");
- testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '350', 'height': '490' });
+ testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '360', 'height': '490' });
testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'height': '490' });
- 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' });
+ 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' });
testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '300', 'height': '420' });
testPosition({ 'column': '1 / 4', 'row': '1 row2 / 4' }, { 'width': '350', 'height': '420' });
@@ -149,29 +151,29 @@
testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '300', 'height': '420' });
// 5. Span <-> span named grid lines.
- testPosition({ 'column': '1 / span col4 2', 'row': '3 / span 1' }, { 'width': '350', 'height': '280' });
+ testPosition({ 'column': '1 / span col4 2', 'row': '3 / span 1' }, { 'width': '355', 'height': '280' });
testPosition({ 'column': '1 / span 2', 'row': '3 / span 1' }, { 'width': '150', 'height': '280' });
- 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' });
+ 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' });
testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '300', 'height': '280' });
- testPosition({ 'column': 'span col1 2 / 4', 'row': 'span 1 / 4' }, { 'width': '350', 'height': '280' });
+ testPosition({ 'column': 'span col1 2 / 4', 'row': 'span 1 / 4' }, { 'width': '355', 'height': '280' });
testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '300', 'height': '280' });
testPosition({ 'column': 'span 2 / 4', 'row': 'span row2 1 / 4' }, { 'width': '300', 'height': '420' });
// 6. Explicit to span named grid line.
testPosition({ 'column': '1 / 2', 'row': '2 / span row3 1' }, { 'width': '50', 'height': '140' });
- testPosition({ 'column': '1 / span col3 2', 'row': '2 / span row3 1' }, { 'width': '150', 'height': '140' });
+ testPosition({ 'column': '1 / span col3 2', 'row': '2 / span row3 1' }, { 'width': '355', 'height': '140' });
- testPosition({ 'column': '1 / 2', 'row': '2 / span row3 4' }, { 'width': '50', 'height': '140' });
+ testPosition({ 'column': '1 / 2', 'row': '2 / span row3 4' }, { 'width': '50', 'height': '450' });
testPosition({ 'column': '1 / 2', 'row': '2 / 4' }, { 'width': '50', 'height': '420' });
- 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' });
+ 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' });
- testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '300', 'height': '490' });
+ testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '300', 'height': '510' });
testPosition({ 'column': 'span col2 1 / 4', 'row': '3 / 4' }, { 'width': '300', 'height': '280' });
}
window.addEventListener("load", updateGridItemPosition, false);
Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution-expected.txt (0 => 197930)
--- 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)
@@ -0,0 +1,19 @@
+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
Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html (0 => 197930)
--- 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)
@@ -0,0 +1,444 @@
+<!DOCTYPE html>
+<link href="" 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=""
+
+<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html (197929 => 197930)
--- 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)
@@ -90,10 +90,10 @@
<!-- Check that without named gridAreas there are no implicit grid-line names defined -->
<div style="position: relative">
<div class="grid gridUniqueNames justifyContentStart">
- <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>
+ <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>
</div>
</div>
@@ -206,9 +206,9 @@
<!-- Check behavior with areas named *-start or *-end -->
<div style="position: relative">
<div class="grid gridAreasSpecial gridNoLineNames justifyContentStart">
- <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>
+ <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>
</div>
</div>
Modified: trunk/Source/WebCore/ChangeLog (197929 => 197930)
--- 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)
@@ -1,3 +1,36 @@
+2016-03-10 Manuel Rego Casasnovas <[email protected]>
+
+ [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):
+
2016-03-10 Eric Carlson <[email protected]>
[MediaStream] push media stream state to the UI process
Modified: trunk/Source/WebCore/rendering/style/GridResolvedPosition.cpp (197929 => 197930)
--- 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)
@@ -86,14 +86,14 @@
if (initialPosition.isSpan() && finalPosition.isSpan())
finalPosition.setAutoPosition();
- // 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();
+ 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();
- if (finalPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, finalPositionSide(direction)))
- finalPosition.setAutoPosition();
+ if (finalPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, finalPositionSide(direction)))
+ finalPosition.setAutoPosition();
+ }
// 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.
if (initialPosition.isAuto() && finalPosition.isSpan() && !finalPosition.namedGridLine().isNull())
@@ -117,85 +117,89 @@
return isColumnSide(side) ? GridResolvedPosition::explicitGridColumnCount(gridContainerStyle) : GridResolvedPosition::explicitGridRowCount(gridContainerStyle);
}
-static unsigned resolveNamedGridLinePositionFromStyle(const RenderStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
+static unsigned lookAheadForNamedGridLine(int start, unsigned numberOfLines, const Vector<unsigned>* namedGridLinesIndexes, unsigned gridLastLine)
{
- ASSERT(!position.namedGridLine().isNull());
+ ASSERT(numberOfLines);
- 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;
+ // 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--;
}
- 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];
+ ASSERT(end);
+ return end - 1;
}
-static GridSpan resolveRowStartColumnStartNamedGridLinePositionAgainstOppositePosition(unsigned resolvedOppositePosition, const GridPosition& position, const Vector<unsigned>& gridLines)
+static int lookBackForNamedGridLine(int end, unsigned numberOfLines, const Vector<unsigned>* namedGridLinesIndexes, int gridLastLine)
{
- if (!resolvedOppositePosition)
- return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
+ ASSERT(numberOfLines);
- unsigned firstLineBeforePositionIndex = 0;
- auto firstLineBeforePosition = std::lower_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition);
- if (firstLineBeforePosition != gridLines.end())
- firstLineBeforePositionIndex = firstLineBeforePosition - gridLines.begin();
+ // 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);
- unsigned gridLineIndex = std::max<int>(0, firstLineBeforePositionIndex - position.spanPosition());
+ if (!namedGridLinesIndexes)
+ return std::min(start, -1) - numberOfLines + 1;
- unsigned resolvedGridLinePosition = gridLines[gridLineIndex];
- if (resolvedGridLinePosition >= resolvedOppositePosition)
- resolvedGridLinePosition = resolvedOppositePosition - 1;
- return GridSpan::untranslatedDefiniteGridSpan(std::min(resolvedGridLinePosition, resolvedOppositePosition), resolvedOppositePosition);
+ for (; numberOfLines; --start) {
+ if (start < 0 || namedGridLinesIndexes->contains(static_cast<size_t>(start)))
+ numberOfLines--;
+ }
+
+ return start + 1;
}
-static GridSpan resolveRowEndColumnEndNamedGridLinePositionAgainstOppositePosition(unsigned resolvedOppositePosition, const GridPosition& position, const Vector<unsigned>& gridLines)
+static int resolveNamedGridLinePositionFromStyle(const RenderStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
{
- 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();
+ ASSERT(!position.namedGridLine().isNull());
- 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);
+ 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);
}
-static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const RenderStyle& gridContainerStyle, unsigned resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
+static GridSpan definiteGridSpanWithNamedLineSpanAgainstOpposite(int resolvedOppositePosition, const GridPosition& position, GridPositionSide side, const Vector<unsigned>* gridLines, unsigned lastLine)
{
+ 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)
+{
ASSERT(position.isSpan());
ASSERT(!position.namedGridLine().isNull());
// Negative positions are not allowed per the specification and should have been handled during parsing.
ASSERT(position.spanPosition() > 0);
const NamedGridLinesMap& gridLinesNames = isColumnSide(side) ? gridContainerStyle.namedGridColumnLines() : gridContainerStyle.namedGridRowLines();
- NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
+ auto iterator = gridLinesNames.find(position.namedGridLine());
+ const Vector<unsigned>* gridLines = iterator == gridLinesNames.end() ? nullptr : &iterator->value;
+ unsigned lastLine = explicitGridSizeForSide(gridContainerStyle, side);
- // 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);
+ return definiteGridSpanWithNamedLineSpanAgainstOpposite(resolvedOppositePosition, position, side, gridLines, lastLine);
}
-static GridSpan resolveGridPositionAgainstOppositePosition(const RenderStyle& gridContainerStyle, unsigned resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
+static GridSpan resolveGridPositionAgainstOppositePosition(const RenderStyle& gridContainerStyle, int resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
{
if (position.isAuto()) {
if (isStartSide(side))
@@ -262,7 +266,7 @@
// ''<custom-ident>-start (for grid-*-start) / <custom-ident>-end'' (for grid-*-end), contributes the first such
// line to the grid item's placement.
String namedGridLine = position.namedGridLine();
- ASSERT(!GridResolvedPosition::isNonExistentNamedLineOrArea(namedGridLine, gridContainerStyle, side));
+ ASSERT(!position.namedGridLine().isNull());
const NamedGridLinesMap& gridLineNames = gridLinesForSide(gridContainerStyle, side);
auto implicitLine = gridLineNames.find(implicitNamedGridLineForSide(namedGridLine, side));
@@ -275,11 +279,10 @@
if (explicitLine != gridLineNames.end())
return explicitLine->value[0];
- // 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;
+ 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;
}
case AutoPosition:
case SpanPosition:
