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
Show 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
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' });
}
......
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
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
View file @ 4a86c9a0
......@@ -4,60 +4,66 @@
<style>
.grid {
grid-template-rows: 10px 20px;
grid-auto-rows: 5px;
grid-template-columns: 30px 40px;
grid-auto-columns: 15px;
grid-auto-flow: row;
}
.bothNamedGridLineRow {
grid-row: nonExistentArea / nonExistentArea;
grid-column: 1;
background-color: lime;
}
.bothNamedGridLineColumn {
grid-row: 1;
grid-column: nonExistentArea / span 3;
background-color: lime;
}
.namedGridLineSpanRow {
grid-row: nonExistentArea / span 5 firstRow;
grid-column: 1;
background-color: lime;
}
.namedGridLineSpanColumn {
grid-row: 1;
grid-column: nonExistentArea / span;
background-color: lime;
}
</style>
<script src="../../resources/check-layout.js"></script>
<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 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">
<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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html
View file @ 4a86c9a0
......@@ -75,8 +75,8 @@
<div style="position: relative">
<div class="grid gridWithRepeat">
<!-- 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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html
View file @ 4a86c9a0
......@@ -3,6 +3,11 @@
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
grid-auto-columns: 5px;
grid-auto-rows: 5px;
}
.gridWithoutRepeat {
grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
......@@ -74,19 +79,19 @@
<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>
<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>
......@@ -105,31 +110,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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html
View file @ 4a86c9a0
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html
View file @ 4a86c9a0
......@@ -5,6 +5,8 @@
.grid {
grid-template-columns: [col] 50px [col] 100px [col] 200px [col];
grid-template-rows: [row] 70px [row] 140px [row] 280px [row];
grid-auto-columns: 5px;
grid-auto-rows: 10px;
}
.differentNamedGridLines {
grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4];
......@@ -67,23 +69,23 @@ function updateGridItemPosition()
// 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 @@ function updateGridItemPosition()
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 @@ function updateGridItemPosition()
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 @@ function updateGridItemPosition()
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 @@ function updateGridItemPosition()
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);
......
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 @@
<!-- Check that without named gridAreas there are no implicit grid-line names defined -->
<div style="position: relative">
<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-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-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: 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: 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="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="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="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</div>
</div>
......@@ -205,9 +205,9 @@
<!-- Check behavior with areas named *-start or *-end -->
<div style="position: relative">
<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-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></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;" 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="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="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
</div>
</div>
......
third_party/WebKit/Source/core/style/GridResolvedPosition.cpp
View file @ 4a86c9a0
......@@ -47,13 +47,14 @@ static void initialAndFinalPositionsFromStyle(const ComputedStyle& gridContainer
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() always return a valid resolved position.
if (gridItem.isOutOfFlowPositioned()) {
// Early detect the case of non existing named grid lines for positioned items.
if (initialPosition.isNamedGridArea() && !GridResolvedPosition::isValidNamedLineOrArea(initialPosition.namedGridLine(), gridContainerStyle, GridResolvedPosition::initialPositionSide(direction)))
initialPosition.setAutoPosition();
if (finalPosition.isNamedGridArea() && !GridResolvedPosition::isValidNamedLineOrArea(finalPosition.namedGridLine(), gridContainerStyle, GridResolvedPosition::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())
......@@ -62,46 +63,80 @@ static void initialAndFinalPositionsFromStyle(const ComputedStyle& gridContainer
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)
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
ASSERT(numberOfLines);
// 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;
const size_t* firstLineBeforeOppositePosition = std::lower_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition);
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);
ASSERT(end);
return end - 1;
}
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());
size_t firstLineAfterOppositePositionIndex = gridLines.size() - 1;
const size_t* firstLineAfterOppositePosition = std::upper_bound(gridLines.begin(), gridLines.end(), resolvedOppositePosition);
if (firstLineAfterOppositePosition != gridLines.end())
firstLineAfterOppositePositionIndex = firstLineAfterOppositePosition - gridLines.begin();
size_t gridLineIndex = std::min(gridLines.size() - 1, firstLineAfterOppositePositionIndex + position.spanPosition() - 1);
size_t resolvedGridLinePosition = gridLines[gridLineIndex];
if (resolvedGridLinePosition <= resolvedOppositePosition)
resolvedGridLinePosition = resolvedOppositePosition + 1;
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedGridLinePosition);
ASSERT(numberOfLines);
// 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);
if (!namedGridLinesIndexes) {
start = std::min(start, -1);
return start - numberOfLines + 1;
}
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)
return definiteGridSpanWithInitialNamedSpanAgainstOpposite(resolvedOppositePosition, position, gridLines);
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 definiteGridSpanWithFinalNamedSpanAgainstOpposite(resolvedOppositePosition, position, gridLines);
return GridSpan::untranslatedDefiniteGridSpan(start, end);
}
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, size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const ComputedStyle& gridContainerStyle, int resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
{
ASSERT(position.isSpan());
ASSERT(!position.namedGridLine().isNull());
......@@ -110,16 +145,9 @@ static GridSpan resolveNamedGridLinePositionAgainstOppositePosition(const Comput
const NamedGridLinesMap& gridLinesNames = gridLinesForSide(gridContainerStyle, side);
NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
// 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 ((side == ColumnStartSide || side == RowStartSide) && resolvedOppositePosition)
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition - 1, resolvedOppositePosition);
return GridSpan::untranslatedDefiniteGridSpan(resolvedOppositePosition, resolvedOppositePosition + 1);
}
return definiteGridSpanWithNamedSpanAgainstOpposite(resolvedOppositePosition, position, side, it->value);
const Vector<size_t>* gridLines = it == gridLinesNames.end() ? nullptr : &it->value;
size_t lastLine = explicitGridSizeForSide(gridContainerStyle, side);
return definiteGridSpanWithNamedSpanAgainstOpposite(resolvedOppositePosition, position, side, gridLines, lastLine);
}
static GridSpan definiteGridSpanWithSpanAgainstOpposite(size_t resolvedOppositePosition, const GridPosition& position, GridPositionSide side)
......@@ -131,7 +159,7 @@ static GridSpan definiteGridSpanWithSpanAgainstOpposite(size_t resolvedOppositeP
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 (side == ColumnStartSide || side == RowStartSide)
......@@ -167,40 +195,18 @@ size_t GridResolvedPosition::spanSizeForAutoPlacedItem(const ComputedStyle& grid
return position.spanPosition();
}
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 size_t resolveNamedGridLinePositionFromStyle(const ComputedStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
static int resolveNamedGridLinePositionFromStyle(const ComputedStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
{
ASSERT(!position.namedGridLine().isNull());
const NamedGridLinesMap& gridLinesNames = gridLinesForSide(gridContainerStyle, side);
NamedGridLinesMap::const_iterator it = gridLinesNames.find(position.namedGridLine());
if (it == gridLinesNames.end()) {
if (position.isPositive())
return 0;
const Vector<size_t>* gridLines = it == gridLinesNames.end() ? nullptr : &it->value;
size_t lastLine = explicitGridSizeForSide(gridContainerStyle, side);
return lastLine;
}
size_t namedGridLineIndex;
if (position.isPositive())
namedGridLineIndex = std::min<size_t>(position.integerPosition(), it->value.size()) - 1;
return lookAheadForNamedGridLine(0, abs(position.integerPosition()), gridLines, lastLine);
else
namedGridLineIndex = std::max<int>(it->value.size() - abs(position.integerPosition()), 0);
return it->value[namedGridLineIndex];
return lookBackForNamedGridLine(lastLine, abs(position.integerPosition()), gridLines, lastLine);
}
static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle, const GridPosition& position, GridPositionSide side)
......@@ -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
// line to the grid item's placement.
String namedGridLine = position.namedGridLine();
ASSERT(GridResolvedPosition::isValidNamedLineOrArea(namedGridLine, gridContainerStyle, side));
ASSERT(!position.namedGridLine().isNull());
const NamedGridLinesMap& gridLineNames = gridLinesForSide(gridContainerStyle, side);
NamedGridLinesMap::const_iterator implicitLineIter = gridLineNames.find(implicitNamedGridLineForSide(namedGridLine, side));
......@@ -240,11 +246,10 @@ static int resolveGridPositionFromStyle(const ComputedStyle& gridContainerStyle,
if (explicitLineIter != gridLineNames.end())
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
// this function in GridResolvedPosition::resolveGridPositionsFromStyle(). We should be also covered by the
// ASSERT at the beginning of this block.
ASSERT_NOT_REACHED();
return 0;
ASSERT(!GridResolvedPosition::isValidNamedLineOrArea(namedGridLine, gridContainerStyle, side));
// If none of the above works specs mandate to assume that all the lines in the implicit grid have this name.
size_t lastLine = explicitGridSizeForSide(gridContainerStyle, side);
return lastLine + 1;
}
case AutoPosition:
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