tor-browser

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

overflow-auto-005-ref.html (1940B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <style>
      5 .test-row {
      6    display: flex;
      7    margin-bottom: 5px;
      8 }
      9 .test-row > div {
     10    flex: none;
     11 }
     12 
     13 .container {
     14    margin-right: 5px;
     15    border: 5px solid lightgreen;
     16    width: 100px;
     17 }
     18 
     19 .flexbox {
     20    display: block;
     21    height: 100px;
     22    width: 100px;
     23    overflow: auto;
     24 }
     25 
     26 .flexbox > div {
     27    width: 200px;
     28    height: 200px;
     29    background: radial-gradient(at right 60%, red, yellow, green);
     30 }
     31 
     32 .vertical-rl {
     33  writing-mode: vertical-rl;
     34 }
     35 
     36 </style>
     37 </head>
     38 <body>
     39    <p>Scrollbars should work in all the flexboxes.</p>
     40 </body>
     41 <script>
     42 var results = [
     43    'left top', 'left top', 'right top', 'left bottom',
     44    'right top', 'right top', 'right bottom', 'left top',
     45    'left top', 'left top', 'left bottom', 'right top'];
     46 
     47 var testContents = '';
     48 for (var i = 0; i < results.length; ++i) {
     49    if (!(i % 4))
     50        testContents += "<div class='test-row'>";
     51 
     52    var containerClass = 'container ' + results[i];
     53 
     54    // Use vertical-rl here because Firefox and WebKit put vertical scrollbars
     55    // on the left in the vertical-rl test cases, and this is the easiest way to
     56    // match that.
     57    let maybe_vertical = "";
     58    if (i > 3 && i < 8)
     59      maybe_vertical = " vertical-rl";
     60 
     61    testContents +=
     62        "<div class='" + containerClass + "'>" +
     63        "<div class='flexbox" + maybe_vertical + "'>" +
     64        "<div></div>" +
     65        "</div>" +
     66        "</div>";
     67    if (i % 4 == 3)
     68        testContents += "</div>";
     69 }
     70 
     71 document.body.innerHTML += testContents;
     72 
     73 Array.prototype.forEach.call(document.querySelectorAll(".left"), function(element) {
     74    element.firstChild.scrollLeft = -1000;
     75 });
     76 
     77 Array.prototype.forEach.call(document.querySelectorAll(".right"), function(element) {
     78    element.firstChild.scrollLeft = 1000;
     79 });
     80 
     81 Array.prototype.forEach.call(document.querySelectorAll(".bottom"), function(element) {
     82    element.firstChild.scrollTop = 1000;
     83 });
     84 
     85 </script>
     86 </body>
     87 </html>