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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
|
<!DOCTYPE html>
<title>CSS Grid: grid gutters as percentage.</title>
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
<meta name="assert" content="Check that when 'height' is indefinite, row gaps should be based on grid's 'auto' height."/>
<link rel="stylesheet" href="/css/support/grid.css"/>
<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/>
<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
<style>
body { margin: 0; }
.grid { font: 10px/1 Ahem; position: relative; }
.widthAuto { width: auto; }
.heightAuto { height: auto; }
.width400 { width: 400px; }
.width200 { width: 200px; }
.height200 { height: 200px; }
.height100 { height: 100px; }
.columns100-100 { grid-template-columns: 100px 100px; }
.rows50-50 { grid-template-rows: 50px 50px; }
.autoRepeat { grid-template: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); }
.columnGap10Percent { grid-column-gap: 10% }
.rowGap20Percent { grid-row-gap: 20% }
.positioned { position: absolute; width: 100%; height: 100%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script type="text/javascript">
setup({ explicit_done: true });
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
<div id="log"></div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
<div class="width400">
<div class="grid columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="10">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="10">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
</div>
</div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
<div class="width400">
<div class="grid fit-content heightAuto columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="20">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="80" data-expected-height="20">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
</div>
</div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
<div class="width400">
<div class="grid fit-content widthAuto columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="10">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="10">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
</div>
</div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
<div class="width400">
<div class="grid fit-content columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="20">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="80" data-expected-height="20">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
</div>
</div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
<div class="width400">
<div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
<div class="width400">
<div class="grid fit-content heightAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
<div class="width400">
<div class="grid fit-content widthAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, since the container's specified inline size is not enough, first column's width is reduced and height increased to let its content to fit.</p>
<div class="width400">
<div class="grid width200 height100 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="40">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="40">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60" data-expected-width="80" data-expected-height="40">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="60" data-expected-width="100" data-expected-height="40">XXXXX X XX</div>
</div>
</div>
<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
<div class="width400">
<div class="grid width400 height200 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="80">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0" data-expected-width="180" data-expected-height="80">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="120" data-expected-width="180" data-expected-height="80">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="180" data-expected-height="80">XXXXX X XX</div>
</div>
</div>
<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
<div class="width400">
<div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and fit.</p>
<div class="width400">
<div class="grid width400 height200 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.</p>
<div class="width400">
<div class="grid fit-content autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="70">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="64" data-expected-width="100" data-expected-height="20">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="64" data-expected-width="80" data-expected-height="20">XXXXX X XX</div>
</div>
</div>
<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows all of them to fit.</p>
<div class="">
<div class="grid width400 height200 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="firstRowThirdColumn" data-offset-x="280" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
<div class="secondRowThirdColumn" data-offset-x="280" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows only 1 repetition.</p>
<div class="">
<div class="grid width200 height100 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XX XXX X X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="30">X XX XXX X</div>
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="80" data-expected-height="30">XXXXX X XX</div>
</div>
</div>
<p>Grid with positioned items. Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
<div class="width400">
<div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
<div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="140" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
<p>Grid with positioned items. Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
<div class="">
<div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
<div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X XX X</div>
<div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX X X</div>
<div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0" data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
<div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
</div>
</div>
</body>
|
