| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="resources/scrollbars.js"></script> |
| 3 <style> |
| 4 .horizontal-header { |
| 5 width: 120px; |
| 6 } |
| 7 .vertical-header { |
| 8 width: 60px; |
| 9 } |
| 10 .container-row { |
| 11 display: flex; |
| 12 flex-direction: row; |
| 13 align-items: flex-start; |
| 14 justify-content: flex-start; |
| 15 } |
| 16 .container { |
| 17 flex: none; |
| 18 margin: 5px; |
| 19 } |
| 20 .ltr { |
| 21 direction: ltr; |
| 22 } |
| 23 .rtl { |
| 24 direction: rtl; |
| 25 } |
| 26 .horizontal { |
| 27 writing-mode: horizontal-tb; |
| 28 } |
| 29 .flipped-blocks { |
| 30 writing-mode: vertical-rl; |
| 31 } |
| 32 .flipped-lines { |
| 33 writing-mode: vertical-lr; |
| 34 } |
| 35 .flex { |
| 36 border: 2px solid red; |
| 37 display: flex; |
| 38 overflow: scroll; |
| 39 max-width: 100px; |
| 40 max-height: 100px; |
| 41 } |
| 42 .column { |
| 43 flex-direction: column; |
| 44 } |
| 45 .column-reverse { |
| 46 flex-direction: column-reverse; |
| 47 } |
| 48 .row { |
| 49 flex-direction: row; |
| 50 } |
| 51 .row-reverse { |
| 52 flex-direction: row-reverse; |
| 53 } |
| 54 .flex > .leaf1, .flex > .leaf2, .flex > .leaf3 { |
| 55 flex: none; |
| 56 width: 30px; |
| 57 height: 30px; |
| 58 border: 2px solid blue; |
| 59 margin: 3px; |
| 60 display: flex; |
| 61 flex-direction: column; |
| 62 justify-content: center; |
| 63 } |
| 64 .flex > div > div { |
| 65 font-size: 20px; |
| 66 text-align: center; |
| 67 flex: none; |
| 68 } |
| 69 </style> |
| 70 |
| 71 <div class="container-row"> |
| 72 <div class="vertical-header ltr horizontal"></div> |
| 73 <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> |
| 74 <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> |
| 75 <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> |
| 76 <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> |
| 77 <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> |
| 78 <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> |
| 79 </div> |
| 80 |
| 81 <script> |
| 82 flexDirections.forEach((flexDirection) => { |
| 83 var containerRow = createContainerRow(flexDirection); |
| 84 document.body.appendChild(containerRow); |
| 85 }); |
| 86 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1921553008:
Fix scroll origin, overflow rects, and coordinate flipping for flexbox. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src@master