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
Expand all 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
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/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>
......
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