scrollbars-auto-ref.html (5349B)
1 <!DOCTYPE html> 2 <head> 3 4 <script src="support/scrollbars.js"></script> 5 6 <style> 7 .horizontal-header { 8 width: 120px; 9 } 10 .vertical-header { 11 width: 60px; 12 } 13 .container-row { 14 display: flex; 15 flex-direction: row; 16 align-items: flex-start; 17 justify-content: flex-start; 18 } 19 .container { 20 flex: none; 21 margin: 5px; 22 } 23 .ltr { 24 direction: ltr; 25 } 26 .rtl { 27 direction: rtl; 28 } 29 .horizontal { 30 writing-mode: horizontal-tb; 31 } 32 .flipped-blocks { 33 writing-mode: vertical-rl; 34 } 35 .flipped-lines { 36 writing-mode: vertical-lr; 37 } 38 .flex { 39 border: 2px solid red; 40 overflow: auto; 41 max-width: 100px; 42 max-height: 100px; 43 white-space: nowrap; 44 } 45 .row > div, .row-reverse > div { 46 display: inline-flex; 47 margin: 3px; 48 } 49 .column > div, .column-reverse > div { 50 display: flex; 51 margin: 3px; 52 } 53 54 /* Adjust margins to account for collapsing. */ 55 .horizontal > .column > .leaf1, .horizontal > .column > .leaf2 { 56 margin: 3px 3px 6px 3px; 57 } 58 .flipped-blocks > .column > .leaf1, .flipped-blocks > .column > .leaf2 { 59 margin: 3px 3px 3px 6px; 60 } 61 .flipped-lines > .column > .leaf1, .flipped-lines > .column > .leaf2 { 62 margin: 3px 6px 3px 3px; 63 } 64 65 .horizontal > .column-reverse > .leaf1, .horizontal > .column-reverse > .leaf2 { 66 margin: 6px 3px 3px 3px; 67 } 68 .flipped-blocks > .column-reverse > .leaf1, .flipped-blocks > .column-reverse > .leaf2 { 69 margin: 3px 6px 3px 3px; 70 } 71 .flipped-lines > .column-reverse > .leaf1, .flipped-lines > .column-reverse > .leaf2 { 72 margin: 3px 3px 3px 6px; 73 } 74 75 .flex > div { 76 width: 30px; 77 height: 30px; 78 border: 2px solid blue; 79 flex-direction: column; 80 justify-content: center; 81 } 82 .flex > div > div { 83 font-size: 20px; 84 text-align: center; 85 flex: none; 86 } 87 </style> 88 89 </head> 90 91 <div class="container-row"> 92 <div class="vertical-header ltr horizontal"></div> 93 <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> 94 <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> 95 <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> 96 <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> 97 <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> 98 <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> 99 </div> 100 101 <script> 102 // Override createContentNode to emulate reverse flow direction. 103 createContentNode = (flexDirection, textDirection, writingMode) => { 104 var flexNode = document.createElement("div"); 105 flexNode.className = "flex " + flexDirection; 106 flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode; 107 for (var i = 1; i < 4; i++) 108 flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i)); 109 return flexNode; 110 } 111 112 flexDirections.forEach((flexDirection) => { 113 var containerRow = createContainerRow(flexDirection); 114 document.body.appendChild(containerRow); 115 }); 116 117 // Scroll all {row,column}-reverse flex containers to the emulated beginning 118 // of flow. 119 // * "row-reverse" changes the initial scroll position of a flex container to 120 // correspond to its *inline-end* edge. So in our emulation, we need to 121 // scroll to the extreme inline-end position. For 'direction:ltr', this is a 122 // positive scroll offset; for 'direction:rtl', it's a zero or negative offset. 123 var nodes = document.querySelectorAll(".ltr.horizontal > .row-reverse"); 124 for (var i = 0; i < nodes.length; i++) { 125 nodes[i].scrollLeft = 10000; 126 } 127 nodes = document.querySelectorAll(".ltr.flipped-blocks > .row-reverse"); 128 for (var i = 0; i < nodes.length; i++) { 129 nodes[i].scrollTop = 10000; 130 } 131 nodes = document.querySelectorAll(".ltr.flipped-lines > .row-reverse"); 132 for (var i = 0; i < nodes.length; i++) { 133 nodes[i].scrollTop = 10000; 134 } 135 var nodes = document.querySelectorAll(".rtl.horizontal > .row-reverse"); 136 for (var i = 0; i < nodes.length; i++) { 137 nodes[i].scrollLeft = -10000; 138 } 139 nodes = document.querySelectorAll(".rtl.flipped-blocks > .row-reverse"); 140 for (var i = 0; i < nodes.length; i++) { 141 nodes[i].scrollTop = -10000; 142 } 143 nodes = document.querySelectorAll(".rtl.flipped-lines > .row-reverse"); 144 for (var i = 0; i < nodes.length; i++) { 145 nodes[i].scrollTop = -10000; 146 } 147 // * "column-reverse" changes the initial scroll position of a flex container 148 // to correspond to its *block-end* edge. So in our emulation, we need to 149 // scroll to the extreme block-end position. For horizontal-tb and 150 // vertical-lr, this is a positive scroll offset (since "tb" and "lr" indicate 151 // progression in a positive direction along the underlying physical axis). 152 // For vertical-rl, this is a zero or negative scroll offset (since "rl" 153 // indicates progression in a negative direction (right-to-left) along the 154 // underlying physical axis). Note that the 'direction:rtl/ltr' doesn't need to 155 // be considered at all in this section, since that only impacts the inline 156 // axis, which isn't the axis that we're emulating a reversal for here. 157 nodes = document.querySelectorAll(".horizontal > .column-reverse"); 158 for (var i = 0; i < nodes.length; i++) { 159 nodes[i].scrollTop = 10000; 160 } 161 nodes = document.querySelectorAll(".flipped-blocks > .column-reverse"); 162 for (var i = 0; i < nodes.length; i++) { 163 nodes[i].scrollLeft = -10000; 164 } 165 nodes = document.querySelectorAll(".flipped-lines > .column-reverse"); 166 for (var i = 0; i < nodes.length; i++) { 167 nodes[i].scrollLeft = 10000; 168 } 169 </script>