tor-browser

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

animation-fill-outside-range-ref.html (2039B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <meta name="viewport" content="width=device-width, initial-scale=1">
      6 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/">
      7 <script src="/web-animations/testcommon.js"></script>
      8 <style>
      9  .scroller {
     10    height: 200px;
     11    width: 500px;
     12    overflow: auto;
     13    position: absolute;
     14    top: 100px;
     15  }
     16 
     17  .anim {
     18    position: absolute;
     19    width: 100px;
     20    height: 100px;
     21    background: darkred;
     22  }
     23  .anim.contain {
     24    background: green;
     25  }
     26  .spacer {
     27    height: 1000px;
     28  }
     29 
     30  .before {
     31    top: 450px;
     32  }
     33  .after {
     34    top: 50px;
     35  }
     36  .contain {
     37    top: 250px;
     38  }
     39  .indicator {
     40    position: fixed;
     41    top: 50px;
     42  }
     43  .contain .indicator {
     44    top: 100px;
     45  }
     46  .contain .indicator:nth-child(2) {
     47    left: 200px;
     48  }
     49 
     50  .after .indicator {
     51    left: 200px;
     52  }
     53 
     54  .indicator > div {
     55    display: inline-block;
     56    width: 25px;
     57    height: 25px;
     58    position: relative;
     59    border-radius: 100%;
     60    box-sizing: border-box;
     61    border: 2px solid black;
     62    padding: 3px;
     63    background: lightgray;
     64    background-clip: content-box;
     65  }
     66 
     67  .indicator > div > div {
     68    width: 100%;
     69    height: 100%;
     70    border-radius: 100%;
     71    background: green;
     72    opacity: 1;
     73    will-change: opacity;
     74  }
     75 
     76 </style>
     77 </head>
     78 <body>
     79  <p>All of the activity indicators should be active as the animations should be filling.</p>
     80  <div class="scroller">
     81    <div class="anim after"><div class="indicator">After cover phase: <div><div></div></div></div></div>
     82    <div class="anim before"><div class="indicator">Before cover phase: <div><div></div></div></div></div>
     83    <div class="anim contain">
     84      <div class="indicator entry">After entry phase: <div><div></div></div></div>
     85      <div class="indicator exit">Before exit phase: <div><div></div></div></div>
     86    </div>
     87    <div class="spacer"></div>
     88  </div>
     89 </body>
     90 <script>
     91  function run() {
     92    let scroller = document.querySelector('.scroller');
     93    scroller.scrollTo({top: 200});
     94  }
     95  run();
     96 </script>
     97 </html>