tor-browser

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

scrollbars-no-margin-ref.html (2972B)

      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: scroll;
     41  max-width: 100px;
     42  max-height: 100px;
     43  white-space: nowrap;
     44  font-size: 0;
     45  scrollbar-width: thin;
     46  scrollbar-color: black white;
     47 }
     48 .row > div, .row-reverse > div {
     49  display: inline-flex;
     50 }
     51 .column > div, .column-reverse > div {
     52  display: flex;
     53 }
     54 
     55 .flex > div {
     56  width: 30px;
     57  height: 30px;
     58  border: 2px solid blue;
     59  flex-direction: column;
     60  justify-content: center;
     61 }
     62 .flex > div > div {
     63  font-size: 20px;
     64  text-align: center;
     65  flex: none;
     66 }
     67 </style>
     68 
     69 </head>
     70 
     71 <div class="container-row">
     72  <div class="vertical-header ltr horizontal"></div>
     73  <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div>
     74  <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div>
     75  <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div>
     76  <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div>
     77  <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div>
     78  <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div>
     79 </div>
     80 
     81 <script>
     82 // Override createContentNode to emulate reverse flow direction.
     83 createContentNode = (flexDirection, textDirection, writingMode) => {
     84  var flexNode = document.createElement("div");
     85  flexNode.className = "flex " + flexDirection;
     86  flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode;
     87  for (var i = 1; i < 4; i++)
     88    flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i));
     89  return flexNode;
     90 }
     91 
     92 flexDirections.forEach((flexDirection) => {
     93  var containerRow = createContainerRow(flexDirection);
     94  document.body.appendChild(containerRow);
     95 });
     96 
     97 // Scroll all flex containers to the emulated beginning of flow.
     98 var nodes = document.querySelectorAll(".ltr > .row-reverse");
     99 for (var i = 0; i < nodes.length; i++) {
    100  nodes[i].scrollLeft = 10000;
    101  nodes[i].scrollTop = 10000;
    102 }
    103 nodes = document.querySelectorAll(".rtl > .row-reverse");
    104 for (var i = 0; i < nodes.length; i++) {
    105  nodes[i].scrollLeft = -10000;
    106  nodes[i].scrollTop = -10000;
    107 }
    108 nodes = document.querySelectorAll(".column-reverse");
    109 for (var i = 0; i < nodes.length; i++) {
    110  nodes[i].scrollLeft = 10000;
    111  nodes[i].scrollTop = 10000;
    112 }
    113 nodes = document.querySelectorAll(".flipped-blocks > .column-reverse");
    114 for (var i = 0; i < nodes.length; i++) {
    115  nodes[i].scrollLeft = -10000;
    116  nodes[i].scrollTop = 0;
    117 }
    118 </script>