Skip to content
This repository was archived by the owner on Dec 18, 2018. It is now read-only.

[css-grid] Add more tests for Implied Minimum Size of Grid Items section #1199

Merged
merged 2 commits into from
Feb 15, 2017
Merged

[css-grid] Add more tests for Implied Minimum Size of Grid Items section #1199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
283588f
[css-grid] Add more tests for Implied Minimum Size of Grid Items section
mrego Feb 14, 2017
5c38777
[css-grid] Add author information to Implied Minimum Size of Grid Ite…
mrego Feb 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-010.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
grid: 100px / 100px;
}

#test-grid-item-overlapping-green {
background-color: green;
}

#content-200x200 {
width: 200px;
height: 200px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>
41 changes: 41 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-011.html
View file
Open in desktop
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: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
width: 100px;
height: 100px;
grid: minmax(0px, 500px) / minmax(0px, 500px);
}

#test-grid-item-overlapping-green {
background-color: green;
}

#content-200x200 {
width: 200px;
height: 200px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>
41 changes: 41 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-012.html
View file
Open in desktop
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: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
width: 100px;
height: 100px;
grid: minmax(0px, auto) / minmax(0px, auto);
}

#test-grid-item-overlapping-green {
background-color: green;
}

#content-200x200 {
width: 200px;
height: 200px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>
37 changes: 37 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-013.html
View file
Open in desktop
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: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
grid: 10px / 10px;
}

#test-grid-item-overlapping-green {
color: green;
background-color: green;
font: 50px/1 Ahem;
justify-self: start;
align-self: start;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">IT E</div>
</div>
41 changes: 41 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-014.html
View file
Open in desktop
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: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
grid: 10px / 10px;
}

#test-grid-item-overlapping-green {
background-color: green;
justify-self: start;
align-self: start;
}

#content-100x100 {
width: 100px;
height: 100px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>
43 changes: 43 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-015.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item if it spans some not fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
grid: 10px auto 10px / 10px auto 10px;
justify-content: start;
}

#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}

#content-100x100 {
width: 100px;
height: 100px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

41 changes: 41 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-016.html
View file
Open in desktop
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: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
grid: 50px 30px 20px / 50px 30px 20px;
}

#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}

#content-200x200 {
width: 200px;
height: 200px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>
41 changes: 41 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-017.html
View file
Open in desktop
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: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
width: 10px;
height: 10px;
grid: minmax(auto, 0px) / minmax(auto, 0px);
}

#test-grid-item-overlapping-green {
background-color: green;
}

#content-100x100 {
width: 100px;
height: 100px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>
41 changes: 41 additions & 0 deletions css-grid-1/grid-items/grid-minimum-size-grid-items-018.html
View file
Open in desktop
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: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}

#constrained-grid {
display: grid;
width: 10px;
height: 10px;
grid: minmax(auto, 500px) / minmax(auto, 500px);
}

#test-grid-item-overlapping-green {
background-color: green;
}

#content-100x100 {
width: 100px;
height: 100px;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>