-
Notifications
You must be signed in to change notification settings - Fork 54
/
grid-max-sizing-flex-007-ref.html
134 lines (122 loc) · 4.16 KB
/
grid-max-sizing-flex-007-ref.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: Testing track flex max-sizing with min/max</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1309407">
<style type="text/css">
.grid {
display: grid;
border:1px dashed;
margin: 3px;
}
.rows {
float: left;
grid: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px;
grid-row-gap: 33px;
}
.cols {
display: inline-grid;
grid: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr);
grid-column-gap: 33px;
}
.item:nth-child(1) { background-color: purple; }
.item:nth-child(2) { background-color: blue; }
.w70 { width: 70px; }
.w90 { width: 90px; }
.h70 { height: 70px; }
.h90 { height: 90px; }
</style>
</head><body>
<!--
NOTE: The resulting size (in the relevant axis) is 83px for all tests below
in the "If the free space is an indefinite length" algo here:
https://drafts.csswg.org/css-grid/#algo-flex-tracks
These tests verifies that we then also apply min/max sizes per the spec:
"If using this flex fraction would cause the grid to be smaller than the grid
container’s min-width/height (or larger than the grid container’s max-width/
height), then redo this step, treating the free space as definite and the
available grid space as equal to the grid container’s content box size when
it’s sized to its min-width/height (max-width/height)."
-->
<pre>These grids should look the same:</pre>
<div class="grid rows h70" style="max-height:70px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid rows h70" style="min-height:70px; max-height:60px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid rows h70" style="height:70px">
<div class="item"></div>
<div class="item"></div>
</div>
<br clear="all">
<pre>These grids should look the same:</pre>
<div class="grid rows h90" style="min-height:90px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid rows h90" style="min-height:90px; max-height:60px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid rows h90" style="height:90px">
<div class="item"></div>
<div class="item"></div>
</div>
<br clear="all">
<pre>These grids should look the same:</pre>
<div class="grid cols w70" style="max-width:70px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid cols w70" style="min-width:70px; max-width:60px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid cols w70" style="width:70px">
<div class="item"></div>
<div class="item"></div>
</div>
<pre>These grids should look the same:</pre>
<div class="grid cols w90" style="min-width:90px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid cols w90" style="min-width:90px; max-width:60px">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid cols w90" style="width:90px">
<div class="item"></div>
<div class="item"></div>
</div>
<pre>The first 6 grids should look the same:</pre>
<div class="grid rows" style="grid: 1fr / 30px; height:83px">
<div class="item"></div>
</div>
<div class="grid rows" style="grid: 10px 1fr / 30px; height:83px">
<div class="item" style="grid-row:span 2"></div>
</div>
<div class="grid rows" style="grid: 1fr / 30px; height:83px">
<div class="item"></div>
</div>
<div class="grid rows" style="grid: 1fr 1fr / 30px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 1fr auto / 30px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 10px 1fr / 30px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:90px"></div></div>
</div>
<div class="grid rows" style="grid: 1fr 1fr / 30px; grid-row-gap:10px; height:83px">
<div class="item" style="grid-row:span 2"><div style="height:40px"></div></div>
<div class="item"><div style="height:40px"></div></div>
</div>
</body></html>