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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/position-absolute-child.html

Issue 1920453003: [css-flexbox] Implement new abspos handling (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: better comments Created 4 years, 8 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 | « third_party/WebKit/LayoutTests/css3/flexbox/align-absolute-child.html ('k') | third_party/WebKit/LayoutTests/css3/flexbox/position-absolute-children.html » ('j') | third_party/WebKit/Source/core/layout/LayoutBlock.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 7
8 .title { 8 .title {
9 margin-top: 1em; 9 margin-top: 1em;
10 } 10 }
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
71 { 71 {
72 if (writingMode.indexOf('horizontal') != -1) 72 if (writingMode.indexOf('horizontal') != -1)
73 return (flexFlow.indexOf('row') != -1) ? 'width' : 'height'; 73 return (flexFlow.indexOf('row') != -1) ? 'width' : 'height';
74 return (flexFlow.indexOf('row') != -1) ? 'height' : 'width'; 74 return (flexFlow.indexOf('row') != -1) ? 'height' : 'width';
75 } 75 }
76 76
77 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; 77 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
78 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; 78 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
79 var directions = ['ltr', 'rtl']; 79 var directions = ['ltr', 'rtl'];
80 80
81 // In each group, you have 3x3 tests. The first 3 test "regular" flexbox,
82 // the second test justify-content: space-between, and the final three test
83 // justify-content: center; align-items: center;
84 // In each of these groups, the absolute item is in position 0, 1, 2.
85 // crossAxisOffset is used for the absolute-positioned child.
eae 2016/04/25 02:37:28 Thanks for adding this description, really helps!
81 var expectations = { 86 var expectations = {
82 'horizontal-tb': { 87 'horizontal-tb': {
83 row: { 88 row: {
84 ltr: [ 89 ltr: [
85 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 90 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
86 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 91 { offsets: [0, 0, 150], sizes: [150, 0, 450] },
87 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 92 { offsets: [0, 200, 0], sizes: [200, 400, 0] },
88 { offsets: [0, 0, 560] }, 93 { offsets: [0, 0, 560] },
89 { offsets: [0, 560, 560] }, 94 { offsets: [0, 0, 560] },
90 { offsets: [0, 560, 600] }, 95 { offsets: [0, 560, 0] },
91 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 96 { offsets: [30, 10, 50], crossAxisOffset: 30 },
92 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 97 { offsets: [10, 30, 50], crossAxisOffset: 30 },
93 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 98 { offsets: [10, 50, 30], crossAxisOffset: 30 },
94 ], 99 ],
95 rtl: [ 100 rtl: [
96 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 101 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
97 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 102 { offsets: [450, 600, 0], sizes: [150, 0, 450] },
98 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 103 { offsets: [400, 0, 600], sizes: [200, 400, 0] },
99 { offsets: [580, 560, 0] }, 104 { offsets: [580, 560, 0] },
100 { offsets: [560, 20, 0] }, 105 { offsets: [560, 580, 0] },
101 { offsets: [560, 0, -20] }, 106 { offsets: [560, 0, 580] },
102 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 107 { offsets: [30, 50, 10], crossAxisOffset: 30 },
103 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 108 { offsets: [50, 30, 10], crossAxisOffset: 30 },
104 { offsets: [50, 10, -30], crossAxisOffset: 0 }, 109 { offsets: [50, 10, 30], crossAxisOffset: 30 },
105 ], 110 ],
106 }, 111 },
107 column: { 112 column: {
108 ltr: [ 113 ltr: [
109 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 114 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
110 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 115 { offsets: [0, 0, 30], sizes: [30, 0, 90] },
111 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 116 { offsets: [0, 40, 0], sizes: [40, 80, 0] },
112 { offsets: [0, 0, 80] }, 117 { offsets: [0, 0, 80] },
113 { offsets: [0, 80, 80] }, 118 { offsets: [0, 0, 80] },
114 { offsets: [0, 80, 120] }, 119 { offsets: [0, 80, 0] },
115 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 120 { offsets: [30, 10, 50], crossAxisOffset: 30 },
116 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 121 { offsets: [10, 30, 50], crossAxisOffset: 30 },
117 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 122 { offsets: [10, 50, 30], crossAxisOffset: 30 },
118 ], 123 ],
119 rtl: [ 124 rtl: [
120 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 125 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
121 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 126 { offsets: [0, 0, 30], sizes: [30, 0, 90] },
122 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 127 { offsets: [0, 40, 0], sizes: [40, 80, 0] },
123 { offsets: [0, 0, 80] }, 128 { offsets: [0, 0, 80] },
124 { offsets: [0, 80, 80] }, 129 { offsets: [0, 0, 80] },
125 { offsets: [0, 80, 120] }, 130 { offsets: [0, 80, 0] },
126 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 131 { offsets: [30, 10, 50], crossAxisOffset: 30 },
127 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 132 { offsets: [10, 30, 50], crossAxisOffset: 30 },
128 { offsets: [10, 50, 90], crossAxisOffset: 60 }, 133 { offsets: [10, 50, 30], crossAxisOffset: 30 },
129 ], 134 ],
130 }, 135 },
131 'row-reverse': { 136 'row-reverse': {
132 ltr: [ 137 ltr: [
133 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 138 { offsets: [0, 360, 0], sizes: [0, 240, 360] },
134 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 139 { offsets: [450, 0, 0], sizes: [150, 0, 450] },
135 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 140 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
136 { offsets: [600, 560, 0] }, 141 { offsets: [0, 560, 0] },
137 { offsets: [560, 40, 0] },
138 { offsets: [560, 0, 0] }, 142 { offsets: [560, 0, 0] },
139 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 143 { offsets: [560, 0, 0] },
140 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 144 { offsets: [30, 50, 10], crossAxisOffset: 30 },
141 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 145 { offsets: [50, 30, 10], crossAxisOffset: 30 },
146 { offsets: [50, 10, 30], crossAxisOffset: 30 },
142 ], 147 ],
143 rtl: [ 148 rtl: [
144 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 149 { offsets: [600, 0, 240], sizes: [0, 240, 360] },
145 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 150 { offsets: [0, 600, 150], sizes: [150, 0, 450] },
146 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 151 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
147 { offsets: [-20, 0, 560] }, 152 { offsets: [580, 0, 560] },
148 { offsets: [0, 540, 560] }, 153 { offsets: [0, 580, 560] },
149 { offsets: [0, 560, 580] }, 154 { offsets: [0, 560, 580] },
150 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, 155 { offsets: [30, 10, 50], crossAxisOffset: 30 },
151 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 156 { offsets: [10, 30, 50], crossAxisOffset: 30 },
152 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 157 { offsets: [10, 50, 30], crossAxisOffset: 30 },
153 ], 158 ],
154 }, 159 },
155 'column-reverse': { 160 'column-reverse': {
156 ltr: [ 161 ltr: [
157 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 162 { offsets: [0, 72, 0], sizes: [0, 48, 72] },
158 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 163 { offsets: [90, 0, 0], sizes: [30, 0, 90] },
159 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 164 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
160 { offsets: [120, 80, 0] }, 165 { offsets: [0, 80, 0] },
161 { offsets: [80, 40, 0] },
162 { offsets: [80, 0, 0] }, 166 { offsets: [80, 0, 0] },
163 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 167 { offsets: [80, 0, 0] },
164 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 168 { offsets: [30, 50, 10], crossAxisOffset: 30 },
165 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 169 { offsets: [50, 30, 10], crossAxisOffset: 30 },
170 { offsets: [50, 10, 30], crossAxisOffset: 30 },
166 ], 171 ],
167 rtl: [ 172 rtl: [
168 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 173 { offsets: [0, 72, 0], sizes: [0, 48, 72] },
169 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 174 { offsets: [90, 0, 0], sizes: [30, 0, 90] },
170 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 175 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
171 { offsets: [120, 80, 0] }, 176 { offsets: [0, 80, 0] },
172 { offsets: [80, 40, 0] },
173 { offsets: [80, 0, 0] }, 177 { offsets: [80, 0, 0] },
174 { offsets: [90, 50, 10], crossAxisOffset: 60 }, 178 { offsets: [80, 0, 0] },
175 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 179 { offsets: [30, 50, 10], crossAxisOffset: 30 },
176 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 180 { offsets: [50, 30, 10], crossAxisOffset: 30 },
181 { offsets: [50, 10, 30], crossAxisOffset: 30 },
177 ], 182 ],
178 }, 183 },
179 }, 184 },
180 'vertical-rl': { 185 'vertical-rl': {
181 row: { 186 row: {
182 // The same as horizontal-tb + column. 187 // The same as horizontal-tb + column.
183 ltr: [ 188 ltr: [
184 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 189 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
185 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 190 { offsets: [0, 0, 30], sizes: [30, 0, 90] },
186 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 191 { offsets: [0, 40, 0], sizes: [40, 80, 0] },
187 { offsets: [0, 0, 80] }, 192 { offsets: [0, 0, 80] },
188 { offsets: [0, 80, 80] }, 193 { offsets: [0, 0, 80] },
189 { offsets: [0, 80, 120] }, 194 { offsets: [0, 80, 0] },
190 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 195 { offsets: [30, 10, 50], crossAxisOffset: 30 },
191 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 196 { offsets: [10, 30, 50], crossAxisOffset: 30 },
192 { offsets: [10, 50, 90], crossAxisOffset: 60 }, 197 { offsets: [10, 50, 30], crossAxisOffset: 30 },
193 ], 198 ],
194 rtl: [ 199 rtl: [
195 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 200 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
196 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 201 { offsets: [90, 120, 0], sizes: [30, 0, 90] },
197 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 202 { offsets: [80, 0, 120], sizes: [40, 80, 0] },
198 { offsets: [100, 80, 0] }, 203 { offsets: [100, 80, 0] },
199 { offsets: [80, 20, 0] }, 204 { offsets: [80, 100, 0] },
200 { offsets: [80, 0, -20] }, 205 { offsets: [80, 0, 100] },
201 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 206 { offsets: [30, 50, 10], crossAxisOffset: 30 },
202 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 207 { offsets: [50, 30, 10], crossAxisOffset: 30 },
203 { offsets: [50, 10, -30], crossAxisOffset: 60 }, 208 { offsets: [50, 10, 30], crossAxisOffset: 30 },
204 ], 209 ],
205 }, 210 },
206 column: { 211 column: {
207 // The same as horizontal-tb + row. 212 // The same as horizontal-tb + row.
208 ltr: [ 213 ltr: [
209 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 214 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
210 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 215 { offsets: [450, 600, 0], sizes: [150, 0, 450] },
211 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 216 { offsets: [400, 0, 600], sizes: [200, 400, 0] },
212 { offsets: [580, 560, 0] }, 217 { offsets: [580, 560, 0] },
213 { offsets: [560, 20, 0] }, 218 { offsets: [560, 580, 0] },
214 { offsets: [560, 0, -20] }, 219 { offsets: [560, 0, 580] },
215 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 220 { offsets: [30, 50, 10], crossAxisOffset: 30 },
216 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 221 { offsets: [50, 30, 10], crossAxisOffset: 30 },
217 { offsets: [50, 10, -30], crossAxisOffset: 0 }, 222 { offsets: [50, 10, 30], crossAxisOffset: 30 },
218 ], 223 ],
219 rtl: [ 224 rtl: [
220 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 225 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
221 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 226 { offsets: [450, 600, 0], sizes: [150, 0, 450] },
222 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 227 { offsets: [400, 0, 600], sizes: [200, 400, 0] },
223 { offsets: [580, 560, 0] }, 228 { offsets: [580, 560, 0] },
224 { offsets: [560, 20, 0] }, 229 { offsets: [560, 580, 0] },
225 { offsets: [560, 0, -20] }, 230 { offsets: [560, 0, 580] },
226 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 231 { offsets: [30, 50, 10], crossAxisOffset: 30 },
227 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 232 { offsets: [50, 30, 10], crossAxisOffset: 30 },
228 { offsets: [50, 10, -30], crossAxisOffset: 60 }, 233 { offsets: [50, 10, 30], crossAxisOffset: 30 },
229 ], 234 ],
230 }, 235 },
231 'row-reverse': { 236 'row-reverse': {
232 ltr: [ 237 ltr: [
233 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 238 { offsets: [0, 72, 0], sizes: [0, 48, 72] },
234 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 239 { offsets: [90, 0, 0], sizes: [30, 0, 90] },
235 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 240 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
236 { offsets: [120, 80, 0] }, 241 { offsets: [0, 80, 0] },
237 { offsets: [80, 40, 0] },
238 { offsets: [80, 0, 0] }, 242 { offsets: [80, 0, 0] },
239 { offsets: [90, 50, 10], crossAxisOffset: 60 }, 243 { offsets: [80, 0, 0] },
240 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 244 { offsets: [30, 50, 10], crossAxisOffset: 30 },
241 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 245 { offsets: [50, 30, 10], crossAxisOffset: 30 },
246 { offsets: [50, 10, 30], crossAxisOffset: 30 },
242 ], 247 ],
243 rtl: [ 248 rtl: [
244 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 249 { offsets: [120, 0, 48], sizes: [0, 48, 72] },
245 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 250 { offsets: [0, 120, 30], sizes: [30, 0, 90] },
246 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 251 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
247 { offsets: [-20, 0, 80] }, 252 { offsets: [100, 0, 80] },
248 { offsets: [0, 60, 80] }, 253 { offsets: [0, 100, 80] },
249 { offsets: [0, 80, 100] }, 254 { offsets: [0, 80, 100] },
250 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, 255 { offsets: [30, 10, 50], crossAxisOffset: 30 },
251 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 256 { offsets: [10, 30, 50], crossAxisOffset: 30 },
252 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 257 { offsets: [10, 50, 30], crossAxisOffset: 30 },
253 ], 258 ],
254 }, 259 },
255 'column-reverse': { 260 'column-reverse': {
256 ltr: [ 261 ltr: [
257 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 262 { offsets: [600, 0, 240], sizes: [0, 240, 360] },
258 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 263 { offsets: [0, 600, 150], sizes: [150, 0, 450] },
259 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 264 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
260 { offsets: [-20, 0, 560] }, 265 { offsets: [580, 0, 560] },
261 { offsets: [0, 540, 560] }, 266 { offsets: [0, 580, 560] },
262 { offsets: [0, 560, 580] }, 267 { offsets: [0, 560, 580] },
263 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, 268 { offsets: [30, 10, 50], crossAxisOffset: 30 },
264 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 269 { offsets: [10, 30, 50], crossAxisOffset: 30 },
265 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 270 { offsets: [10, 50, 30], crossAxisOffset: 30 },
266 ], 271 ],
267 rtl: [ 272 rtl: [
268 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 273 { offsets: [600, 0, 240], sizes: [0, 240, 360] },
269 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 274 { offsets: [0, 600, 150], sizes: [150, 0, 450] },
270 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 275 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
271 { offsets: [-20, 0, 560] }, 276 { offsets: [580, 0, 560] },
272 { offsets: [0, 540, 560] }, 277 { offsets: [0, 580, 560] },
273 { offsets: [0, 560, 580] }, 278 { offsets: [0, 560, 580] },
274 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, 279 { offsets: [30, 10, 50], crossAxisOffset: 30 },
275 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 280 { offsets: [10, 30, 50], crossAxisOffset: 30 },
276 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 281 { offsets: [10, 50, 30], crossAxisOffset: 30 },
277 ], 282 ],
278 } 283 }
279 }, 284 },
280 'vertical-lr': { 285 'vertical-lr': {
281 row: { 286 row: {
282 // The same as horizontal-tb + column. 287 // The same as horizontal-tb + column.
283 ltr: [ 288 ltr: [
284 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 289 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
285 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 290 { offsets: [0, 0, 30], sizes: [30, 0, 90] },
286 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 291 { offsets: [0, 40, 0], sizes: [40, 80, 0] },
287 { offsets: [0, 0, 80] }, 292 { offsets: [0, 0, 80] },
288 { offsets: [0, 80, 80] }, 293 { offsets: [0, 0, 80] },
289 { offsets: [0, 80, 120] }, 294 { offsets: [0, 80, 0] },
290 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 295 { offsets: [30, 10, 50], crossAxisOffset: 30 },
291 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 296 { offsets: [10, 30, 50], crossAxisOffset: 30 },
292 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 297 { offsets: [10, 50, 30], crossAxisOffset: 30 },
293 ], 298 ],
294 rtl: [ 299 rtl: [
295 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 300 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
296 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 301 { offsets: [90, 120, 0], sizes: [30, 0, 90] },
297 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 302 { offsets: [80, 0, 120], sizes: [40, 80, 0] },
298 { offsets: [100, 80, 0] }, 303 { offsets: [100, 80, 0] },
299 { offsets: [80, 20, 0] }, 304 { offsets: [80, 100, 0] },
300 { offsets: [80, 0, -20] }, 305 { offsets: [80, 0, 100] },
301 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 306 { offsets: [30, 50, 10], crossAxisOffset: 30 },
302 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 307 { offsets: [50, 30, 10], crossAxisOffset: 30 },
303 { offsets: [50, 10, -30], crossAxisOffset: 0 }, 308 { offsets: [50, 10, 30], crossAxisOffset: 30 },
304 ], 309 ],
305 }, 310 },
306 column: { 311 column: {
307 ltr: [ 312 ltr: [
308 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 313 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
309 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 314 { offsets: [0, 0, 150], sizes: [150, 0, 450] },
310 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 315 { offsets: [0, 200, 0], sizes: [200, 400, 0] },
311 { offsets: [0, 0, 560] }, 316 { offsets: [0, 0, 560] },
312 { offsets: [0, 560, 560] }, 317 { offsets: [0, 0, 560] },
313 { offsets: [0, 560, 600] }, 318 { offsets: [0, 560, 0] },
314 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 319 { offsets: [30, 10, 50], crossAxisOffset: 30 },
315 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 320 { offsets: [10, 30, 50], crossAxisOffset: 30 },
316 { offsets: [10, 50, 90], crossAxisOffset: 0 }, 321 { offsets: [10, 50, 30], crossAxisOffset: 30 },
317 ], 322 ],
318 rtl: [ 323 rtl: [
319 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, 324 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
320 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, 325 { offsets: [0, 0, 150], sizes: [150, 0, 450] },
321 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, 326 { offsets: [0, 200, 0], sizes: [200, 400, 0] },
322 { offsets: [0, 0, 560] }, 327 { offsets: [0, 0, 560] },
323 { offsets: [0, 560, 560] }, 328 { offsets: [0, 0, 560] },
324 { offsets: [0, 560, 600] }, 329 { offsets: [0, 560, 0] },
325 { offsets: [10, 10, 50], crossAxisOffset: 60 }, 330 { offsets: [30, 10, 50], crossAxisOffset: 30 },
326 { offsets: [10, 50, 50], crossAxisOffset: 60 }, 331 { offsets: [10, 30, 50], crossAxisOffset: 30 },
327 { offsets: [10, 50, 90], crossAxisOffset: 60 }, 332 { offsets: [10, 50, 30], crossAxisOffset: 30 },
328 ], 333 ],
329 }, 334 },
330 'row-reverse': { 335 'row-reverse': {
331 ltr: [ 336 ltr: [
332 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, 337 { offsets: [0, 72, 0], sizes: [0, 48, 72] },
333 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, 338 { offsets: [90, 0, 0], sizes: [30, 0, 90] },
334 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, 339 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
335 { offsets: [120, 80, 0] }, 340 { offsets: [0, 80, 0] },
336 { offsets: [80, 40, 0] },
337 { offsets: [80, 0, 0] }, 341 { offsets: [80, 0, 0] },
338 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 342 { offsets: [80, 0, 0] },
339 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 343 { offsets: [30, 50, 10], crossAxisOffset: 30 },
340 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 344 { offsets: [50, 30, 10], crossAxisOffset: 30 },
345 { offsets: [50, 10, 30], crossAxisOffset: 30 },
341 ], 346 ],
342 rtl: [ 347 rtl: [
343 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, 348 { offsets: [120, 0, 48], sizes: [0, 48, 72] },
344 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, 349 { offsets: [0, 120, 30], sizes: [30, 0, 90] },
345 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, 350 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
346 { offsets: [-20, 0, 80] }, 351 { offsets: [100, 0, 80] },
347 { offsets: [0, 60, 80] }, 352 { offsets: [0, 100, 80] },
348 { offsets: [0, 80, 100] }, 353 { offsets: [0, 80, 100] },
349 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, 354 { offsets: [30, 10, 50], crossAxisOffset: 30 },
350 { offsets: [10, 10, 50], crossAxisOffset: 0 }, 355 { offsets: [10, 30, 50], crossAxisOffset: 30 },
351 { offsets: [10, 50, 50], crossAxisOffset: 0 }, 356 { offsets: [10, 50, 30], crossAxisOffset: 30 },
352 ], 357 ],
353 }, 358 },
354 'column-reverse': { 359 'column-reverse': {
355 ltr: [ 360 ltr: [
356 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 361 { offsets: [0, 360, 0], sizes: [0, 240, 360] },
357 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 362 { offsets: [450, 0, 0], sizes: [150, 0, 450] },
358 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 363 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
359 { offsets: [600, 560, 0] }, 364 { offsets: [0, 560, 0] },
360 { offsets: [560, 40, 0] },
361 { offsets: [560, 0, 0] }, 365 { offsets: [560, 0, 0] },
362 { offsets: [90, 50, 10], crossAxisOffset: 0 }, 366 { offsets: [560, 0, 0] },
363 { offsets: [50, 50, 10], crossAxisOffset: 0 }, 367 { offsets: [30, 50, 10], crossAxisOffset: 30 },
364 { offsets: [50, 10, 10], crossAxisOffset: 0 }, 368 { offsets: [50, 30, 10], crossAxisOffset: 30 },
369 { offsets: [50, 10, 30], crossAxisOffset: 30 },
365 ], 370 ],
366 rtl: [ 371 rtl: [
367 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, 372 { offsets: [0, 360, 0], sizes: [0, 240, 360] },
368 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, 373 { offsets: [450, 0, 0], sizes: [150, 0, 450] },
369 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, 374 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
370 { offsets: [600, 560, 0] }, 375 { offsets: [0, 560, 0] },
371 { offsets: [560, 40, 0] },
372 { offsets: [560, 0, 0] }, 376 { offsets: [560, 0, 0] },
373 { offsets: [90, 50, 10], crossAxisOffset: 60 }, 377 { offsets: [560, 0, 0] },
374 { offsets: [50, 50, 10], crossAxisOffset: 60 }, 378 { offsets: [30, 50, 10], crossAxisOffset: 30 },
375 { offsets: [50, 10, 10], crossAxisOffset: 60 }, 379 { offsets: [50, 30, 10], crossAxisOffset: 30 },
380 { offsets: [50, 10, 30], crossAxisOffset: 30 },
376 ], 381 ],
377 }, 382 },
378 } 383 }
379 }; 384 };
380 385
381 function setFlexboxSize(flexbox, flexDirection) 386 function setFlexboxSize(flexbox, flexDirection)
382 { 387 {
383 if ('width' == flexDirection) { 388 if ('width' == flexDirection) {
384 flexbox.style.width = '600px'; 389 flexbox.style.width = '600px';
385 } else { 390 } else {
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after
492 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection); 497 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection);
493 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec tion); 498 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec tion);
494 }) 499 })
495 }) 500 })
496 }) 501 })
497 502
498 </script> 503 </script>
499 504
500 </body> 505 </body>
501 </html> 506 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/css3/flexbox/align-absolute-child.html ('k') | third_party/WebKit/LayoutTests/css3/flexbox/position-absolute-children.html » ('j') | third_party/WebKit/Source/core/layout/LayoutBlock.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698