| OLD | NEW |
|---|
| 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 Loading... |
| 71 .justify-content-space-around { | 71 .justify-content-space-around { |
| 72 justify-content: space-around; | 72 justify-content: space-around; |
| 73 } | 73 } |
| 74 </style> | 74 </style> |
| 75 <script src="../../resources/testharness.js"></script> | 75 <script src="../../resources/testharness.js"></script> |
| 76 <script src="../../resources/testharnessreport.js"></script> | 76 <script src="../../resources/testharnessreport.js"></script> |
| 77 <script src="../../resources/check-layout-th.js"></script> | 77 <script src="../../resources/check-layout-th.js"></script> |
| 78 <body onload="checkLayout('.flexbox')"> | 78 <body onload="checkLayout('.flexbox')"> |
| 79 <div id=log></div> | 79 <div id=log></div> |
| 80 <script> | 80 <script> |
| 81 // Each flexbox has two abspos children - one is 40x10, the other 10x20. |
| 82 // The flexbox itself is 80x20. |
| 83 // All that is flipped for vertical flows. |
| 81 var expectations = { | 84 var expectations = { |
| 82 'horizontal-tb': { | 85 'horizontal-tb': { |
| 83 'row': { | 86 'row': { |
| 84 'ltr': { | 87 'ltr': { |
| 85 'flex-start': { | 88 'flex-start': { |
| 86 'child1': [0, 0], | 89 'child1': [0, 0], |
| 87 'child2': [0, 0], | 90 'child2': [0, 0], |
| 88 }, | 91 }, |
| 89 'flex-end': { | 92 'flex-end': { |
| 90 'child1': [80, 0], | 93 'child1': [40, 0], |
| 91 'child2': [80, 0], | 94 'child2': [70, 0], |
| 92 }, | 95 }, |
| 93 'center': { | 96 'center': { |
| 94 'child1': [40, 0], | 97 'child1': [20, 0], |
| 95 'child2': [40, 0], | 98 'child2': [35, 0], |
| 96 }, | 99 }, |
| 97 'space-between': { | 100 'space-between': { |
| 98 'child1': [0, 0], | 101 'child1': [0, 0], |
| 99 'child2': [0, 0], | 102 'child2': [0, 0], |
| 100 }, | 103 }, |
| 101 'space-around': { | 104 'space-around': { |
| 102 'child1': [40, 0], | 105 'child1': [20, 0], |
| 103 'child2': [40, 0], | 106 'child2': [35, 0], |
| 104 }, | 107 }, |
| 105 }, | 108 }, |
| 106 'rtl': { | 109 'rtl': { |
| 107 'flex-start': { | 110 'flex-start': { |
| 108 'child1': [40, 0], | 111 'child1': [40, 0], |
| 109 'child2': [70, 0], | 112 'child2': [70, 0], |
| 110 }, | 113 }, |
| 111 'flex-end': { | 114 'flex-end': { |
| 112 'child1': [-40, 0], | 115 'child1': [0, 0], |
| 113 'child2': [-10, 0], | 116 'child2': [0, 0], |
| 114 }, | 117 }, |
| 115 'center': { | 118 'center': { |
| 116 'child1': [0, 0], | 119 'child1': [20, 0], |
| 117 'child2': [30, 0], | 120 'child2': [35, 0], |
| 118 }, | 121 }, |
| 119 'space-between': { | 122 'space-between': { |
| 120 'child1': [40, 0], | 123 'child1': [40, 0], |
| 121 'child2': [70, 0], | 124 'child2': [70, 0], |
| 122 }, | 125 }, |
| 123 'space-around': { | 126 'space-around': { |
| 124 'child1': [0, 0], | 127 'child1': [20, 0], |
| 125 'child2': [30, 0], | 128 'child2': [35, 0], |
| 126 }, | 129 }, |
| 127 }, | 130 }, |
| 128 }, | 131 }, |
| 129 'column': { | 132 'column': { |
| 130 'ltr': { | 133 'ltr': { |
| 131 'flex-start': { | 134 'flex-start': { |
| 132 'child1': [0, 0], | 135 'child1': [0, 0], |
| 133 'child2': [0, 0], | 136 'child2': [0, 0], |
| 134 }, | 137 }, |
| 135 'flex-end': { | 138 'flex-end': { |
| 136 'child1': [0, 80], | 139 'child1': [0, 40], |
| 137 'child2': [0, 80], | 140 'child2': [0, 70], |
| 138 }, | 141 }, |
| 139 'center': { | 142 'center': { |
| 140 'child1': [0, 40], | 143 'child1': [0, 20], |
| 141 'child2': [0, 40], | 144 'child2': [0, 35], |
| 142 }, | 145 }, |
| 143 'space-between': { | 146 'space-between': { |
| 144 'child1': [0, 0], | 147 'child1': [0, 0], |
| 145 'child2': [0, 0], | 148 'child2': [0, 0], |
| 146 }, | 149 }, |
| 147 'space-around': { | 150 'space-around': { |
| 148 'child1': [0, 40], | 151 'child1': [0, 20], |
| 149 'child2': [0, 40], | 152 'child2': [0, 35], |
| 150 }, | 153 }, |
| 151 }, | 154 }, |
| 152 'rtl': { | 155 'rtl': { |
| 153 'flex-start': { | 156 'flex-start': { |
| 154 'child1': [10, 0], | 157 'child1': [10, 0], |
| 155 'child2': [0, 0], | 158 'child2': [0, 0], |
| 156 }, | 159 }, |
| 157 'flex-end': { | 160 'flex-end': { |
| 158 'child1': [10, 80], | 161 'child1': [10, 40], |
| 159 'child2': [0, 80], | 162 'child2': [0, 70], |
| 160 }, | 163 }, |
| 161 'center': { | 164 'center': { |
| 162 'child1': [10, 40], | 165 'child1': [10, 20], |
| 163 'child2': [0, 40], | 166 'child2': [0, 35], |
| 164 }, | 167 }, |
| 165 'space-between': { | 168 'space-between': { |
| 166 'child1': [10, 0], | 169 'child1': [10, 0], |
| 167 'child2': [0, 0], | 170 'child2': [0, 0], |
| 168 }, | 171 }, |
| 169 'space-around': { | 172 'space-around': { |
| 170 'child1': [10, 40], | 173 'child1': [10, 20], |
| 171 'child2': [0, 40], | 174 'child2': [0, 35], |
| 172 }, | 175 }, |
| 173 }, | 176 }, |
| 174 }, | 177 }, |
| 175 'row-reverse': { | 178 'row-reverse': { |
| 176 'ltr': { | 179 'ltr': { |
| 177 'flex-start': { | 180 'flex-start': { |
| 178 'child1': [80, 0], | 181 'child1': [0, 0], |
| 179 'child2': [80, 0], | 182 'child2': [0, 0], |
| 183 }, |
| 184 'flex-end': { |
| 185 'child1': [40, 0], |
| 186 'child2': [70, 0], |
| 187 }, |
| 188 'center': { |
| 189 'child1': [20, 0], |
| 190 'child2': [35, 0], |
| 191 }, |
| 192 'space-between': { |
| 193 'child1': [0, 0], |
| 194 'child2': [0, 0], |
| 195 }, |
| 196 'space-around': { |
| 197 'child1': [20, 0], |
| 198 'child2': [35, 0], |
| 199 }, |
| 200 }, |
| 201 'rtl': { |
| 202 'flex-start': { |
| 203 'child1': [40, 0], |
| 204 'child2': [70, 0], |
| 180 }, | 205 }, |
| 181 'flex-end': { | 206 'flex-end': { |
| 182 'child1': [0, 0], | 207 'child1': [0, 0], |
| 183 'child2': [0, 0], | 208 'child2': [0, 0], |
| 184 }, | 209 }, |
| 185 'center': { | 210 'center': { |
| 186 'child1': [40, 0], | 211 'child1': [20, 0], |
| 187 'child2': [40, 0], | 212 'child2': [35, 0], |
| 188 }, | 213 }, |
| 189 'space-between': { | 214 'space-between': { |
| 190 'child1': [80, 0], | |
| 191 'child2': [80, 0], | |
| 192 }, | |
| 193 'space-around': { | |
| 194 'child1': [40, 0], | |
| 195 'child2': [40, 0], | |
| 196 }, | |
| 197 }, | |
| 198 'rtl': { | |
| 199 'flex-start': { | |
| 200 'child1': [-40, 0], | |
| 201 'child2': [-10, 0], | |
| 202 }, | |
| 203 'flex-end': { | |
| 204 'child1': [40, 0], | 215 'child1': [40, 0], |
| 205 'child2': [70, 0], | 216 'child2': [70, 0], |
| 206 }, | 217 }, |
| 207 'center': { | |
| 208 'child1': [0, 0], | |
| 209 'child2': [30, 0], | |
| 210 }, | |
| 211 'space-between': { | |
| 212 'child1': [-40, 0], | |
| 213 'child2': [-10, 0], | |
| 214 }, | |
| 215 'space-around': { | 218 'space-around': { |
| 216 'child1': [0, 0], | 219 'child1': [20, 0], |
| 217 'child2': [30, 0], | 220 'child2': [35, 0], |
| 218 }, | 221 }, |
| 219 }, | 222 }, |
| 220 }, | 223 }, |
| 221 'column-reverse': { | 224 'column-reverse': { |
| 222 'ltr': { | 225 'ltr': { |
| 223 'flex-start': { | 226 'flex-start': { |
| 224 'child1': [0, 80], | |
| 225 'child2': [0, 80], | |
| 226 }, | |
| 227 'flex-end': { | |
| 228 'child1': [0, 0], | 227 'child1': [0, 0], |
| 229 'child2': [0, 0], | 228 'child2': [0, 0], |
| 230 }, | 229 }, |
| 230 'flex-end': { |
| 231 'child1': [0, 40], |
| 232 'child2': [0, 70], |
| 233 }, |
| 231 'center': { | 234 'center': { |
| 232 'child1': [0, 40], | 235 'child1': [0, 20], |
| 233 'child2': [0, 40], | 236 'child2': [0, 35], |
| 234 }, | 237 }, |
| 235 'space-between': { | 238 'space-between': { |
| 236 'child1': [0, 80], | 239 'child1': [0, 0], |
| 237 'child2': [0, 80], | 240 'child2': [0, 0], |
| 238 }, | 241 }, |
| 239 'space-around': { | 242 'space-around': { |
| 240 'child1': [0, 40], | 243 'child1': [0, 20], |
| 241 'child2': [0, 40], | 244 'child2': [0, 35], |
| 242 }, | 245 }, |
| 243 }, | 246 }, |
| 244 'rtl': { | 247 'rtl': { |
| 245 'flex-start': { | 248 'flex-start': { |
| 246 'child1': [10, 80], | |
| 247 'child2': [0, 80], | |
| 248 }, | |
| 249 'flex-end': { | |
| 250 'child1': [10, 0], | 249 'child1': [10, 0], |
| 251 'child2': [0, 0], | 250 'child2': [0, 0], |
| 252 }, | 251 }, |
| 252 'flex-end': { |
| 253 'child1': [10, 40], |
| 254 'child2': [0, 70], |
| 255 }, |
| 253 'center': { | 256 'center': { |
| 254 'child1': [10, 40], | 257 'child1': [10, 20], |
| 255 'child2': [0, 40], | 258 'child2': [0, 35], |
| 256 }, | 259 }, |
| 257 'space-between': { | 260 'space-between': { |
| 258 'child1': [10, 80], | 261 'child1': [10, 0], |
| 259 'child2': [0, 80], | 262 'child2': [0, 0], |
| 260 }, | 263 }, |
| 261 'space-around': { | 264 'space-around': { |
| 262 'child1': [10, 40], | 265 'child1': [10, 20], |
| 263 'child2': [0, 40], | 266 'child2': [0, 35], |
| 264 }, | 267 }, |
| 265 }, | 268 }, |
| 266 }, | 269 }, |
| 267 }, | 270 }, |
| 268 'vertical-rl': { | 271 'vertical-rl': { |
| 269 'row': { | 272 'row': { |
| 270 'ltr': { | 273 'ltr': { |
| 271 'flex-start': { | 274 'flex-start': { |
| 272 'child1': [10, 0], | 275 'child1': [10, 0], |
| 273 'child2': [0, 0], | 276 'child2': [0, 0], |
| 274 }, | 277 }, |
| 275 'flex-end': { | 278 'flex-end': { |
| 276 'child1': [10, 80], | 279 'child1': [10, 40], |
| 277 'child2': [0, 80], | 280 'child2': [0, 70], |
| 278 }, | 281 }, |
| 279 'center': { | 282 'center': { |
| 280 'child1': [10, 40], | 283 'child1': [10, 20], |
| 281 'child2': [0, 40], | 284 'child2': [0, 35], |
| 282 }, | 285 }, |
| 283 'space-between': { | 286 'space-between': { |
| 284 'child1': [10, 0], | 287 'child1': [10, 0], |
| 285 'child2': [0, 0], | 288 'child2': [0, 0], |
| 286 }, | 289 }, |
| 287 'space-around': { | 290 'space-around': { |
| 288 'child1': [10, 40], | 291 'child1': [10, 20], |
| 289 'child2': [0, 40], | 292 'child2': [0, 35], |
| 290 }, | 293 }, |
| 291 }, | 294 }, |
| 292 'rtl': { | 295 'rtl': { |
| 293 'flex-start': { | 296 'flex-start': { |
| 294 'child1': [10, 40], | 297 'child1': [10, 40], |
| 295 'child2': [0, 70], | 298 'child2': [0, 70], |
| 296 }, | 299 }, |
| 297 'flex-end': { | 300 'flex-end': { |
| 298 'child1': [10, -40], | 301 'child1': [10, 0], |
| 299 'child2': [0, -10], | 302 'child2': [0, 0], |
| 300 }, | 303 }, |
| 301 'center': { | 304 'center': { |
| 302 'child1': [10, 0], | 305 'child1': [10, 20], |
| 303 'child2': [0, 30], | 306 'child2': [0, 35], |
| 304 }, | 307 }, |
| 305 'space-between': { | 308 'space-between': { |
| 306 'child1': [10, 40], | 309 'child1': [10, 40], |
| 307 'child2': [0, 70], | 310 'child2': [0, 70], |
| 308 }, | 311 }, |
| 309 'space-around': { | 312 'space-around': { |
| 310 'child1': [10, 0], | 313 'child1': [10, 20], |
| 311 'child2': [0, 30], | 314 'child2': [0, 35], |
| 312 }, | 315 }, |
| 313 }, | 316 }, |
| 314 }, | 317 }, |
| 315 'column': { | 318 'column': { |
| 316 'ltr': { | 319 'ltr': { |
| 317 'flex-start': { | 320 'flex-start': { |
| 318 'child1': [40, 0], | 321 'child1': [40, 0], |
| 319 'child2': [70, 0], | 322 'child2': [70, 0], |
| 320 }, | 323 }, |
| 321 'flex-end': { | 324 'flex-end': { |
| 322 'child1': [-40, 0], | 325 'child1': [0, 0], |
| 323 'child2': [-10, 0], | 326 'child2': [0, 0], |
| 324 }, | 327 }, |
| 325 'center': { | 328 'center': { |
| 326 'child1': [0, 0], | 329 'child1': [20, 0], |
| 327 'child2': [30, 0], | 330 'child2': [35, 0], |
| 328 }, | 331 }, |
| 329 'space-between': { | 332 'space-between': { |
| 330 'child1': [40, 0], | 333 'child1': [40, 0], |
| 331 'child2': [70, 0], | 334 'child2': [70, 0], |
| 332 }, | 335 }, |
| 333 'space-around': { | 336 'space-around': { |
| 334 'child1': [0, 0], | 337 'child1': [20, 0], |
| 335 'child2': [30, 0], | 338 'child2': [35, 0], |
| 336 }, | 339 }, |
| 337 }, | 340 }, |
| 338 'rtl': { | 341 'rtl': { |
| 339 'flex-start': { | 342 'flex-start': { |
| 340 'child1': [40, 10], | 343 'child1': [40, 10], |
| 341 'child2': [70, 0], | 344 'child2': [70, 0], |
| 342 }, | 345 }, |
| 343 'flex-end': { | 346 'flex-end': { |
| 344 'child1': [-40, 10], | 347 'child1': [0, 10], |
| 345 'child2': [-10, 0], | 348 'child2': [0, 0], |
| 346 }, | 349 }, |
| 347 'center': { | 350 'center': { |
| 348 'child1': [0, 10], | 351 'child1': [20, 10], |
| 349 'child2': [30, 0], | 352 'child2': [35, 0], |
| 350 }, | 353 }, |
| 351 'space-between': { | 354 'space-between': { |
| 352 'child1': [40, 10], | 355 'child1': [40, 10], |
| 353 'child2': [70, 0], | 356 'child2': [70, 0], |
| 354 }, | 357 }, |
| 355 'space-around': { | 358 'space-around': { |
| 356 'child1': [0, 10], | 359 'child1': [20, 10], |
| 357 'child2': [30, 0], | 360 'child2': [35, 0], |
| 358 }, | 361 }, |
| 359 }, | 362 }, |
| 360 }, | 363 }, |
| 361 'row-reverse': { | 364 'row-reverse': { |
| 362 'ltr': { | 365 'ltr': { |
| 363 'flex-start': { | 366 'flex-start': { |
| 364 'child1': [10, 80], | 367 'child1': [10, 0], |
| 365 'child2': [0, 80], | 368 'child2': [0, 0], |
| 369 }, |
| 370 'flex-end': { |
| 371 'child1': [10, 40], |
| 372 'child2': [0, 70], |
| 373 }, |
| 374 'center': { |
| 375 'child1': [10, 20], |
| 376 'child2': [0, 35], |
| 377 }, |
| 378 'space-between': { |
| 379 'child1': [10, 0], |
| 380 'child2': [0, 0], |
| 381 }, |
| 382 'space-around': { |
| 383 'child1': [10, 20], |
| 384 'child2': [0, 35], |
| 385 }, |
| 386 }, |
| 387 'rtl': { |
| 388 'flex-start': { |
| 389 'child1': [10, 40], |
| 390 'child2': [0, 70], |
| 366 }, | 391 }, |
| 367 'flex-end': { | 392 'flex-end': { |
| 368 'child1': [10, 0], | 393 'child1': [10, 0], |
| 369 'child2': [0, 0], | 394 'child2': [0, 0], |
| 370 }, | 395 }, |
| 371 'center': { | 396 'center': { |
| 372 'child1': [10, 40], | 397 'child1': [10, 20], |
| 373 'child2': [0, 40], | 398 'child2': [0, 35], |
| 374 }, | 399 }, |
| 375 'space-between': { | 400 'space-between': { |
| 376 'child1': [10, 80], | |
| 377 'child2': [0, 80], | |
| 378 }, | |
| 379 'space-around': { | |
| 380 'child1': [10, 40], | |
| 381 'child2': [0, 40], | |
| 382 }, | |
| 383 }, | |
| 384 'rtl': { | |
| 385 'flex-start': { | |
| 386 'child1': [10, -40], | |
| 387 'child2': [0, -10], | |
| 388 }, | |
| 389 'flex-end': { | |
| 390 'child1': [10, 40], | 401 'child1': [10, 40], |
| 391 'child2': [0, 70], | 402 'child2': [0, 70], |
| 392 }, | 403 }, |
| 393 'center': { | |
| 394 'child1': [10, 0], | |
| 395 'child2': [0, 30], | |
| 396 }, | |
| 397 'space-between': { | |
| 398 'child1': [10, -40], | |
| 399 'child2': [0, -10], | |
| 400 }, | |
| 401 'space-around': { | 404 'space-around': { |
| 402 'child1': [10, 0], | 405 'child1': [10, 20], |
| 403 'child2': [0, 30], | 406 'child2': [0, 35], |
| 404 }, | 407 }, |
| 405 }, | 408 }, |
| 406 }, | 409 }, |
| 407 'column-reverse': { | 410 'column-reverse': { |
| 408 'ltr': { | 411 'ltr': { |
| 409 'flex-start': { | 412 'flex-start': { |
| 410 'child1': [-40, 0], | |
| 411 'child2': [-10, 0], | |
| 412 }, | |
| 413 'flex-end': { | |
| 414 'child1': [40, 0], | 413 'child1': [40, 0], |
| 415 'child2': [70, 0], | 414 'child2': [70, 0], |
| 416 }, | 415 }, |
| 416 'flex-end': { |
| 417 'child1': [0, 0], |
| 418 'child2': [0, 0], |
| 419 }, |
| 417 'center': { | 420 'center': { |
| 418 'child1': [0, 0], | 421 'child1': [20, 0], |
| 419 'child2': [30, 0], | 422 'child2': [35, 0], |
| 420 }, | 423 }, |
| 421 'space-between': { | 424 'space-between': { |
| 422 'child1': [-40, 0], | 425 'child1': [40, 0], |
| 423 'child2': [-10, 0], | 426 'child2': [70, 0], |
| 424 }, | 427 }, |
| 425 'space-around': { | 428 'space-around': { |
| 426 'child1': [0, 0], | 429 'child1': [20, 0], |
| 427 'child2': [30, 0], | 430 'child2': [35, 0], |
| 428 }, | 431 }, |
| 429 }, | 432 }, |
| 430 'rtl': { | 433 'rtl': { |
| 431 'flex-start': { | 434 'flex-start': { |
| 432 'child1': [-40, 10], | |
| 433 'child2': [-10, 0], | |
| 434 }, | |
| 435 'flex-end': { | |
| 436 'child1': [40, 10], | 435 'child1': [40, 10], |
| 437 'child2': [70, 0], | 436 'child2': [70, 0], |
| 438 }, | 437 }, |
| 438 'flex-end': { |
| 439 'child1': [0, 10], |
| 440 'child2': [0, 0], |
| 441 }, |
| 439 'center': { | 442 'center': { |
| 440 'child1': [0, 10], | 443 'child1': [20, 10], |
| 441 'child2': [30, 0], | 444 'child2': [35, 0], |
| 442 }, | 445 }, |
| 443 'space-between': { | 446 'space-between': { |
| 444 'child1': [-40, 10], | 447 'child1': [40, 10], |
| 445 'child2': [-10, 0], | 448 'child2': [70, 0], |
| 446 }, | 449 }, |
| 447 'space-around': { | 450 'space-around': { |
| 448 'child1': [0, 10], | 451 'child1': [20, 10], |
| 449 'child2': [30, 0], | 452 'child2': [35, 0], |
| 450 }, | 453 }, |
| 451 }, | 454 }, |
| 452 }, | 455 }, |
| 453 }, | 456 }, |
| 454 'vertical-lr': { | 457 'vertical-lr': { |
| 455 'row': { | 458 'row': { |
| 456 'ltr': { | 459 'ltr': { |
| 457 'flex-start': { | 460 'flex-start': { |
| 458 'child1': [0, 0], | 461 'child1': [0, 0], |
| 459 'child2': [0, 0], | 462 'child2': [0, 0], |
| 460 }, | 463 }, |
| 461 'flex-end': { | 464 'flex-end': { |
| 462 'child1': [0, 80], | 465 'child1': [0, 40], |
| 463 'child2': [0, 80], | 466 'child2': [0, 70], |
| 464 }, | 467 }, |
| 465 'center': { | 468 'center': { |
| 466 'child1': [0, 40], | 469 'child1': [0, 20], |
| 467 'child2': [0, 40], | 470 'child2': [0, 35], |
| 468 }, | 471 }, |
| 469 'space-between': { | 472 'space-between': { |
| 470 'child1': [0, 0], | 473 'child1': [0, 0], |
| 471 'child2': [0, 0], | 474 'child2': [0, 0], |
| 472 }, | 475 }, |
| 473 'space-around': { | 476 'space-around': { |
| 474 'child1': [0, 40], | 477 'child1': [0, 20], |
| 475 'child2': [0, 40], | 478 'child2': [0, 35], |
| 476 }, | 479 }, |
| 477 }, | 480 }, |
| 478 'rtl': { | 481 'rtl': { |
| 479 'flex-start': { | 482 'flex-start': { |
| 480 'child1': [0, 40], | 483 'child1': [0, 40], |
| 481 'child2': [0, 70], | 484 'child2': [0, 70], |
| 482 }, | 485 }, |
| 483 'flex-end': { | 486 'flex-end': { |
| 484 'child1': [0, -40], | 487 'child1': [0, 0], |
| 485 'child2': [0, -10], | 488 'child2': [0, 0], |
| 486 }, | 489 }, |
| 487 'center': { | 490 'center': { |
| 488 'child1': [0, 0], | 491 'child1': [0, 20], |
| 489 'child2': [0, 30], | 492 'child2': [0, 35], |
| 490 }, | 493 }, |
| 491 'space-between': { | 494 'space-between': { |
| 492 'child1': [0, 40], | 495 'child1': [0, 40], |
| 493 'child2': [0, 70], | 496 'child2': [0, 70], |
| 494 }, | 497 }, |
| 495 'space-around': { | 498 'space-around': { |
| 496 'child1': [0, 0], | 499 'child1': [0, 20], |
| 497 'child2': [0, 30], | 500 'child2': [0, 35], |
| 498 }, | 501 }, |
| 499 }, | 502 }, |
| 500 }, | 503 }, |
| 501 'column': { | 504 'column': { |
| 502 'ltr': { | 505 'ltr': { |
| 503 'flex-start': { | 506 'flex-start': { |
| 504 'child1': [0, 0], | 507 'child1': [0, 0], |
| 505 'child2': [0, 0], | 508 'child2': [0, 0], |
| 506 }, | 509 }, |
| 507 'flex-end': { | 510 'flex-end': { |
| 508 'child1': [80, 0], | 511 'child1': [40, 0], |
| 509 'child2': [80, 0], | 512 'child2': [70, 0], |
| 510 }, | 513 }, |
| 511 'center': { | 514 'center': { |
| 512 'child1': [40, 0], | 515 'child1': [20, 0], |
| 513 'child2': [40, 0], | 516 'child2': [35, 0], |
| 514 }, | 517 }, |
| 515 'space-between': { | 518 'space-between': { |
| 516 'child1': [0, 0], | 519 'child1': [0, 0], |
| 517 'child2': [0, 0], | 520 'child2': [0, 0], |
| 518 }, | 521 }, |
| 519 'space-around': { | 522 'space-around': { |
| 520 'child1': [40, 0], | 523 'child1': [20, 0], |
| 521 'child2': [40, 0], | 524 'child2': [35, 0], |
| 522 }, | 525 }, |
| 523 }, | 526 }, |
| 524 'rtl': { | 527 'rtl': { |
| 525 'flex-start': { | 528 'flex-start': { |
| 526 'child1': [0, 10], | 529 'child1': [0, 10], |
| 527 'child2': [0, 0], | 530 'child2': [0, 0], |
| 528 }, | 531 }, |
| 529 'flex-end': { | 532 'flex-end': { |
| 530 'child1': [80, 10], | 533 'child1': [40, 10], |
| 531 'child2': [80, 0], | 534 'child2': [70, 0], |
| 532 }, | 535 }, |
| 533 'center': { | 536 'center': { |
| 534 'child1': [40, 10], | 537 'child1': [20, 10], |
| 535 'child2': [40, 0], | 538 'child2': [35, 0], |
| 536 }, | 539 }, |
| 537 'space-between': { | 540 'space-between': { |
| 538 'child1': [0, 10], | 541 'child1': [0, 10], |
| 539 'child2': [0, 0], | 542 'child2': [0, 0], |
| 540 }, | 543 }, |
| 541 'space-around': { | 544 'space-around': { |
| 542 'child1': [40, 10], | 545 'child1': [20, 10], |
| 543 'child2': [40, 0], | 546 'child2': [35, 0], |
| 544 }, | 547 }, |
| 545 }, | 548 }, |
| 546 }, | 549 }, |
| 547 'row-reverse': { | 550 'row-reverse': { |
| 548 'ltr': { | 551 'ltr': { |
| 549 'flex-start': { | 552 'flex-start': { |
| 550 'child1': [0, 80], | 553 'child1': [0, 0], |
| 551 'child2': [0, 80], | 554 'child2': [0, 0], |
| 555 }, |
| 556 'flex-end': { |
| 557 'child1': [0, 40], |
| 558 'child2': [0, 70], |
| 559 }, |
| 560 'center': { |
| 561 'child1': [0, 20], |
| 562 'child2': [0, 35], |
| 563 }, |
| 564 'space-between': { |
| 565 'child1': [0, 0], |
| 566 'child2': [0, 0], |
| 567 }, |
| 568 'space-around': { |
| 569 'child1': [0, 20], |
| 570 'child2': [0, 35], |
| 571 }, |
| 572 }, |
| 573 'rtl': { |
| 574 'flex-start': { |
| 575 'child1': [0, 40], |
| 576 'child2': [0, 70], |
| 552 }, | 577 }, |
| 553 'flex-end': { | 578 'flex-end': { |
| 554 'child1': [0, 0], | 579 'child1': [0, 0], |
| 555 'child2': [0, 0], | 580 'child2': [0, 0], |
| 556 }, | 581 }, |
| 557 'center': { | 582 'center': { |
| 558 'child1': [0, 40], | 583 'child1': [0, 20], |
| 559 'child2': [0, 40], | 584 'child2': [0, 35], |
| 560 }, | 585 }, |
| 561 'space-between': { | 586 'space-between': { |
| 562 'child1': [0, 80], | |
| 563 'child2': [0, 80], | |
| 564 }, | |
| 565 'space-around': { | |
| 566 'child1': [0, 40], | |
| 567 'child2': [0, 40], | |
| 568 }, | |
| 569 }, | |
| 570 'rtl': { | |
| 571 'flex-start': { | |
| 572 'child1': [0, -40], | |
| 573 'child2': [0, -10], | |
| 574 }, | |
| 575 'flex-end': { | |
| 576 'child1': [0, 40], | 587 'child1': [0, 40], |
| 577 'child2': [0, 70], | 588 'child2': [0, 70], |
| 578 }, | 589 }, |
| 579 'center': { | |
| 580 'child1': [0, 0], | |
| 581 'child2': [0, 30], | |
| 582 }, | |
| 583 'space-between': { | |
| 584 'child1': [0, -40], | |
| 585 'child2': [0, -10], | |
| 586 }, | |
| 587 'space-around': { | 590 'space-around': { |
| 588 'child1': [0, 0], | 591 'child1': [0, 20], |
| 589 'child2': [0, 30], | 592 'child2': [0, 35], |
| 590 }, | 593 }, |
| 591 }, | 594 }, |
| 592 }, | 595 }, |
| 593 'column-reverse': { | 596 'column-reverse': { |
| 594 'ltr': { | 597 'ltr': { |
| 595 'flex-start': { | 598 'flex-start': { |
| 596 'child1': [80, 0], | |
| 597 'child2': [80, 0], | |
| 598 }, | |
| 599 'flex-end': { | |
| 600 'child1': [0, 0], | 599 'child1': [0, 0], |
| 601 'child2': [0, 0], | 600 'child2': [0, 0], |
| 602 }, | 601 }, |
| 602 'flex-end': { |
| 603 'child1': [40, 0], |
| 604 'child2': [70, 0], |
| 605 }, |
| 603 'center': { | 606 'center': { |
| 604 'child1': [40, 0], | 607 'child1': [20, 0], |
| 605 'child2': [40, 0], | 608 'child2': [35, 0], |
| 606 }, | 609 }, |
| 607 'space-between': { | 610 'space-between': { |
| 608 'child1': [80, 0], | 611 'child1': [0, 0], |
| 609 'child2': [80, 0], | 612 'child2': [0, 0], |
| 610 }, | 613 }, |
| 611 'space-around': { | 614 'space-around': { |
| 612 'child1': [40, 0], | 615 'child1': [20, 0], |
| 613 'child2': [40, 0], | 616 'child2': [35, 0], |
| 614 }, | 617 }, |
| 615 }, | 618 }, |
| 616 'rtl': { | 619 'rtl': { |
| 617 'flex-start': { | 620 'flex-start': { |
| 618 'child1': [80, 10], | |
| 619 'child2': [80, 0], | |
| 620 }, | |
| 621 'flex-end': { | |
| 622 'child1': [0, 10], | 621 'child1': [0, 10], |
| 623 'child2': [0, 0], | 622 'child2': [0, 0], |
| 624 }, | 623 }, |
| 624 'flex-end': { |
| 625 'child1': [40, 10], |
| 626 'child2': [70, 0], |
| 627 }, |
| 625 'center': { | 628 'center': { |
| 626 'child1': [40, 10], | 629 'child1': [20, 10], |
| 627 'child2': [40, 0], | 630 'child2': [35, 0], |
| 628 }, | 631 }, |
| 629 'space-between': { | 632 'space-between': { |
| 630 'child1': [80, 10], | 633 'child1': [0, 10], |
| 631 'child2': [80, 0], | 634 'child2': [0, 0], |
| 632 }, | 635 }, |
| 633 'space-around': { | 636 'space-around': { |
| 634 'child1': [40, 10], | 637 'child1': [20, 10], |
| 635 'child2': [40, 0], | 638 'child2': [35, 0], |
| 636 }, | 639 }, |
| 637 }, | 640 }, |
| 638 }, | 641 }, |
| 639 }, | 642 }, |
| 640 }; | 643 }; |
| 641 | 644 |
| 642 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; | 645 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
| 643 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | 646 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 644 var directions = ['ltr', 'rtl']; | 647 var directions = ['ltr', 'rtl']; |
| 645 var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'spa
ce-around']; | 648 var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'spa
ce-around']; |
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 691 | 694 |
| 692 document.body.appendChild(flexbox); | 695 document.body.appendChild(flexbox); |
| 693 }) | 696 }) |
| 694 }) | 697 }) |
| 695 }) | 698 }) |
| 696 }) | 699 }) |
| 697 | 700 |
| 698 </script> | 701 </script> |
| 699 | 702 |
| 700 </body> | 703 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1920453003:
[css-flexbox] Implement new abspos handling (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master