Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GridNG] Handle negative indices for out of flow items #27599

Merged
merged 1 commit into from Feb 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>