| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 position: relative; | 5 position: relative; |
| 6 display: flex; | 6 display: flex; |
| 7 background-color: grey; | 7 background-color: grey; |
| 8 max-width: 600px; | 8 max-width: 600px; |
| 9 align-content: flex-start; | 9 align-content: flex-start; |
| 10 } | 10 } |
| 11 .flexbox > * { | 11 .flexbox > * { |
| 12 flex: none; | 12 flex: none; |
| 13 } | 13 } |
| 14 .title { | 14 .title { |
| 15 margin-top: 1em; | 15 margin-top: 1em; |
| 16 } | 16 } |
| 17 .ltr { | 17 .ltr { |
| 18 direction: ltr; | 18 direction: ltr; |
| 19 } | 19 } |
| 20 .rtl { | 20 .rtl { |
| 21 direction: rtl; | 21 direction: rtl; |
| 22 } | 22 } |
| 23 .horizontal-tb { | 23 .horizontal-tb { |
| 24 -webkit-writing-mode: horizontal-tb; | 24 -webkit-writing-mode: horizontal-tb; |
| 25 } | 25 } |
| 26 .horizontal-bt { | |
| 27 -webkit-writing-mode: horizontal-bt; | |
| 28 } | |
| 29 .vertical-rl { | 26 .vertical-rl { |
| 30 -webkit-writing-mode: vertical-rl; | 27 -webkit-writing-mode: vertical-rl; |
| 31 } | 28 } |
| 32 .vertical-lr { | 29 .vertical-lr { |
| 33 -webkit-writing-mode: vertical-lr; | 30 -webkit-writing-mode: vertical-lr; |
| 34 } | 31 } |
| 35 .row { | 32 .row { |
| 36 flex-flow: row; | 33 flex-flow: row; |
| 37 } | 34 } |
| 38 .row-reverse { | 35 .row-reverse { |
| (...skipping 179 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 218 'flexbox': [600, 60], | 215 'flexbox': [600, 60], |
| 219 'child1': [5, 30, 0, 30], | 216 'child1': [5, 30, 0, 30], |
| 220 'child2': [10, 30, 0, 0], | 217 'child2': [10, 30, 0, 0], |
| 221 'child3': [5, 60, 10, 0], | 218 'child3': [5, 60, 10, 0], |
| 222 'child4': [20, 70, 15, -10], | 219 'child4': [20, 70, 15, -10], |
| 223 'child5': [10, 60, 35, 0], | 220 'child5': [10, 60, 35, 0], |
| 224 }, | 221 }, |
| 225 }, | 222 }, |
| 226 }, | 223 }, |
| 227 }, | 224 }, |
| 228 'horizontal-bt': { | |
| 229 'row': { | |
| 230 'ltr': { | |
| 231 'wrap': { | |
| 232 'flexbox': [60, 45], | |
| 233 'child1': [30, 5, 0, 40], | |
| 234 'child2': [30, 10, 30, 35], | |
| 235 'child3': [60, 5, 0, 30], | |
| 236 'child4': [70, 20, 0, 10], | |
| 237 'child5': [60, 10, 0, 0], | |
| 238 }, | |
| 239 'wrap-reverse': { | |
| 240 'flexbox': [60, 45], | |
| 241 'child1': [30, 5, 0, 0], | |
| 242 'child2': [30, 10, 30, 0], | |
| 243 'child3': [60, 5, 0, 10], | |
| 244 'child4': [70, 20, 0, 15], | |
| 245 'child5': [60, 10, 0, 35], | |
| 246 }, | |
| 247 }, | |
| 248 'rtl': { | |
| 249 'wrap': { | |
| 250 'flexbox': [60, 45], | |
| 251 'child1': [30, 5, 30, 40], | |
| 252 'child2': [30, 10, 0, 35], | |
| 253 'child3': [60, 5, 0, 30], | |
| 254 'child4': [70, 20, -10, 10], | |
| 255 'child5': [60, 10, 0, 0], | |
| 256 }, | |
| 257 'wrap-reverse': { | |
| 258 'flexbox': [60, 45], | |
| 259 'child1': [30, 5, 30, 0], | |
| 260 'child2': [30, 10, 0, 0], | |
| 261 'child3': [60, 5, 0, 10], | |
| 262 'child4': [70, 20, -10, 15], | |
| 263 'child5': [60, 10, 0, 35], | |
| 264 }, | |
| 265 }, | |
| 266 }, | |
| 267 'column': { | |
| 268 'ltr': { | |
| 269 'wrap': { | |
| 270 'flexbox': [600, 60], | |
| 271 'child1': [5, 30, 0, 30], | |
| 272 'child2': [10, 30, 0, 0], | |
| 273 'child3': [5, 60, 10, 0], | |
| 274 'child4': [20, 70, 15, -10], | |
| 275 'child5': [10, 60, 35, 0], | |
| 276 }, | |
| 277 'wrap-reverse': { | |
| 278 'flexbox': [600, 60], | |
| 279 'child1': [5, 30, 595, 30], | |
| 280 'child2': [10, 30, 590, 0], | |
| 281 'child3': [5, 60, 585, 0], | |
| 282 'child4': [20, 70, 565, -10], | |
| 283 'child5': [10, 60, 555, 0], | |
| 284 }, | |
| 285 }, | |
| 286 'rtl': { | |
| 287 'wrap': { | |
| 288 'flexbox': [600, 60], | |
| 289 'child1': [5, 30, 595, 30], | |
| 290 'child2': [10, 30, 590, 0], | |
| 291 'child3': [5, 60, 585, 0], | |
| 292 'child4': [20, 70, 565, -10], | |
| 293 'child5': [10, 60, 555, 0], | |
| 294 }, | |
| 295 'wrap-reverse': { | |
| 296 'flexbox': [600, 60], | |
| 297 'child1': [5, 30, 0, 30], | |
| 298 'child2': [10, 30, 0, 0], | |
| 299 'child3': [5, 60, 10, 0], | |
| 300 'child4': [20, 70, 15, -10], | |
| 301 'child5': [10, 60, 35, 0], | |
| 302 }, | |
| 303 }, | |
| 304 }, | |
| 305 'row-reverse': { | |
| 306 'ltr': { | |
| 307 'wrap': { | |
| 308 'flexbox': [60, 45], | |
| 309 'child1': [30, 5, 30, 40], | |
| 310 'child2': [30, 10, 0, 35], | |
| 311 'child3': [60, 5, 0, 30], | |
| 312 'child4': [70, 20, -10, 10], | |
| 313 'child5': [60, 10, 0, 0], | |
| 314 }, | |
| 315 'wrap-reverse': { | |
| 316 'flexbox': [60, 45], | |
| 317 'child1': [30, 5, 30, 0], | |
| 318 'child2': [30, 10, 0, 0], | |
| 319 'child3': [60, 5, 0, 10], | |
| 320 'child4': [70, 20, -10, 15], | |
| 321 'child5': [60, 10, 0, 35], | |
| 322 }, | |
| 323 }, | |
| 324 'rtl': { | |
| 325 'wrap': { | |
| 326 'flexbox': [60, 45], | |
| 327 'child1': [30, 5, 0, 40], | |
| 328 'child2': [30, 10, 30, 35], | |
| 329 'child3': [60, 5, 0, 30], | |
| 330 'child4': [70, 20, 0, 10], | |
| 331 'child5': [60, 10, 0, 0], | |
| 332 }, | |
| 333 'wrap-reverse': { | |
| 334 'flexbox': [60, 45], | |
| 335 'child1': [30, 5, 0, 0], | |
| 336 'child2': [30, 10, 30, 0], | |
| 337 'child3': [60, 5, 0, 10], | |
| 338 'child4': [70, 20, 0, 15], | |
| 339 'child5': [60, 10, 0, 35], | |
| 340 }, | |
| 341 }, | |
| 342 }, | |
| 343 'column-reverse': { | |
| 344 'ltr': { | |
| 345 'wrap': { | |
| 346 'flexbox': [600, 60], | |
| 347 'child1': [5, 30, 0, 0], | |
| 348 'child2': [10, 30, 0, 30], | |
| 349 'child3': [5, 60, 10, 0], | |
| 350 'child4': [20, 70, 15, 0], | |
| 351 'child5': [10, 60, 35, 0], | |
| 352 }, | |
| 353 'wrap-reverse': { | |
| 354 'flexbox': [600, 60], | |
| 355 'child1': [5, 30, 595, 0], | |
| 356 'child2': [10, 30, 590, 30], | |
| 357 'child3': [5, 60, 585, 0], | |
| 358 'child4': [20, 70, 565, 0], | |
| 359 'child5': [10, 60, 555, 0], | |
| 360 }, | |
| 361 }, | |
| 362 'rtl': { | |
| 363 'wrap': { | |
| 364 'flexbox': [600, 60], | |
| 365 'child1': [5, 30, 595, 0], | |
| 366 'child2': [10, 30, 590, 30], | |
| 367 'child3': [5, 60, 585, 0], | |
| 368 'child4': [20, 70, 565, 0], | |
| 369 'child5': [10, 60, 555, 0], | |
| 370 }, | |
| 371 'wrap-reverse': { | |
| 372 'flexbox': [600, 60], | |
| 373 'child1': [5, 30, 0, 0], | |
| 374 'child2': [10, 30, 0, 30], | |
| 375 'child3': [5, 60, 10, 0], | |
| 376 'child4': [20, 70, 15, 0], | |
| 377 'child5': [10, 60, 35, 0], | |
| 378 }, | |
| 379 }, | |
| 380 }, | |
| 381 }, | |
| 382 'vertical-rl': { | 225 'vertical-rl': { |
| 383 'row': { | 226 'row': { |
| 384 'ltr': { | 227 'ltr': { |
| 385 'wrap': { | 228 'wrap': { |
| 386 'flexbox': [45, 60], | 229 'flexbox': [45, 60], |
| 387 'child1': [5, 30, 40, 0], | 230 'child1': [5, 30, 40, 0], |
| 388 'child2': [10, 30, 35, 30], | 231 'child2': [10, 30, 35, 30], |
| 389 'child3': [5, 60, 30, 0], | 232 'child3': [5, 60, 30, 0], |
| 390 'child4': [20, 70, 10, 0], | 233 'child4': [20, 70, 10, 0], |
| 391 'child5': [10, 60, 0, 0], | 234 'child5': [10, 60, 0, 0], |
| (...skipping 312 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 704 + crossAxis + ': ' + crossAxisLength + 'px;'); | 547 + crossAxis + ': ' + crossAxisLength + 'px;'); |
| 705 | 548 |
| 706 child.setAttribute("data-expected-width", expectations[0]); | 549 child.setAttribute("data-expected-width", expectations[0]); |
| 707 child.setAttribute("data-expected-height", expectations[1]); | 550 child.setAttribute("data-expected-height", expectations[1]); |
| 708 child.setAttribute("data-offset-x", expectations[2]); | 551 child.setAttribute("data-offset-x", expectations[2]); |
| 709 child.setAttribute("data-offset-y", expectations[3]); | 552 child.setAttribute("data-offset-y", expectations[3]); |
| 710 | 553 |
| 711 flexbox.appendChild(child); | 554 flexbox.appendChild(child); |
| 712 } | 555 } |
| 713 | 556 |
| 714 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 557 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
| 715 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | 558 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 716 var directions = ['ltr', 'rtl']; | 559 var directions = ['ltr', 'rtl']; |
| 717 var wraps = ['wrap', 'wrap-reverse']; | 560 var wraps = ['wrap', 'wrap-reverse']; |
| 718 | 561 |
| 719 writingModes.forEach(function(writingMode) { | 562 writingModes.forEach(function(writingMode) { |
| 720 flexDirections.forEach(function(flexDirection) { | 563 flexDirections.forEach(function(flexDirection) { |
| 721 directions.forEach(function(direction) { | 564 directions.forEach(function(direction) { |
| 722 wraps.forEach(function(wrap) { | 565 wraps.forEach(function(wrap) { |
| 723 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xDirection + ' ' + wrap; | 566 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xDirection + ' ' + wrap; |
| 724 var title = document.createElement('div'); | 567 var title = document.createElement('div'); |
| (...skipping 19 matching lines...) Expand all Loading... |
| 744 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); | 587 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); |
| 745 | 588 |
| 746 document.body.appendChild(flexbox); | 589 document.body.appendChild(flexbox); |
| 747 }) | 590 }) |
| 748 }) | 591 }) |
| 749 }) | 592 }) |
| 750 }) | 593 }) |
| 751 </script> | 594 </script> |
| 752 </body> | 595 </body> |
| 753 </html> | 596 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1419813004:
Remove the "horizontal-bt" value from -webkit-writing-mode (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master