Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(105)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-align.html

Issue 297483005: [CSS Grid Layout] Implementation of the align-self property in grid. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixed build error. Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-align-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script>
6 <style>
7 body {
8 margin: 0;
9 }
10
11 .grid {
12 grid-template-columns: 100px 100px;
13 grid-template-rows: 200px 200px;
14 width: -webkit-fit-content;
15 margin-bottom: 20px;
16 }
17
18 .cell {
19 width: 20px;
20 height: 40px;
21 }
22
23 .item {
24 width: 8px;
25 height: 16px;
26 background: black;
27 }
28
29 .alignSelfAuto {
30 align-self: auto;
31 }
32
33 .alignSelfStretch {
34 align-self: stretch;
35 }
36
37 .alignSelfStart {
38 align-self: start;
39 }
40
41 .alignSelfEnd {
42 align-self: end;
43 }
44
45 .alignSelfCenter {
46 align-self: center;
47 }
48
49 .alignSelfRight {
50 align-self: right;
51 }
52
53 .alignSelfLeft {
54 align-self: left;
55 }
56
57 .alignSelfFlexStart {
58 align-self: flex-start;
59 }
60
61 .alignSelfFlexEnd {
62 align-self: flex-end;
63 }
64
65 .alignSelfSelfStart {
66 align-self: self-start;
67 }
68
69 .alignSelfSelfEnd {
70 align-self: self-end;
71 }
72
73 .alignItemsCenter {
74 align-items: center;
75 }
76
77 </style>
78 </head>
79 <body onload="checkLayout('.grid')">
80
81 <p>This test checks that the align-self property is applied correctly.</p>
82
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="10 0" 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>
91 </div>
92 </div>
93
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"></di v>
100 </div>
101 </div>
102
103 <!-- Default alignment and initial values. -->
104 <div style="position: relative">
105 <div class="grid alignItemsCenter" data-expected-width="200" data-expected-h eight="400">
106 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da ta-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"></di v>
110 </div>
111 </div>
112
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" da ta-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>
119 </div>
120 </div>
121
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-heig ht="400">
125 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" dat a-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
126 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="10 0" 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="1 00" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div >
130 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="10 0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
131 </div>
132 </div>
133
134 <div style="position: relative">
135 <div class="grid directionRTL" data-expected-width="200" data-expected-heig ht="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"></di v>
138 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x ="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></di v>
139 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x= "100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></d iv>
140 </div>
141 </div>
142
143 <!-- RTL direction (it should not affect the block-flow) with opposite direction s 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-off set-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-o ffset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height= "40"></div>
149 <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" dat a-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height ="40"></div>
150 <div class="cell alignSelfRight secondRowSecondColumn directionRTL" dat a-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heig ht="40"></div>
151 <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data -offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heigh t="40"></div>
152 </div>
153 </div>
154
155 <div style="position: relative">
156 <div class="grid" data-expected-width="200" data-expected-height="400">
157 <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" dat a-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-hei ght="40"></div>
159 <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-hei ght="40"></div>
160 <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" d ata-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-he ight="40"></div>
161 </div>
162 </div>
163
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" da ta-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="18 0" 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>
174 </div>
175 </div>
176
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="20 0" 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"></d iv>
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>
183 </div>
184 </div>
185
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="29 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
193 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="20 0" 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>
195 </div>
196 </div>
197
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="18 0" 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"></di v>
204 </div>
205 </div>
206
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">
212 </div>
213 <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-of fset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height=" 40">
214 <div class="item"></div>
215 </div>
216 <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offs et-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40 ">
217 <div class="item"></div>
218 </div>
219 <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-o ffset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40 ">
220 <div class="item"></div>
221 </div>
222 <div class="cell alignSelfRight secondRowSecondColumn verticalLR" data-o ffset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height= "40">
223 <div class="item"></div>
224 </div>
225 <div class="cell alignSelfLeft secondRowSecondColumn verticalLR" data-of fset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height=" 40">
226 <div class="item"></div>
227 </div>
228 </div>
229 </div>
230
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-o ffset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="4 0">
234 <div class="item"></div>
235 </div>
236 <div class="cell alignSelfFlexStart firstRowSecondColumn verticalLR" dat a-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-heig ht="40">
237 <div class="item"></div>
238 </div>
239 <div class="cell alignSelfSelfStart secondRowFirstColumn verticalLR" dat a-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height=" 40">
240 <div class="item"></div>
241 </div>
242 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data -offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-heigh t="40">
243 <div class="item"></div>
244 </div>
245 </div>
246 </div>
247
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">
252 </div>
253 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of fset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40 ">
254 <div class="item"></div>
255 </div>
256 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs et-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40 ">
257 <div class="item"></div>
258 </div>
259 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o ffset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="4 0">
260 <div class="item"></div>
261 </div>
262 <div class="cell alignSelfRight secondRowSecondColumn verticalRL" data-o ffset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height= "40">
263 <div class="item"></div>
264 </div>
265 <div class="cell alignSelfLeft secondRowSecondColumn verticalRL" data-of fset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height=" 40">
266 <div class="item"></div>
267 </div>
268 </div>
269 </div>
270
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-o ffset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="4 0">
274 <div class="item"></div>
275 </div>
276 <div class="cell alignSelfFlexStart firstRowSecondColumn verticalRL" dat a-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height ="40">
277 <div class="item"></div>
278 </div>
279 <div class="cell alignSelfSelfStart secondRowFirstColumn verticalRL" dat a-offset-x="380" data-offset-y="0" data-expected-width="20" data-expected-height ="40">
280 <div class="item"></div>
281 </div>
282 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data -offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-heigh t="40">
283 <div class="item"></div>
284 </div>
285 </div>
286 </div>
287
288 </body>
289 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-align-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698