4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script>
12 grid-template-columns: 100px 100px;
13 grid-template-rows: 200px 200px;
14 width: -webkit-fit-content;
58 align-self: flex-start;
66 align-self: self-start;
79 <body onload="checkLayout('.grid')">
81 <p>This test checks that the align-self property is applied correctly.</p>
83 <div style="position: relative">
84 <div class="grid" data-expected-width="200" data-expected-height="400">
85 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
86 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
87 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
88 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
89 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
90 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
94 <div style="position: relative">
95 <div class="grid" data-expected-width="200" data-expected-height="400">
96 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
97 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
98 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
99 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
103 <!-- Default alignment and initial values. -->
104 <div style="position: relative">
105 <div class="grid alignItemsCenter" data-expected-width="200" data-expected-height="400">
106 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
107 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
108 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
109 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
113 <div style="position: relative">
114 <div class="grid" data-expected-width="200" data-expected-height="400">
115 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
116 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
117 <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
118 <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
122 <!-- RTL direction (it should not affect the block-flow direction). -->
123 <div style="position: relative">
124 <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
125 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
126 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
127 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
128 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
129 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
130 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
134 <div style="position: relative">
135 <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
136 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
137 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
138 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
139 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
143 <!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
144 <div style="position: relative">
145 <div class="grid" data-expected-width="200" data-expected-height="400">
146 <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
147 <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
148 <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
149 <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
150 <div class="cell alignSelfRight secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
151 <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
155 <div style="position: relative">
156 <div class="grid" data-expected-width="200" data-expected-height="400">
157 <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
158 <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
159 <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
160 <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
164 <!-- Vertical RL writing mode. -->
165 <div style="position: relative">
166 <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
167 <!-- FIXME: Why is offset-x 400? -->
168 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="400" data-offset-y="0" data-expected-width="0" data-expected-height="100"></div>
169 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
170 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
171 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
172 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
173 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
177 <div style="position: relative">
178 <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
179 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
180 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
181 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
182 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
186 <!-- Vertical LR writing mode. -->
187 <div style="position: relative">
188 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
189 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="100"></div>
190 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
191 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
192 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
193 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
194 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
198 <div style="position: relative">
199 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
200 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
201 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
202 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
203 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
207 <!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. -->
208 <div style="position: relative">
209 <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
210 <!-- FIXME: Why is offset-x 400? -->
211 <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="400" data-offset-y="0" data-expected-width="0" data-expected-height="100">
213 <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
214 <div class="item"></div>
216 <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
217 <div class="item"></div>
219 <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40">
220 <div class="item"></div>
222 <div class="cell alignSelfRight secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
223 <div class="item"></div>
225 <div class="cell alignSelfLeft secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
226 <div class="item"></div>
231 <div style="position: relative">
232 <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
233 <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40">
234 <div class="item"></div>
236 <div class="cell alignSelfFlexStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
237 <div class="item"></div>
239 <div class="cell alignSelfSelfStart secondRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40">
240 <div class="item"></div>
242 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
243 <div class="item"></div>
248 <!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. -->
249 <div style="position: relative">
250 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
251 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="100">
253 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
254 <div class="item"></div>
256 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
257 <div class="item"></div>
259 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40">
260 <div class="item"></div>
262 <div class="cell alignSelfRight secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
263 <div class="item"></div>
265 <div class="cell alignSelfLeft secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
266 <div class="item"></div>
271 <div style="position: relative">
272 <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
273 <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40">
274 <div class="item"></div>
276 <div class="cell alignSelfFlexStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
277 <div class="item"></div>
279 <div class="cell alignSelfSelfStart secondRowFirstColumn verticalRL" data-offset-x="380" data-offset-y="0" data-expected-width="20" data-expected-height="40">
280 <div class="item"></div>
282 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
283 <div class="item"></div>