Skip to content

Commit

Permalink
[GridNG] Handle negative indices for out of flow items
Browse files Browse the repository at this point in the history 
As it is the case for grid items, out of flow items' indices can have
negative values. This change adds support and web tests for the
following cases:

1. Negative indices within the grid.
2. Either the start or end line are defined as 'auto' and the
   corresponding line is at the start or end-most line of the grid.
3. The out of flow item attempts to create new lines with negative
   indices.
4. Combination of positive and negative indices.
5. Negative indices within an implicitly defined grid.

The last case is currently failing because of the different constraints
in flow and out of flow items' indices have related to ranges and sets.
This will be addressed in a follow up change.

Bug: 1045599
Change-Id: Id83db31bcbdb1ee4d5a0313fc109c1288eb12ed6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2688802
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Reviewed-by: Ethan Jimenez <ethavar@microsoft.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Ana Sollano Kim <ansollan@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#856782}
  • Loading branch information
@chromium-wpt-export-bot
Ana SollanoKim authored and chromium-wpt-export-bot committed Feb 23, 2021
1 parent 3cb5f09 commit eec2079
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 0 deletions.
41 changes: 41 additions & 0 deletions css/css-grid/abspos/positioned-grid-items-negative-indices-001-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Positioned grid items reference file</title>
<style>
#grid {
display: grid;
grid: 150px 100px / 200px 300px;
place-items: start;
margin: 1px 2px 3px 4px;
padding: 20px 15px 10px 5px;
border-width: 9px 3px 12px 6px;
border-style: solid;
width: 550px;
height: 400px;
}

#firstItem {
background: magenta;
}

#secondItem {
background: cyan;
}

#thirdItem {
background: yellow;
}

#fourthItem {
background: lime;
}
</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">
<div id="firstItem">First item</div>
<div id="secondItem">Second item</div>
<div id="thirdItem">Third item</div>
<div id="fourthItem">Fourth item</div>
</div>
55 changes: 55 additions & 0 deletions css/css-grid/abspos/positioned-grid-items-negative-indices-001.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
<link rel="match" href="positioned-grid-items-negative-indices-001-ref.html">
<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices.">
<style>
#grid {
display: grid;
grid: 150px 100px / 200px 300px;
margin: 1px 2px 3px 4px;
padding: 20px 15px 10px 5px;
border-width: 9px 3px 12px 6px;
border-style: solid;
width: 550px;
height: 400px;
position: relative;
}

#grid > div {
position: absolute;
}

#firstItem {
background: magenta;
grid-column: -3 / -2;
grid-row: -3 / -2;
}

#secondItem {
background: cyan;
grid-column: -2 / -1;
grid-row: -3 / -2;
}

#thirdItem {
background: yellow;
grid-column: -3 / -2;
grid-row: -2 / -1;
}

#fourthItem {
background: lime;
grid-column: -2 / -1;
grid-row: -2 / -1;
}
</style>

<p>The test passes if it has the same output than the reference.</p>
<div id="grid">
<div id="firstItem">First item</div>
<div id="secondItem">Second item</div>
<div id="thirdItem">Third item</div>
<div id="fourthItem">Fourth item</div>
</div>
57 changes: 57 additions & 0 deletions css/css-grid/abspos/positioned-grid-items-negative-indices-002-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Absolutely positioned items reference file</title>
<style>
#grid {
display: grid;
grid: 50px 50px / 50px 50px;
margin: 1px 2px 3px 4px;
padding: 100px 100px 100px 100px;
border-width: 9px 3px 12px 6px;
border-style: solid;
width: 100px;
height: 100px;
position: relative;
background-color: gray;
}

#grid > div {
position: absolute;
width: 100%;
height: 100%;
}

#firstItem {
background: magenta;
grid-column: auto / 1;
grid-row: auto / 1;
}

#secondItem {
background: cyan;
grid-column: 3 / auto;
grid-row: 3 / auto;
}

#thirdItem {
background: yellow;
grid-column: 5 / 6;
grid-row: 5 / 6;
width: 25% !important;
height: 25% !important;
}

#fourthItem {
background: lime;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
</style>

<p>The test passes if it has the same output than the reference.</p>
<div id="grid">
<div id="firstItem"></div>
<div id="secondItem"></div>
<div id="thirdItem"></div>
<div id="fourthItem"></div>
</div>
60 changes: 60 additions & 0 deletions css/css-grid/abspos/positioned-grid-items-negative-indices-002.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
<link rel="match" href="positioned-grid-items-negative-indices-002-ref.html">
<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices.">
<style>
#grid {
display: grid;
grid: 50px 50px / 50px 50px;
margin: 1px 2px 3px 4px;
padding: 100px 100px 100px 100px;
border-width: 9px 3px 12px 6px;
border-style: solid;
width: 100px;
height: 100px;
position: relative;
background-color: gray;
}

#grid > div {
position: absolute;
width: 100%;
height: 100%;
}

#firstItem {
background: magenta;
grid-column: auto / -3;
grid-row: auto / -3;
}

#secondItem {
background: cyan;
grid-column: -1 / auto;
grid-row: -1 / auto;
}

#thirdItem {
background: yellow;
grid-column: -5 / -6;
grid-row: -5 / -6;
width: 25% !important;
height: 25% !important;
}

#fourthItem {
background: lime;
grid-column: -2 / 3;
grid-row: 2 / -1;
}
</style>

<p>The test passes if it has the same output than the reference.</p>
<div id="grid">
<div id="firstItem"></div>
<div id="secondItem"></div>
<div id="thirdItem"></div>
<div id="fourthItem"></div>
</div>
30 changes: 30 additions & 0 deletions css/css-grid/abspos/positioned-grid-items-negative-indices-003-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
<style>
#grid {
display: grid;
margin: 4px;
padding: 10px;
width: 500px;
height: 130px;
position: relative;
}

#firstItem {
grid-column: 1 / span 2;
background-color: hotpink;
}

#secondItem {
grid-column: 3 / span 6;
background-color: lightblue;
}

</style>

<p>The test passes if there are two tracks in hotpink and 6 in light blue.</p>
<div id="grid">
<div id="firstItem"></div>
<div id="secondItem"></div>
</div>
37 changes: 37 additions & 0 deletions css/css-grid/abspos/positioned-grid-items-negative-indices-003.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
<link rel="match" href="positioned-grid-items-negative-indices-003-ref.html">
<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices in an undefined sized grid.">
<style>
#grid {
display: grid;
margin: 4px;
padding: 10px;
width: 500px;
height: 130px;
position: relative;
}

#absolute {
position: absolute;
width: 100%;
height: 100%;
grid-column: -3 / span 6;
grid-row: 1 / 2;
background-color: lightblue;
}

#item {
grid-column: -5 / span 8;
background-color: hotpink;
}

</style>

<p>The test passes if there are two tracks in hotpink and 6 in light blue.</p>
<div id="grid">
<div id="absolute"></div>
<div id="item"></div>
</div>

0 comments on commit eec2079

Please sign in to comment.