Skip to content

GitLab

T
tangled
Commit 4a86c9a0 authored by rego's avatar rego Committed by Commit bot
Browse files
Options

[css-grid] Fix placement for unknown named grid lines 

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.

Updated current tests to the new expected behavior and created a new
test checking different cases explicitly.

BUG=442954
TEST=fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html

Review URL: https://codereview.chromium.org/1576993003

Cr-Commit-Position: refs/heads/master@{#371792}
parent 8f566488
Hide whitespace changes
Inline Side-by-side
Showing with 602 additions and 139 deletions
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
View file @ 4a86c9a0
...@@ -52,8 +52,8 @@ function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridIte ...@@ -52,8 +52,8 @@ function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridIte
function testChangingGridDefinitions() 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 [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 [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': '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 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' }); 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' });
} }
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt
View file @ 4a86c9a0
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 are resolved properly considering all the implicit grid lines to have the given names.
PASS PASS
PASS PASS
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
View file @ 4a86c9a0
...@@ -4,60 +4,66 @@ ...@@ -4,60 +4,66 @@
<style> <style>
.grid { .grid {
grid-template-rows: 10px 20px; grid-template-rows: 10px 20px;
grid-auto-rows: 5px;
grid-template-columns: 30px 40px; grid-template-columns: 30px 40px;
grid-auto-columns: 15px;
grid-auto-flow: row; grid-auto-flow: row;
} }
.bothNamedGridLineRow { .bothNamedGridLineRow {
grid-row: nonExistentArea / nonExistentArea; grid-row: nonExistentArea / nonExistentArea;
grid-column: 1; grid-column: 1;
background-color: lime;
} }
.bothNamedGridLineColumn { .bothNamedGridLineColumn {
grid-row: 1; grid-row: 1;
grid-column: nonExistentArea / span 3; grid-column: nonExistentArea / span 3;
background-color: lime;
} }
.namedGridLineSpanRow { .namedGridLineSpanRow {
grid-row: nonExistentArea / span 5 firstRow; grid-row: nonExistentArea / span 5 firstRow;
grid-column: 1; grid-column: 1;
background-color: lime;
} }
.namedGridLineSpanColumn { .namedGridLineSpanColumn {
grid-row: 1; grid-row: 1;
grid-column: nonExistentArea / span; grid-column: nonExistentArea / span;
background-color: lime;
} }
</style> </style>
<script src="../../resources/check-layout.js"></script> <script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')"> <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 are resolved properly considering all the implicit grid lines to have the given names.</p>
<div style="position: relative"> <div style="position: relative">
<div class="grid"> <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 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> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid"> <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 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> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid"> <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 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> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid"> <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 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>
</div> </div>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html
View file @ 4a86c9a0
...@@ -75,8 +75,8 @@ ...@@ -75,8 +75,8 @@
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithRepeat"> <div class="grid gridWithRepeat">
<!-- fifth and sixth are invalid named grid areas. --> <!-- 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 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="40" data-offset-y="150" data-expected-width="80" data-expected-height="150"></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 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> <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-offset-y="0" data-expected-width="160" data-expected-height="150"></div>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html
View file @ 4a86c9a0
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
<head> <head>
<link href="resources/grid.css" rel="stylesheet"> <link href="resources/grid.css" rel="stylesheet">
<style> <style>
.grid {
grid-auto-columns: 5px;
grid-auto-rows: 5px;
}
.gridWithoutRepeat { .gridWithoutRepeat {
grid-template-columns: [a] 50px [b] 100px [c] 200px [d]; grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
grid-template-rows: [e] 50px [f] 100px [g] 200px [h]; grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
...@@ -74,19 +79,19 @@ ...@@ -74,19 +79,19 @@
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithRepeat"> <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> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithRepeat"> <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>
</div> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithoutRepeat"> <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> </div>
</div> </div>
...@@ -105,31 +110,29 @@ ...@@ -105,31 +110,29 @@
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithoutRepeat"> <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'. <!-- Consider all the implicit lines to be called 'b' too. -->
Thus being actually 'b' / span 1. --> <div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="355" data-offset-y="0" data-expected-width="10" data-expected-height="50"></div>
<div class="sizedToGridArea gridItem2BSpan2B" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</div> </div>
</div> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithoutRepeat"> <div class="grid gridWithoutRepeat">
<!-- There is only one 'g' so we should pick this one. Also both initial and final position are equal so <!-- Consider all the implicit lines to be called 'g' too. -->
this is resolved as span 1 / 'g'. --> <div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="160"></div>
<div class="sizedToGridArea gridItemSpan2GNegativeG" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</div> </div>
</div> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithRepeat"> <div class="grid gridWithRepeat">
<!-- There is no 'a' or 'c' so it should default to auto / auto. --> <!-- There is no 'a' or 'c' so all the implicit lines are considered to have those names. -->
<div class="sizedToGridArea gridItemAToSpanC" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> <div class="sizedToGridArea gridItemAToSpanC" data-offset-x="355" data-offset-y="0" data-expected-width="5" data-expected-height="50"></div>
</div> </div>
</div> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid gridWithRepeat"> <div class="grid gridWithRepeat">
<!-- There is no 'f' or 'h' so it should default to auto / auto. --> <!-- 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="50"></div> <div class="sizedToGridArea gridItemFToSpanH" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="360"></div>
</div> </div>
</div> </div>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html
View file @ 4a86c9a0
...@@ -146,8 +146,8 @@ ...@@ -146,8 +146,8 @@
</div> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="550"> <div class="grid" data-expected-width="150" data-expected-height="950">
<div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div> <div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="600"></div>
</div> </div>
</div> </div>
...@@ -188,14 +188,14 @@ ...@@ -188,14 +188,14 @@
</div> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150"> <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="150" data-expected-height="50"></div> <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="1950" data-expected-height="50"></div>
</div> </div>
</div> </div>
<div style="position: relative"> <div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150"> <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>
</div> </div>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html
View file @ 4a86c9a0
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
.grid { .grid {
grid-template-columns: [col] 50px [col] 100px [col] 200px [col]; grid-template-columns: [col] 50px [col] 100px [col] 200px [col];
grid-template-rows: [row] 70px [row] 140px [row] 280px [row]; grid-template-rows: [row] 70px [row] 140px [row] 280px [row];
grid-auto-columns: 5px;
grid-auto-rows: 10px;
} }
.differentNamedGridLines { .differentNamedGridLines {
grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4]; grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4];
...@@ -67,23 +69,23 @@ function updateGridItemPosition() ...@@ -67,23 +69,23 @@ function updateGridItemPosition()
// 4. Named grid lines, changing the name of the grid lines. // 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 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': '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': '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 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. // 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 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': '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 2 row' }, { 'width': '305', '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 1 row' }, { 'width': '305', 'height': '70' });
testPosition({ 'column': 'span 2 col / 3', 'row': 'span 2 row / 4' }, { 'width': '150', 'height': '420' }); 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' }); testPosition({ 'column': 'span 1 col / 3', 'row': 'span 2 row / 4' }, { 'width': '100', 'height': '420' });
...@@ -106,8 +108,8 @@ function updateGridItemPosition() ...@@ -106,8 +108,8 @@ function updateGridItemPosition()
testPosition({ 'column': '1 / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' }); testPosition({ 'column': '1 / 3', 'row': 'span 2 / 4' }, { 'width': '150', 'height': '420' });
// 2. Span <-> named grid lines. // 2. Span <-> named grid lines.
testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150', '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': '490' }); 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 / span 3' }, { 'width': '150', 'height': '490' });
testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' }); testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' });
...@@ -115,12 +117,12 @@ function updateGridItemPosition() ...@@ -115,12 +117,12 @@ function updateGridItemPosition()
testPosition({ 'column': 'span 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' }); 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': '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' }); testPosition({ 'column': 'span 1 / 3', 'row': 'span 1 / 4' }, { 'width': '100', 'height': '280' });
// 3. Named grid lines to span named grid line. // 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 / col 3', 'row': '1 / span 4' }, { 'width': '150', 'height': '500' });
testPosition({ 'column': '1 / span col 3', 'row': '1 / span 4' }, { 'width': '350', 'height': '490' }); 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 / span row 3' }, { 'width': '150', 'height': '490' });
testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' }); testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150', 'height': '210' });
...@@ -128,19 +130,19 @@ function updateGridItemPosition() ...@@ -128,19 +130,19 @@ function updateGridItemPosition()
testPosition({ 'column': 'span col 1 / 3', 'row': 'span 2 / 4' }, { 'width': '100', 'height': '420' }); 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': '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': 'col 1 / 4' }, { 'width': '100', 'height': '10' });
testPosition({ 'column': 'span col 1 / 3', 'row': 'span col 1 / 4' }, { 'width': '100', 'height': '280' }); testPosition({ 'column': 'span col 1 / 3', 'row': 'span col 1 / 4' }, { 'width': '100', 'height': '500' });
// 4. Explicit <-> named grid lines. // 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. // 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]; var gridElement = document.getElementsByClassName("grid")[0];
gridElement.classList.add("differentNamedGridLines"); 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 / 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 / 4' }, { 'width': '360', 'height': '490' });
testPosition({ 'column': '1 / col4 3', 'row': '1 / row3 4' }, { 'width': '350', 'height': '210' }); 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': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '300', 'height': '420' });
testPosition({ 'column': '1 / 4', 'row': '1 row2 / 4' }, { 'width': '350', 'height': '420' }); testPosition({ 'column': '1 / 4', 'row': '1 row2 / 4' }, { 'width': '350', 'height': '420' });
...@@ -149,29 +151,29 @@ function updateGridItemPosition() ...@@ -149,29 +151,29 @@ function updateGridItemPosition()
testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '300', 'height': '420' }); testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '300', 'height': '420' });
// 5. Span <-> span named grid lines. // 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 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 4' }, { 'width': '360', 'height': '500' });
testPosition({ 'column': '1 / span col4 3', 'row': '1 / span row3 4' }, { 'width': '350', 'height': '210' }); 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 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 1 / 4' }, { 'width': '300', 'height': '280' });
testPosition({ 'column': 'span 2 / 4', 'row': 'span row2 1 / 4' }, { 'width': '300', 'height': '420' }); testPosition({ 'column': 'span 2 / 4', 'row': 'span row2 1 / 4' }, { 'width': '300', 'height': '420' });
// 6. Explicit to span named grid line. // 6. Explicit to span named grid line.
testPosition({ 'column': '1 / 2', 'row': '2 / span row3 1' }, { 'width': '50', 'height': '140' }); 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': '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': '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': '490' }); 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' }); testPosition({ 'column': 'span col2 1 / 4', 'row': '3 / 4' }, { 'width': '300', 'height': '280' });
} }
window.addEventListener("load", updateGridItemPosition, false); window.addEventListener("load", updateGridItemPosition, false);
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html 0 → 100644
View file @ 4a86c9a0
<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
grid-template-columns: [vertical] 50px [middle vertical] 100px [vertical];
grid-auto-columns: 10px;
grid-template-rows: [horizontal] 30px [middle horizontal] 60px [horizontal];
grid-auto-rows: 5px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<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="grid-column: foo; grid-row: bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: a; grid-row: b;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: line; 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="grid-column: foo; grid-row: bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 1 / foo; grid-row: 1 / bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: foo / 1; grid-row: bar / 1;"
data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: foo / foo; grid-row: bar / bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: foo / bar; 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="grid-column: 1 foo; grid-row: 1 bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 foo; grid-row: 2 bar;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 3 foo; grid-row: 3 bar;"
data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 4 foo; grid-row: 4 bar;"
data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 5 foo; grid-row: 5 bar;"
data-offset-x="200" data-offset-y="115" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 foo / 4 foo; 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="grid-column: 2 foo / 4 bar; 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="grid-column: 5 foo / 3 foo; 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="grid-column: 5 foo / 3 bar; 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="grid-column: -1 foo; grid-row: -1 bar;"
data-offset-x="40" data-offset-y="20" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 foo; grid-row: -2 bar;"
data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -3 foo; grid-row: -3 bar;"
data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -4 foo; grid-row: -4 bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -5 foo; grid-row: -5 bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -4 foo / -2 foo; 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="grid-column: -4 foo / -2 bar; 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="grid-column: -3 foo / -5 foo; 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="grid-column: -3 foo / -5 bar; 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="grid-column: 1 / span foo; grid-row: 1 / span bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: span foo / 1; grid-row: span bar / 1;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: foo / span foo; grid-row: bar / span bar;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: foo / span bar; grid-row: bar / span foo;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span foo / foo; grid-row: span bar / bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
</div>
<div style="grid-column: span foo / bar; 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="grid-column: -1 / span foo; grid-row: -1 / span bar;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span foo / -1; grid-row: span bar / -1;"
data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: -1 foo / span foo; 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="grid-column: -1 foo / span bar; 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="grid-column: span foo / -1 foo; 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="grid-column: span foo / -1 bar; 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="grid-column: 1 / span 2 foo; 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="grid-column: span 2 foo / 1; 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="grid-column: foo / span 2 foo; 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="grid-column: foo / span 2 bar; 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="grid-column: span 2 foo / foo; 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="grid-column: span 2 foo / bar; 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="grid-column: -1 / span 2 foo; 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="grid-column: span 2 foo / -1; 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="grid-column: -1 foo / span 2 foo; 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="grid-column: -1 foo / span 2 bar; 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="grid-column: span 2 foo / -1 foo; 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="grid-column: span 2 foo / -1 bar; 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="grid-column: 2 foo / span foo; 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="grid-column: 2 foo / span bar; 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="grid-column: 2 foo / span 2 foo; 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="grid-column: 2 foo / span 2 bar; 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="grid-column: span foo / 2 foo; 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="grid-column: span foo / 2 bar; 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="grid-column: span 2 foo / 2 foo; 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="grid-column: span 2 foo / 2 bar; 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="grid-column: -2 foo / span foo; 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="grid-column: -2 foo / span bar; 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="grid-column: -2 foo / span 2 foo; 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="grid-column: -2 foo / span 2 bar; 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="grid-column: span foo / -2 foo; 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="grid-column: span foo / -2 bar; 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="grid-column: span 2 foo / -2 foo; 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="grid-column: span 2 foo / -2 bar; 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="grid-column: 1 middle; grid-row: 1 middle;"
data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: 2 middle; grid-row: 2 middle;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 3 middle; grid-row: 3 middle;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 4 middle; grid-row: 4 middle;"
data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 5 middle; grid-row: 5 middle;"
data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 middle / 4 middle; 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="grid-column: 5 middle / 3 middle; 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="grid-column: -1 middle; grid-row: -1 middle;"
data-offset-x="90" data-offset-y="50" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: -2 middle; grid-row: -2 middle;"
data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -3 middle; grid-row: -3 middle;"
data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -4 middle; grid-row: -4 middle;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -5 middle; grid-row: -5 middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 middle / -4 middle; 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="grid-column: -5 middle / -3 middle; 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="grid-column: 1 vertical; grid-row: 1 horizontal;"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">
</div>
<div style="grid-column: 2 vertical; grid-row: 2 horizontal;"
data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: 3 vertical; grid-row: 3 horizontal;"
data-offset-x="150" data-offset-y="90" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 4 vertical; grid-row: 4 horizontal;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 5 vertical; grid-row: 5 horizontal;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 vertical / 4 vertical; 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="grid-column: 5 vertical / 3 vertical; 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="grid-column: -1 vertical; grid-row: -1 horizontal;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 vertical; grid-row: -2 horizontal;"
data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: -3 vertical; grid-row: -3 horizontal;"
data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
</div>
<div style="grid-column: -4 vertical; grid-row: -4 horizontal;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -5 vertical; grid-row: -5 horizontal;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 vertical / -4 vertical; 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="grid-column: -5 vertical / -3 vertical; 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="grid-column: 1 / span middle; grid-row: 1 / span middle;"
data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
</div>
<div style="grid-column: span middle / 1; grid-row: span middle / 1;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 1 / span 2 middle; 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="grid-column: span 2 middle / 1; 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="grid-column: middle / span middle; grid-row: middle / span middle;"
data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
</div>
<div style="grid-column: span middle / middle; grid-row: span middle / middle;"
data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
</div>
<div style="grid-column: middle / span 2 middle; 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="grid-column: span 2 middle / middle; 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="grid-column: -1 / span middle; grid-row: -1 / span middle;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span middle / -1; grid-row: span middle / -1;"
data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: -1 / span 2 middle; 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="grid-column: span 2 middle / -1; 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="grid-column: -1 middle / span middle; 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="grid-column: span middle / -1 middle; 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="grid-column: -1 middle / span 2 middle; 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="grid-column: span 2 middle / -1 middle; 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="grid-column: span middle / 6; grid-row: span middle / 6;"
data-offset-x="80" data-offset-y="45" data-expected-width="130" data-expected-height="75">
</div>
<div style="grid-column: span 2 middle / 6; 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="grid-column: -6 / span middle; grid-row: -6 / span middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="45">
</div>
<div style="grid-column: -6 / span 2 middle; 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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
View file @ 4a86c9a0
...@@ -89,10 +89,10 @@ ...@@ -89,10 +89,10 @@
<!-- Check that without named gridAreas there are no implicit grid-line names defined --> <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
<div style="position: relative"> <div style="position: relative">
<div class="grid gridUniqueNames"> <div class="grid gridUniqueNames">
<div class="sizedToGridArea" style="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="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="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="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="grid-column: c-start; 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="grid-column: c-start; 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="grid-column: b-end; 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="grid-column: b-end; grid-row: h-start" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</div> </div>
</div> </div>
...@@ -205,9 +205,9 @@ ...@@ -205,9 +205,9 @@
<!-- Check behavior with areas named *-start or *-end --> <!-- Check behavior with areas named *-start or *-end -->
<div style="position: relative"> <div style="position: relative">
<div class="grid gridAreasSpecial gridNoLineNames"> <div class="grid gridAreasSpecial gridNoLineNames">
<div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
<div class="sizedToGridArea" style="grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
<div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div> <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</div> </div>
</div> </div>
......
third_party/WebKit/Source/core/style/GridResolvedPosition.cpp
View file @ 4a86c9a0
...@@ -47,13 +47,14 @@ static void initialAndFinalPositionsFromStyle(const ComputedStyle& gridContainer ...@@ -47,13 +47,14 @@ static void initialAndFinalPositionsFromStyle(const ComputedStyle& gridContainer
if (initialPosition.isSpan() && finalPosition.isSpan()) if (initialPosition.isSpan() && finalPosition.isSpan())
finalPosition.setAutoPosition(); finalPosition.setAutoPosition();
// Try to early detect the case of non existing named grid lines. This way we could assume later that if (gridItem.isOutOfFlowPositioned()) {
// GridResolvedPosition::resolveGrisPositionFromStyle() always return a valid resolved position. // Early detect the case of non existing named grid lines for positioned items.
if (initialPosition.isNamedGridArea() && !GridResolvedPosition::isValidNamedLineOrArea(initialPosition.namedGridLine(), gridContainerStyle, GridResolvedPosition::initialPositionSide(direction))) if (initialPosition.isNamedGridArea() && !GridResolvedPosition::isValidNamedLineOrArea(initialPosition.namedGridLine(), gridContainerStyle, GridResolvedPosition::initialPositionSide(direction)))
initialPosition.setAutoPosition(); initialPosition.setAutoPosition();
if (finalPosition.isNamedGridArea() && !GridResolvedPosition::isValidNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, GridResolvedPosition::finalPositionSide(direction))) if (finalPosition.isNamedGridArea() && !GridResolvedPosition::isValidNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, GridResolvedPosition::finalPositionSide(direction)))
finalPosition.setAutoPosition(); 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 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()) if (initialPosition.isAuto() && finalPosition.isSpan() && !finalPosition.namedGridLine().isNull())
...@@ -62,46 +63,80 @@ static void initialAndFinalPositionsFromStyle(const ComputedStyle& gridContainer ...@@ -62,46 +63,80 @@ static void initialAndFinalPositionsFromStyle(const ComputedStyle& gridContainer
initialPosition.setSpanPosition(1, String()); initialPosition.setSpanPosition(1, String());
} }
static GridSpan definiteGridSpanWithInitialNamedSpanAgainstOpposite(size_t resolvedOppositePosition, const GridPosition& position, const Vector<size_t>& gridLines) static size_t lookAheadForNamedGridLine(int start, size_t numberOfLines, const Vector<size_t>* namedGridLinesIndexes, size_t gridLastLine)
{ {
if (resolvedOppositePosition == 0) ASSERT(numberOfLines);
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
// 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
size_t end = std::max(start, 0);
if (!namedGridLinesIndexes) {
end = std::max(end, gridLastLine + 1);
return end + numberOfLines - 1;
}
for (; numberOfLines; ++end) {
if (end > gridLastLine || namedGridLinesIndexes->contains(end))
numberOfLines--;
}
size_t firstLineBeforeOppositePositionIndex = 0; ASSERT(end);
const size_t* firstLineBeforeOppositePosition = std::lower_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition); return end - 1;
if (firstLineBeforeOppositePosition != gridLines.end())
firstLineBeforeOppositePositionIndex = firstLineBeforeOppositePosition - gridLines.begin();
size_t gridLineIndex = std::max<int>(0, firstLineBeforeOppositePositionIndex - position.spanPosition());
size_t resolvedGridLinePosition = gridLines[gridLineIndex];
if (resolvedGridLinePosition >= resolvedOppositePosition)
resolvedGridLinePosition = resolvedOppositePosition - 1;
return GridSpan::untranslatedDefiniteGridSpan(resolvedGridLinePosition, resolvedOppositePosition);
} }
static GridSpan definiteGridSpanWithFinalNamedSpanAgainstOpposite(size_t resolvedOppositePosition, const GridPosition& position, const Vector<size_t>& gridLines) static int lookBackForNamedGridLine(int end, size_t numberOfLines, const Vector<size_t>* namedGridLinesIndexes, int gridLastLine)
{ {
ASSERT(gridLines.size()); ASSERT(numberOfLines);
size_t firstLineAfterOppositePositionIndex = gridLines.size() - 1;
const size_t* firstLineAfterOppositePosition = std::upper_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition); // Only implicit lines on the search direction are assumed to have the given name, so we can start to look from last line.
if (firstLineAfterOppositePosition != gridLines.end()) // See: https://drafts.csswg.org/css-grid/#grid-placement-span-int
firstLineAfterOppositePositionIndex = firstLineAfterOppositePosition - gridLines.begin(); int start = std::min(end, gridLastLine);
size_t gridLineIndex = std::min(gridLines.size() - 1, firstLineAfterOppositePositionIndex + position.spanPosition() - 1);
size_t resolvedGridLinePosition = gridLines[gridLineIndex]; if (!namedGridLinesIndexes) {
if (resolvedGridLinePosition <= resolvedOppositePosition) start = std::min(start, -1);
resolvedGridLinePosition = resolvedOppositePosition + 1; return start - numberOfLines + 1;
}
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedGridLinePosition);
for (; numberOfLines; --start) {
if (start < 0 || namedGridLinesIndexes->contains(static_cast<size_t>(start)))
numberOfLines--;
}
return start + 1;
} }
static GridSpan definiteGridSpanWithNamedSpanAgainstOpposite(size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side, const Vector<size_t>& gridLines) static GridSpan definiteGridSpanWithNamedSpanAgainstOpposite(int resolvedOppositePosition, const GridPosition& position, GridPositionSide side, const Vector<size_t>* gridLines, int lastLine)
{ {
if (side == RowStartSide || side == ColumnStartSide) int start, end;
return definiteGridSpanWithInitialNamedSpanAgainstOpposite(resolvedOppositePosition, position, gridLines);
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 definiteGridSpanWithFinalNamedSpanAgainstOpposite(resolvedOppositePosition, position, gridLines); return GridSpan::untranslatedDefiniteGridSpan(start, end);
} }
static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const ComputedStyle& gridContainerStyle, size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side) size_t GridResolvedPosition::explicitGridColumnCount(const ComputedStyle& gridContainerStyle)
{
return std::min<size_t>(gridContainerStyle.gridTemplateColumns().size(), kGridMaxTracks);
}
size_t GridResolvedPosition::explicitGridRowCount(const ComputedStyle& gridContainerStyle)
{
return std::min<size_t>(gridContainerStyle.gridTemplateRows().size(), kGridMaxTracks);
}
static size_t explicitGridSizeForSide(const ComputedStyle& gridContainerStyle, GridPositionSide side)
{
return (side == ColumnStartSide || side == ColumnEndSide) ? GridResolvedPosition::explicitGridColumnCount(gridContainerStyle) : GridResolvedPosition::explicitGridRowCount(gridContainerStyle);
}
static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const ComputedStyle& gridContainerStyle, int resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
{ {
ASSERT(position.isSpan()); ASSERT(position.isSpan());
ASSERT(!position.namedGridLine().isNull()); ASSERT(!position.namedGridLine().isNull());
...@@ -110,16 +145,9 @@ static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const Comput ...@@ -110,16 +145,9 @@ static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const Comput
const NamedGridLinesMap& gridLinesNames = gridLinesForSide(gridContainerStyle, side); const NamedGridLinesMap& gridLinesNames = gridLinesForSide(gridContainerStyle, side);
NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine()); NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
const Vector<size_t>* gridLines = it == gridLinesNames.end() ? nullptr : &it->value;
// 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). size_t lastLine = explicitGridSizeForSide(gridContainerStyle, side);
// See http://lists.w3.org/Archives/Public/www-style/2013Jun/0394.html. return definiteGridSpanWithNamedSpanAgainstOpposite(resolvedOppositePosition, position, side, gridLines, lastLine);
if (it == gridLinesNames.end()) {
if ((side == ColumnStartSide || side == RowStartSide) && resolvedOppositePosition)
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition - 1, resolvedOppositePosition);
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
}
return definiteGridSpanWithNamedSpanAgainstOpposite(resolvedOppositePosition, position, side, it->value);
} }
static GridSpan definiteGridSpanWithSpanAgainstOpposite(size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side) static GridSpan definiteGridSpanWithSpanAgainstOpposite(size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
...@@ -131,7 +159,7 @@ static GridSpan definiteGridSpanWithSpanAgainstOpposite(size_t resolvedOppositeP ...@@ -131,7 +159,7 @@ static GridSpan definiteGridSpanWithSpanAgainstOpposite(size_t resolvedOppositeP
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + positionOffset); return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + positionOffset);
} }
static GridSpan resolveGridPositionAgainstOppositePosition(const ComputedStyle& gridContainerStyle, size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side) static GridSpan resolveGridPositionAgainstOppositePosition(const ComputedStyle& gridContainerStyle, int resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
{ {
if (position.isAuto()) { if (position.isAuto()) {
if (side == ColumnStartSide || side == RowStartSide) if (side == ColumnStartSide || side == RowStartSide)
...@@ -167,40 +195,18 @@ size_t GridResolvedPosition::spanSizeForAutoPlacedItem(const ComputedStyle& grid ...@@ -167,40 +195,18 @@ size_t GridResolvedPosition::spanSizeForAutoPlacedItem(const ComputedStyle& grid
return position.spanPosition(); return position.spanPosition();
} }
size_t GridResolvedPosition::explicitGridColumnCount(const ComputedStyle& gridContainerStyle) static int resolveNamedGridLinePositionFromStyle(const ComputedStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
{
return std::min<size_t>(gridContainerStyle.gridTemplateColumns().size(), kGridMaxTracks);
}
size_t GridResolvedPosition::explicitGridRowCount(const ComputedStyle& gridContainerStyle)
{
return std::min<size_t>(gridContainerStyle.gridTemplateRows().size(), kGridMaxTracks);
}
static size_t explicitGridSizeForSide(const ComputedStyle& gridContainerStyle, GridPositionSide side)
{
return (side == ColumnStartSide || side == ColumnEndSide) ? GridResolvedPosition::explicitGridColumnCount(gridContainerStyle) : GridResolvedPosition::explicitGridRowCount(gridContainerStyle);
}
static size_t resolveNamedGridLinePositionFromStyle(const ComputedStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
{ {
ASSERT(!position.namedGridLine().isNull()); ASSERT(!position.namedGridLine().isNull());
const NamedGridLinesMap& gridLinesNames = gridLinesForSide(gridContainerStyle, side); const NamedGridLinesMap& gridLinesNames = gridLinesForSide(gridContainerStyle, side);
NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine()); NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
if (it == gridLinesNames.end()) { const Vector<size_t>* gridLines = it == gridLinesNames.end() ? nullptr : &it->value;
if (position.isPositive()) size_t lastLine = explicitGridSizeForSide(gridContainerStyle, side);
return 0;
size_t lastLine = explicitGridSizeForSide(gridContainerStyle, side);
return lastLine;
}
size_t namedGridLineIndex;
if (position.isPositive()) if (position.isPositive())
namedGridLineIndex = std::min<size_t>(position.integerPosition(), it->value.size()) - 1; return lookAheadForNamedGridLine(0, abs(position.integerPosition()), gridLines, lastLine);
else else
namedGridLineIndex = std::max<int>(it->value.size() - abs(position.integerPosition()), 0); return lookBackForNamedGridLine(lastLine, abs(position.integerPosition()), gridLines, lastLine);
return it->value[namedGridLineIndex];
} }
static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side) static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
...@@ -227,7 +233,7 @@ static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle, ...@@ -227,7 +233,7 @@ static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle,
// ''<custom-ident>-start (for grid-*-start) / <custom-ident>-end'' (for grid-*-end), contributes the first such // ''<custom-ident>-start (for grid-*-start) / <custom-ident>-end'' (for grid-*-end), contributes the first such
// line to the grid item's placement. // line to the grid item's placement.
String namedGridLine = position.namedGridLine(); String namedGridLine = position.namedGridLine();
ASSERT(GridResolvedPosition::isValidNamedLineOrArea(namedGridLine, gridContainerStyle, side)); ASSERT(!position.namedGridLine().isNull());
const NamedGridLinesMap& gridLineNames = gridLinesForSide(gridContainerStyle, side); const NamedGridLinesMap& gridLineNames = gridLinesForSide(gridContainerStyle, side);
NamedGridLinesMap::const_iterator implicitLineIter = gridLineNames.find(implicitNamedGridLineForSide(namedGridLine, side)); NamedGridLinesMap::const_iterator implicitLineIter = gridLineNames.find(implicitNamedGridLineForSide(namedGridLine, side));
...@@ -240,11 +246,10 @@ static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle, ...@@ -240,11 +246,10 @@ static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle,
if (explicitLineIter != gridLineNames.end()) if (explicitLineIter != gridLineNames.end())
return explicitLineIter->value[0]; return explicitLineIter->value[0];
// If none of the above works specs mandate us to treat it as auto BUT we should have detected it before calling ASSERT(!GridResolvedPosition::isValidNamedLineOrArea(namedGridLine, gridContainerStyle, side));
// this function in GridResolvedPosition::resolveGridPositionsFromStyle(). We should be also covered by the // If none of the above works specs mandate to assume that all the lines in the implicit grid have this name.
// ASSERT at the beginning of this block. size_t lastLine = explicitGridSizeForSide(gridContainerStyle, side);
ASSERT_NOT_REACHED(); return lastLine + 1;
return 0;
} }
case AutoPosition: case AutoPosition:
case SpanPosition: case SpanPosition:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment