tor-browser

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

animation-inactive-outside-range-test.html (2887B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      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 <link rel="match" href="animation-inactive-outside-range-ref.html">
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="/web-animations/testcommon.js"></script>
     10 <style>
     11  .scroller {
     12    height: 200px;
     13    width: 500px;
     14    overflow: auto;
     15    position: absolute;
     16    top: 100px;
     17  }
     18 
     19  .anim {
     20    position: absolute;
     21    width: 100px;
     22    height: 100px;
     23    background: darkred;
     24    view-timeline: --view;
     25  }
     26  .anim.contain {
     27    background: green;
     28  }
     29  .spacer {
     30    height: 1000px;
     31  }
     32 
     33  .before {
     34    top: 450px;
     35  }
     36  .after {
     37    top: 50px;
     38  }
     39  .contain {
     40    top: 250px;
     41  }
     42  @keyframes active-opacity {
     43    0% { opacity: 1; }
     44    100% { opacity: 1; }
     45  }
     46  .indicator {
     47    position: fixed;
     48    top: 50px;
     49  }
     50  .contain .indicator {
     51    top: 100px;
     52  }
     53  .contain .indicator:nth-child(2) {
     54    left: 200px;
     55  }
     56 
     57  .after .indicator {
     58    left: 200px;
     59  }
     60 
     61  .indicator > div {
     62    display: inline-block;
     63    width: 25px;
     64    height: 25px;
     65    position: relative;
     66    border-radius: 100%;
     67    box-sizing: border-box;
     68    border: 2px solid black;
     69    padding: 3px;
     70    background: lightgray;
     71    background-clip: content-box;
     72  }
     73 
     74  .indicator > div > div {
     75    width: 100%;
     76    height: 100%;
     77    border-radius: 100%;
     78    background: green;
     79    opacity: 0;
     80    animation: active-opacity;
     81    animation-timeline: --view;
     82  }
     83 
     84  .contain .indicator > div > div {
     85    animation-range: entry;
     86  }
     87 
     88  .contain .indicator:nth-child(2) > div > div {
     89    animation-range: exit;
     90  }
     91 
     92 </style>
     93 </head>
     94 <body onload="run()">
     95  <p>None of the activity indicators should be active all of the animations are outside of their active range.</p>
     96  <div class="scroller">
     97    <div class="anim after"><div class="indicator">After cover phase: <div><div></div></div></div></div>
     98    <div class="anim before"><div class="indicator">Before cover phase: <div><div></div></div></div></div>
     99    <div class="anim contain">
    100      <div class="indicator entry">After entry phase: <div><div></div></div></div>
    101      <div class="indicator exit">Before exit phase: <div><div></div></div></div>
    102    </div>
    103    <div class="spacer"></div>
    104  </div>
    105 </body>
    106 <script>
    107  async function run() {
    108    await waitForCompositorReady();
    109    await waitForNextFrame();
    110 
    111    let scroller = document.querySelector('.scroller');
    112    // Scroll such that each animation becomes active.
    113    scroller.scrollTo({top: 0});
    114    await waitForNextFrame();
    115    scroller.scrollTo({top: 400});
    116    await waitForNextFrame();
    117 
    118    // Then scroll between them so that we are before one and after the other.
    119    scroller.scrollTo({top: 200});
    120    await waitForNextFrame();
    121    takeScreenshot();
    122  }
    123 </script>
    124 </html>