cross-axis-scrollbar.html (4885B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: Scrollbars and flex-direction.</title> 4 <link href="support/flexbox.css" rel="stylesheet"> 5 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> 6 <link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars"> 7 <link rel="match" href="reference/cross-axis-scrollbar-ref.html"> 8 <meta name="assert" content="This test ensures that flexbox scrollbars take flex-direction into account."/> 9 <style> 10 body { 11 margin: 0; 12 } 13 14 .flexbox { 15 position: relative; 16 background-color: green; 17 } 18 19 /* Don't use a red background on .flexbox as it might show behind scrollbars on platforms where the track may be transparent */ 20 .flexbox::before { 21 content: ""; 22 background-color: red; 23 position: absolute; 24 inset: 0; 25 z-index: -1; 26 } 27 28 .vertical-rl { 29 writing-mode: vertical-rl; 30 } 31 32 .vertical-lr { 33 writing-mode: vertical-lr; 34 } 35 36 .column > div { 37 flex: none; 38 background-color: green; 39 width: 100px; 40 height: 10px; 41 } 42 43 .row > div { 44 background-color: green; 45 flex: 1; 46 height: 50px; 47 min-height: 0; 48 } 49 50 .vertical-lr > .column > div { 51 flex: none; 52 height: 50px; 53 width: 20px; 54 } 55 56 .vertical-lr > .row > div { 57 flex: 1; 58 width: 100px; 59 } 60 61 </style> 62 <body> 63 64 This test passes if no red is showing. 65 66 <div style="position: relative;"> 67 68 <div style="position: absolute; top: 0; left: 0;"> 69 <div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> 70 <div class="align-self-flex-start"></div> 71 <div class="align-self-center"></div> 72 <div class="align-self-flex-end"></div> 73 <div class="align-self-baseline"></div> 74 <div class="align-self-stretch"></div> 75 </div> 76 </div> 77 78 <div style="position: absolute; top: 0; left: 150px;"> 79 <div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> 80 <div class="align-self-flex-start"></div> 81 <div class="align-self-center"></div> 82 <div class="align-self-flex-end"></div> 83 <div class="align-self-baseline"></div> 84 <div class="align-self-stretch"></div> 85 </div> 86 </div> 87 88 <div style="position: absolute; top:0; left: 300px" class="vertical-lr"> 89 <div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> 90 <div class="align-self-flex-start"></div> 91 <div class="align-self-center"></div> 92 <div class="align-self-flex-end"></div> 93 <div class="align-self-baseline"></div> 94 <div class="align-self-flex-start"></div> 95 </div> 96 </div> 97 98 <div style="position: absolute; top:0; left: 450px;" class="vertical-lr"> 99 <div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> 100 <div class="align-self-flex-start"></div> 101 <div class="align-self-center"></div> 102 <div class="align-self-flex-end"></div> 103 <div class="align-self-baseline"></div> 104 <div class="align-self-flex-start"></div> 105 </div> 106 </div> 107 108 <div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 0"> 109 <div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> 110 <div class="align-self-flex-start"></div> 111 <div class="align-self-center"></div> 112 <div class="align-self-flex-end"></div> 113 <div class="align-self-baseline"></div> 114 <div class="align-self-stretch"></div> 115 </div> 116 </div> 117 118 <div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 150px"> 119 <div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> 120 <div class="align-self-flex-start"></div> 121 <div class="align-self-center"></div> 122 <div class="align-self-flex-end"></div> 123 <div class="align-self-baseline"></div> 124 <div class="align-self-stretch"></div> 125 </div> 126 </div> 127 128 <div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 300px" class="vertical-lr"> 129 <div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;"> 130 <div class="align-self-flex-start"></div> 131 <div class="align-self-center"></div> 132 <div class="align-self-flex-end"></div> 133 <div class="align-self-baseline"></div> 134 <div class="align-self-stretch"></div> 135 </div> 136 </div> 137 138 <div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 450px" class="vertical-lr"> 139 <div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;"> 140 <div class="align-self-flex-start"></div> 141 <div class="align-self-center"></div> 142 <div class="align-self-flex-end"></div> 143 <div class="align-self-baseline"></div> 144 <div class="align-self-stretch"></div> 145 </div> 146 </div> 147 148 </div> 149 <!-- FIXME: Add tests for vertical-rl. Setting the logical 150 bottom border on these tests cause additional scrollbars to appear. --> 151 152 </body> 153 </html>