tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

overflow-auto-005.html (2121B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>CSS Flexbox: overflow:auto support.</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow">
      5 <link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars">
      6 <link rel="match" href="reference/overflow-auto-005-ref.html">
      7 <meta name="fuzzy" content="0-3;0-3">
      8 <meta name="assert" content="This test ensures that flexbox with 'overflow: auto' is supported, including in combination with different writing-mode and flex-direction values."/>
      9 <style>
     10 .test-row {
     11    display: flex;
     12    margin-bottom: 5px;
     13 }
     14 .test-row > div {
     15    flex: none;
     16 }
     17 
     18 .container {
     19    margin-right: 5px;
     20    border: 5px solid lightgreen;
     21    width: 100px;
     22 }
     23 
     24 .horizontal-tb {
     25    writing-mode: horizontal-tb;
     26 }
     27 
     28 .vertical-rl {
     29    writing-mode: vertical-rl;
     30 }
     31 
     32 .vertical-lr {
     33    writing-mode: vertical-lr;
     34 }
     35 
     36 .row {
     37    flex-direction: row;
     38 }
     39 
     40 .row-reverse {
     41    flex-direction: row-reverse;
     42 }
     43 
     44 .column {
     45    flex-direction: column;
     46 }
     47 
     48 .column-reverse {
     49    flex-direction: column-reverse;
     50 }
     51 
     52 .flexbox {
     53    border: 0 solid pink;
     54    display: flex;
     55    height: 100px;
     56    width: 100px;
     57    overflow: auto;
     58 }
     59 
     60 .flexbox > div {
     61    width: 200px;
     62    height: 200px;
     63    background: radial-gradient(at right 60%, red, yellow, green);
     64    flex: none;
     65 }
     66 
     67 </style>
     68 <body>
     69    <p>Scrollbars should work in all the flexboxes.</p>
     70 </body>
     71 <script>
     72 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
     73 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
     74 var testContents = '';
     75 writingModes.forEach(function(writingMode) {
     76    testContents += "<div class='test-row'>";
     77    flexDirections.forEach(function(flexDirection) {
     78        var containerClass = 'container ' + writingMode;
     79        var flexboxClass = 'flexbox ' + flexDirection;
     80        testContents +=
     81            "<div class='" + containerClass + "'>" +
     82            "<div class='" + flexboxClass + "'>" +
     83            "<div></div>" +
     84            "</div>" +
     85            "</div>";
     86    });
     87    testContents += "</div>";
     88 });
     89 
     90 document.body.innerHTML += testContents;
     91 
     92 </script>
     93 </body>
     94 </html>