tor-browser

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

grid-container-scrollbar-001.html (1972B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Grid container with scrollbars</title>
      4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
      6 <link rel="match" href="grid-container-scrollbar-001-ref.html">
      7 <meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
      8 <link href="/css/support/grid.css" rel="stylesheet">
      9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     10 <style>
     11  .grid {
     12    font: 10px/1 Ahem;
     13    margin: 10px;
     14  }
     15 
     16  .scrollX {
     17    overflow-x: scroll;
     18  }
     19 
     20  .scrollY {
     21    overflow-y: scroll;
     22  }
     23 
     24  .fixedSize {
     25    width: 200px;
     26    height: 50px;
     27  }
     28 
     29  .grid > div {
     30    background: cyan;
     31  }
     32 </style>
     33 
     34 <p>The test passes if it has the same output as the reference.</p>
     35 
     36 <div style="float: left; width: 350px;">
     37 
     38  <h2>direction: ltr;</h2>
     39 
     40  <div class="grid scrollX">
     41    <div>item</div>
     42  </div>
     43 
     44  <div class="grid scrollY">
     45    <div>item</div>
     46  </div>
     47 
     48  <div class="grid scrollX scrollY">
     49    <div>item</div>
     50  </div>
     51 
     52  <div class="grid fixedSize scrollX">
     53    <div>item</div>
     54  </div>
     55 
     56  <div class="grid fixedSize scrollY">
     57    <div>item</div>
     58  </div>
     59 
     60  <div class="grid fixedSize scrollX scrollY">
     61    <div>item</div>
     62  </div>
     63 
     64 </div>
     65 
     66 <div style="float: left; width: 350px;">
     67 
     68  <h2>direction: rtl;</h2>
     69 
     70  <div class="directionRTL grid scrollX">
     71    <div>item</div>
     72  </div>
     73 
     74  <div class="directionRTL grid scrollY">
     75    <div>item</div>
     76  </div>
     77 
     78  <div class="directionRTL grid scrollX scrollY">
     79    <div>item</div>
     80  </div>
     81 
     82  <div class="directionRTL grid fixedSize scrollX">
     83    <div>item</div>
     84  </div>
     85 
     86  <div class="directionRTL grid fixedSize scrollY">
     87    <div>item</div>
     88  </div>
     89 
     90  <div class="directionRTL grid fixedSize scrollX scrollY">
     91    <div>item</div>
     92  </div>
     93 
     94 </div>