tor-browser

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

negative-overflow-003.html (2163B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1114306">
      3 <meta name="assert" content="the correct scrollbars appear for sideways writing-mode flexboxes">
      4 
      5 <style>
      6 .container {
      7  width: 100px; height: 100px;
      8  overflow: scroll;
      9  border: solid 3px;
     10  display: inline-flex;
     11  padding: 10px;
     12  gap: 10px;
     13  align-items: start;
     14  margin: 10px;
     15  vertical-align: bottom;
     16 }
     17 
     18 .item {
     19  min-width: 110px; min-height: 110px;
     20  background: cyan;
     21 }
     22 
     23 .container:hover::before {
     24  position: fixed;
     25  top: 0; left: 0;
     26  font-size: 10px;
     27  content: attr(style);
     28  background: yellow;
     29  direction: ltr;
     30  writing-mode: horizontal-tb;
     31 }
     32 </style>
     33 <script src="/resources/testharness.js"></script>
     34 <script src="/resources/testharnessreport.js"></script>
     35 <script src="/resources/check-layout-th.js"></script>
     36 <body onload="checkLayout('.container')">
     37 <script>
     38 const writingModes = ['sideways-rl', 'sideways-lr'];
     39 const directions = ['ltr', 'rtl'];
     40 const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
     41 const flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
     42 
     43 for (let writingMode of writingModes) {
     44  for (let direction of directions) {
     45    for (let flexDirection of flexDirections) {
     46      for (let flexWrap of flexWraps) {
     47        let container = document.createElement('div');
     48        container.className = 'container';
     49        container.style.writingMode = writingMode;
     50        container.style.direction = direction;
     51        container.style.flexDirection = flexDirection;
     52        container.style.flexWrap = flexWrap;
     53 
     54        for (let i = 0; i < 3; i++) {
     55          let item = document.createElement('div');
     56          item.className = 'item';
     57          item.textContent = (i+1);
     58          container.appendChild(item);
     59        }
     60 
     61        let bias = flexWrap != 'nowrap';
     62        if (flexDirection == 'row' || flexDirection == 'row-reverse') {
     63          bias = !bias;
     64        }
     65        container.setAttribute('data-expected-scroll-width', bias ? 130 : 370);
     66        container.setAttribute('data-expected-scroll-height', bias ? 370 : 130);
     67 
     68        document.body.appendChild(container);
     69      }
     70    }
     71  }
     72 }
     73 </script>