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

Commit c7e571d

Browse files
mregomrego
authored
Merge pull request #1199 from mrego/new-minimum-size-tests
[css-grid] Add more tests for Implied Minimum Size of Grid Items section
2 parents 43d3f34 + 5c38777 commit c7e571d

9 files changed

+365
-0
lines changed

‎css-grid-1/grid-items/grid-minimum-size-grid-items-010.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
grid: 100px / 100px;
20+
}
21+
22+
#test-grid-item-overlapping-green {
23+
background-color: green;
24+
}
25+
26+
#content-200x200 {
27+
width: 200px;
28+
height: 200px;
29+
}
30+
</style>
31+
32+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
33+
34+
<div id="reference-overlapped-red"></div>
35+
<div id="constrained-grid">
36+
<div id="test-grid-item-overlapping-green">
37+
<div id="content-200x200"></div>
38+
</div>
39+
</div>

‎css-grid-1/grid-items/grid-minimum-size-grid-items-011.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
width: 100px;
20+
height: 100px;
21+
grid: minmax(0px, 500px) / minmax(0px, 500px);
22+
}
23+
24+
#test-grid-item-overlapping-green {
25+
background-color: green;
26+
}
27+
28+
#content-200x200 {
29+
width: 200px;
30+
height: 200px;
31+
}
32+
</style>
33+
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
36+
<div id="reference-overlapped-red"></div>
37+
<div id="constrained-grid">
38+
<div id="test-grid-item-overlapping-green">
39+
<div id="content-200x200"></div>
40+
</div>
41+
</div>

‎css-grid-1/grid-items/grid-minimum-size-grid-items-012.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
width: 100px;
20+
height: 100px;
21+
grid: minmax(0px, auto) / minmax(0px, auto);
22+
}
23+
24+
#test-grid-item-overlapping-green {
25+
background-color: green;
26+
}
27+
28+
#content-200x200 {
29+
width: 200px;
30+
height: 200px;
31+
}
32+
</style>
33+
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
36+
<div id="reference-overlapped-red"></div>
37+
<div id="constrained-grid">
38+
<div id="test-grid-item-overlapping-green">
39+
<div id="content-200x200"></div>
40+
</div>
41+
</div>

‎css-grid-1/grid-items/grid-minimum-size-grid-items-013.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="flags" content="ahem">
8+
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
9+
<style>
10+
#reference-overlapped-red {
11+
position: absolute;
12+
background-color: red;
13+
width: 100px;
14+
height: 100px;
15+
z-index: -1;
16+
}
17+
18+
#constrained-grid {
19+
display: grid;
20+
grid: 10px / 10px;
21+
}
22+
23+
#test-grid-item-overlapping-green {
24+
color: green;
25+
background-color: green;
26+
font: 50px/1 Ahem;
27+
justify-self: start;
28+
align-self: start;
29+
}
30+
</style>
31+
32+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
33+
34+
<div id="reference-overlapped-red"></div>
35+
<div id="constrained-grid">
36+
<div id="test-grid-item-overlapping-green">IT E</div>
37+
</div>

‎css-grid-1/grid-items/grid-minimum-size-grid-items-014.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
grid: 10px / 10px;
20+
}
21+
22+
#test-grid-item-overlapping-green {
23+
background-color: green;
24+
justify-self: start;
25+
align-self: start;
26+
}
27+
28+
#content-100x100 {
29+
width: 100px;
30+
height: 100px;
31+
}
32+
</style>
33+
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
36+
<div id="reference-overlapped-red"></div>
37+
<div id="constrained-grid">
38+
<div id="test-grid-item-overlapping-green">
39+
<div id="content-100x100"></div>
40+
</div>
41+
</div>

‎css-grid-1/grid-items/grid-minimum-size-grid-items-015.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item if it spans some not fixed grid tracks.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
grid: 10px auto 10px / 10px auto 10px;
20+
justify-content: start;
21+
}
22+
23+
#test-grid-item-overlapping-green {
24+
background-color: green;
25+
grid-row: span 3;
26+
grid-column: span 3;
27+
}
28+
29+
#content-100x100 {
30+
width: 100px;
31+
height: 100px;
32+
}
33+
</style>
34+
35+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
36+
37+
<div id="reference-overlapped-red"></div>
38+
<div id="constrained-grid">
39+
<div id="test-grid-item-overlapping-green">
40+
<div id="content-100x100"></div>
41+
</div>
42+
</div>
43+

‎css-grid-1/grid-items/grid-minimum-size-grid-items-016.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
grid: 50px 30px 20px / 50px 30px 20px;
20+
}
21+
22+
#test-grid-item-overlapping-green {
23+
background-color: green;
24+
grid-row: span 3;
25+
grid-column: span 3;
26+
}
27+
28+
#content-200x200 {
29+
width: 200px;
30+
height: 200px;
31+
}
32+
</style>
33+
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
36+
<div id="reference-overlapped-red"></div>
37+
<div id="constrained-grid">
38+
<div id="test-grid-item-overlapping-green">
39+
<div id="content-200x200"></div>
40+
</div>
41+
</div>

‎css-grid-1/grid-items/grid-minimum-size-grid-items-017.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
width: 10px;
20+
height: 10px;
21+
grid: minmax(auto, 0px) / minmax(auto, 0px);
22+
}
23+
24+
#test-grid-item-overlapping-green {
25+
background-color: green;
26+
}
27+
28+
#content-100x100 {
29+
width: 100px;
30+
height: 100px;
31+
}
32+
</style>
33+
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
36+
<div id="reference-overlapped-red"></div>
37+
<div id="constrained-grid">
38+
<div id="test-grid-item-overlapping-green">
39+
<div id="content-100x100"></div>
40+
</div>
41+
</div>

‎css-grid-1/grid-items/grid-minimum-size-grid-items-018.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
6+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
7+
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
8+
<style>
9+
#reference-overlapped-red {
10+
position: absolute;
11+
background-color: red;
12+
width: 100px;
13+
height: 100px;
14+
z-index: -1;
15+
}
16+
17+
#constrained-grid {
18+
display: grid;
19+
width: 10px;
20+
height: 10px;
21+
grid: minmax(auto, 500px) / minmax(auto, 500px);
22+
}
23+
24+
#test-grid-item-overlapping-green {
25+
background-color: green;
26+
}
27+
28+
#content-100x100 {
29+
width: 100px;
30+
height: 100px;
31+
}
32+
</style>
33+
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
36+
<div id="reference-overlapped-red"></div>
37+
<div id="constrained-grid">
38+
<div id="test-grid-item-overlapping-green">
39+
<div id="content-100x100"></div>
40+
</div>
41+
</div>

0 commit comments

Comments
 (0)