tor-browser

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

position-sticky-top-003.html (3128B)

      1 <!DOCTYPE html>
      2 
      3  <meta charset="UTF-8">
      4 
      5  <title>CSS Position Test: sticky element with top offset specified with percentage unit</title>
      6 
      7  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
      8  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
      9  <link rel="match" href="reference/position-sticky-top-002-ref.html">
     10 
     11  <meta name="flags" content="">
     12 
     13  <style>
     14  div.scrolling-container
     15    {
     16      background-image: url("support/100x100-red.png");
     17      background-repeat: no-repeat;
     18      display: inline-block;
     19      height: 250px;
     20      margin-right: 30px;
     21      overflow: auto;
     22      position: static;
     23      width: 150px;
     24    }
     25 
     26  div#first-scrolling-container
     27    {
     28      background-position: left bottom;
     29    }
     30 
     31  div#second-scrolling-container
     32    {
     33      background-position: left 100px;
     34    }
     35 
     36  div#third-scrolling-container
     37    {
     38      background-position: left 50px;
     39    }
     40 
     41  div.vertical-spacer
     42    {
     43      height: 100px;
     44    }
     45 
     46  div.sticky
     47    {
     48      background-color: green;
     49      height: 100px;
     50      position: sticky;
     51      top: 40%;
     52      width: 100px;
     53    }
     54  </style>
     55 
     56  <body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 200; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 300;">
     57 
     58  <p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
     59 
     60  <!--
     61  first-scrolling-container: before reaching the sticking point
     62  -->
     63 
     64  <div id="first-scrolling-container" class="scrolling-container">  <!-- 150w x 250h viewport -->
     65 
     66    <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
     67 
     68    <div class="content">
     69 
     70      <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
     71 
     72      <div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
     73 
     74      <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
     75 
     76    </div>
     77 
     78    <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
     79 
     80  </div>
     81 
     82  <!--
     83  second-scrolling-container: when reaching the sticking point and beyond
     84  -->
     85 
     86  <div id="second-scrolling-container" class="scrolling-container">  <!-- 150w x 250h viewport -->
     87 
     88    <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
     89 
     90    <div class="content">
     91 
     92      <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
     93 
     94      <div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
     95 
     96      <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
     97 
     98    </div>
     99 
    100    <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
    101 
    102  </div>
    103 
    104 
    105  <div id="third-scrolling-container" class="scrolling-container">  <!-- 150w x 250h viewport -->
    106 
    107    <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
    108 
    109    <div class="content">
    110 
    111      <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
    112 
    113      <div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
    114 
    115      <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
    116 
    117    </div>
    118 
    119    <div class="vertical-spacer"></div> <!-- 150w x 100h   -->
    120 
    121  </div>