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
200
201
202
203
204
|
<!DOCTYPE html>
<title>CSS Grid: Grid container baseline</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
<link rel="help" href="https://crbug.com/234191">
<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>
<link href="/css/support/grid.css" rel="stylesheet">
<link href="/css/support/alignment.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { margin: 0; }
.container {
position: relative;
font: 10px/1 Ahem;
border: 5px solid;
width: 470px;
}
.grid {
display: inline-grid;
grid-template-columns: 50px 50px;
width: 150px;
background-color: transparent;
position: relative;
}
.twoRows { grid-template-rows: 50px 50px; }
.threeRows { grid-template-rows: 50px 50px 50px; }
.empty {
border-color: black;
border-style: solid;
margin: 15px 0px 30px;
border-width: 5px 0px 10px;
padding: 10px 0px 20px;
}
.item {
height: 25px;
border-color: black;
border-style: solid;
}
.style1 {
border-width: 5px 0px 10px;
padding: 10px 0px 20px;
}
.style2 {
border-width: 10px 0px 5px;
padding: 20px 0px 10px;
margin-top: 10px;
}
.style3 {
border-width: 10px 0px 20px;
padding: 5px 0px 10px;
margin-top: 20px;
}
.bothRowFirstColumn, .secondRowSecondColumn {
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-color: pink;
}
.firstRowBothColumn, .secondRowBothColumn {
margin-top: 15px;
margin-bottom: 15px;
background-color: green;
}
</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, container'); })">
<div id="log"></div>
<p>
The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
</p>
<p>
This case shows 3 items located along the first row and in different columns, so grid baseline is computed using the one located at first column (blue item).
</p>
<div class="container" data-expected-width="480" data-expected-height="120">
<div class="grid" data-offset-x="0" data-offset-y="20">
<div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
<div class="item style3 firstRowThirdColumn" data-offset-x="100" data-offset-y="20"></div>
</div>
<div class="grid" data-offset-x="160" data-offset-y="10">
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
<div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
<div class="item style3 firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
</div>
<div class="grid" data-offset-x="320" data-offset-y="0">
<div class="item style1 firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
<div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
</div>
</div>
<p>
This case shows 3 items located along the first row and in different columns, so such item is used to determine the grid's baseline instead of using the grid order.
</p>
<div class="container" data-expected-width="480" data-expected-height="120">
<div class="grid" data-offset-x="0" data-offset-y="0">
<div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
<div class="item style3 firstRowThirdColumn alignSelfBaseline" data-offset-x="100" data-offset-y="20"></div>
</div>
<div class="grid" data-offset-x="160" data-offset-y="0">
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
<div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
<div class="item style3 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="20"></div>
</div>
<div class="grid" data-offset-x="320" data-offset-y="20">
<div class="item style1 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="0"></div>
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
<div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
</div>
</div>
<p>
This case shows 3 items' areas intersecting the first row and first column, so the dom order must be used to determine each grid's baseline.
</p>
<div class="container" data-expected-width="480" data-expected-height="165">
<div class="grid twoRows" data-offset-x="0" data-offset-y="40">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
</div>
<div class="grid twoRows" data-offset-x="160" data-offset-y="0">
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
</div>
<div class="grid twoRows" data-offset-x="320" data-offset-y="55">
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
</div>
</div>
<p>
This case shows 3 items' areas intersecting the first row and first column, but one of the items participates in baseline alignment, so such item is used to determine the grid's baseline instead of using the dom order.
</p>
<div class="container" data-expected-width="480" data-expected-height="165">
<div class="grid twoRows" data-offset-x="0" data-offset-y="55">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn alignSelfBaseline" style="width: 100px; height: 20px;" data-offset-x="0" data-offset-y="15"></div>
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
</div>
<div class="grid twoRows" data-offset-x="160" data-offset-y="40">
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
<div class="firstRowFirstColumn alignSelfBaseline" style="width: 50px; height: 50px;" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
</div>
<div class="grid twoRows" data-offset-x="320" data-offset-y="0">
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="bothRowFirstColumn alignSelfBaseline" style="width: 40px; height: 80px;" data-offset-x="0" data-offset-y="10"></div>
</div>
</div>
<p>
This case shows one of the grids with no items, hence its baseline must be synthesized.
</p>
<div class="container" data-expected-width="480" data-expected-height="250">
<div class="grid twoRows" data-offset-x="0" data-offset-y="140">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
</div>
<div class="grid twoRows" data-offset-x="160" data-offset-y="100">
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
</div>
<div class="grid empty twoRows" data-offset-x="320" data-offset-y="15">
</div>
</div>
<p>
This case shows one of the grids with no items in the first row, hence its baseline must be synthesized.
</p>
<div class="container" data-expected-width="480" data-expected-height="300">
<div class="grid twoRows" data-offset-x="0" data-offset-y="190">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
</div>
<div class="grid twoRows" data-offset-x="160" data-offset-y="150">
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
</div>
<div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60"></div>
<div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div>
<div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75"></div>
</div>
</div>
</body>
|
