Skip to content

Commit 283588f

Browse files
mregomrego
committed
[css-grid] Add more tests for Implied Minimum Size of Grid Items section
This adds more coverage for that spec section: https://drafts.csswg.org/css-grid/#min-size-auto The examples in the tests were discussed in w3c/csswg-drafts#283.
1 parent 43d3f34 commit 283588f

9 files changed

+356
-0
lines changed

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

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

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

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

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

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

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
5+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
6+
<meta name="flags" content="ahem">
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+
color: green;
24+
background-color: green;
25+
font: 50px/1 Ahem;
26+
justify-self: start;
27+
align-self: start;
28+
}
29+
</style>
30+
31+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
32+
33+
<div id="reference-overlapped-red"></div>
34+
<div id="constrained-grid">
35+
<div id="test-grid-item-overlapping-green">IT E</div>
36+
</div>

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

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

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Minimum size of grid items</title>
4+
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
5+
<link rel="match" href="../../css21/reference/ref-filled-green-100px-square.xht">
6+
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item if it spans some not fixed grid tracks.">
7+
<style>
8+
#reference-overlapped-red {
9+
position: absolute;
10+
background-color: red;
11+
width: 100px;
12+
height: 100px;
13+
z-index: -1;
14+
}
15+
16+
#constrained-grid {
17+
display: grid;
18+
grid: 10px auto 10px / 10px auto 10px;
19+
justify-content: start;
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-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>
42+

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

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

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

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

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

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

0 commit comments

Comments
 (0)