tor-browser

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

scrollbars.html (2059B)

      1 <!DOCTYPE html>
      2 <head>
      3 <title>Scrollbars inside flexbox with direction and writing-mode</title>
      4 <link rel="author" title="Google, Inc." href="http://www.google.com/">
      5 <link rel="match" href="scrollbars-ref.html">
      6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/">
      7 
      8 <script src="support/scrollbars.js"></script>
      9 
     10 <style>
     11 .horizontal-header {
     12  width: 120px;
     13 }
     14 .vertical-header {
     15  width: 60px;
     16 }
     17 .container-row {
     18  display: flex;
     19  flex-direction: row;
     20  align-items: flex-start;
     21  justify-content: flex-start;
     22 }
     23 .container {
     24  flex: none;
     25  margin: 5px;
     26 }
     27 .ltr {
     28  direction: ltr;
     29 }
     30 .rtl {
     31  direction: rtl;
     32 }
     33 .horizontal {
     34  writing-mode: horizontal-tb;
     35 }
     36 .flipped-blocks {
     37  writing-mode: vertical-rl;
     38 }
     39 .flipped-lines {
     40  writing-mode: vertical-lr;
     41 }
     42 .flex {
     43  border: 2px solid red;
     44  display: flex;
     45  overflow: scroll;
     46  max-width: 100px;
     47  max-height: 100px;
     48 }
     49 .column {
     50  flex-direction: column;
     51 }
     52 .column-reverse {
     53  flex-direction: column-reverse;
     54 }
     55 .row {
     56  flex-direction: row;
     57 }
     58 .row-reverse {
     59  flex-direction: row-reverse;
     60 }
     61 .flex > .leaf1, .flex > .leaf2, .flex > .leaf3 {
     62  flex: none;
     63  width: 30px;
     64  height: 30px;
     65  border: 2px solid blue;
     66  margin: 3px;
     67  display: flex;
     68  flex-direction: column;
     69  justify-content: center;
     70 }
     71 .flex > div > div {
     72  font-size: 20px;
     73  text-align: center;
     74  flex: none;
     75 }
     76 </style>
     77 
     78 </head>
     79 
     80 <div class="container-row">
     81  <div class="vertical-header ltr horizontal"></div>
     82  <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div>
     83  <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div>
     84  <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div>
     85  <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div>
     86  <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div>
     87  <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div>
     88 </div>
     89 
     90 <script>
     91 flexDirections.forEach((flexDirection) => {
     92  var containerRow = createContainerRow(flexDirection);
     93  document.body.appendChild(containerRow);
     94 });
     95 </script>