forked from WebKit/WebKit-http
-
Notifications
You must be signed in to change notification settings - Fork 4
/
min-width-height-auto-and-margins.html
181 lines (156 loc) · 8.83 KB
/
min-width-height-auto-and-margins.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<style>
.columnsSmallerThanContentBox { grid-template-columns: 80px; }
.columnsSameAsContentBox { grid-template-columns: 100px; }
.columnsBiggerThanContentBox { grid-template-columns: 120px; }
.columnsSameAsMarginBox { grid-template-columns: 140px; }
.columnsBiggerThanMarginBox { grid-template-columns: 150px; }
.rowsSmallerThanContentBox { grid-template-rows: 20px; }
.rowsEqualAsContentBox { grid-template-rows: 25px; }
.rowsBiggerThanContentBox { grid-template-rows: 50px; }
.rowsSameAsMarginBox { grid-template-rows: 65px; }
.rowsBiggerThanMarginBox { grid-template-rows: 100px; }
.container {
position: relative;
width: 200px;
height: 100px;
border: 1px solid black;
}
.item {
font: 25px/1 Ahem;
margin: 20px;
background-color: blue;
}
.fitContentOnlyHeight { width: auto; align-items: start; }
.fitContentOnlyWidth { height: auto; justify-items: start; }
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">
<p>This test checks min-width|height auto does not interfere in margins computation, properly placing items inside their grid area.</p>
<!-- Checking min-width: auto logic -->
<p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="40" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | column of same size than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid columnsSameAsContentBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="60" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid columnsBiggerThanContentBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="80" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | column of same size as margin-box, row bigger than margin-box</p>
<div class="container">
<div class="grid columnsSameAsMarginBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
</div>
</div>
<!-- Checking shrink-to-fit in row-axis -->
<p>Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</div>
</div>
<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
</div>
</div>
<!-- Checking stretch in column-axis -->
<p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p>
<div class="container">
<div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="0">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | row of same size than content-box, column bigger than margin-box</p>
<div class="container">
<div class="grid rowsSameAsContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p>
<div class="container">
<div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="10">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | row of same size as margin-box, column bigger than margin-box</p>
<div class="container">
<div class="grid rowsSameAsMarginBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</div>
</div>
<p>Stretching allowed in both axis | row bigger than margin-box, column bigger column margin-box</p>
<div class="container">
<div class="grid rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
</div>
</div>
<!-- Checking min-height: auto logic -->
<p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</div>
</div>
<p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</div>
</div>
<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</div>
</div>
<p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</div>
</div>
<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box</p>
<div class="container">
<div class="grid fit-content fitContentOnlyHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
</div>
</div>