tor-browser

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

animation-inactive-outside-range-ref.html (2289B)

      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 <script src="/web-animations/testcommon.js"></script>
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10  .scroller {
     11    height: 200px;
     12    width: 500px;
     13    overflow: auto;
     14    position: absolute;
     15    top: 100px;
     16  }
     17 
     18  .anim {
     19    position: absolute;
     20    width: 100px;
     21    height: 100px;
     22    background: darkred;
     23    view-timeline: --view;
     24  }
     25  .anim.contain {
     26    background: green;
     27  }
     28  .spacer {
     29    height: 1000px;
     30  }
     31 
     32  .before {
     33    top: 450px;
     34  }
     35  .after {
     36    top: 50px;
     37  }
     38  .contain {
     39    top: 250px;
     40  }
     41  .indicator {
     42    position: fixed;
     43    top: 50px;
     44  }
     45  .contain .indicator {
     46    top: 100px;
     47  }
     48  .contain .indicator:nth-child(2) {
     49    left: 200px;
     50  }
     51 
     52  .after .indicator {
     53    left: 200px;
     54  }
     55 
     56  .indicator > div {
     57    display: inline-block;
     58    width: 25px;
     59    height: 25px;
     60    position: relative;
     61    border-radius: 100%;
     62    box-sizing: border-box;
     63    border: 2px solid black;
     64    padding: 3px;
     65    background: lightgray;
     66    background-clip: content-box;
     67  }
     68 
     69  .indicator > div > div {
     70    width: 100%;
     71    height: 100%;
     72    border-radius: 100%;
     73    background: green;
     74    opacity: 0;
     75  }
     76 </style>
     77 </head>
     78 <body onload="run()">
     79  <p>None of the activity indicators should be active all of the animations are outside of their active range.</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  async function run() {
     92    // Ensure we don't take the screenshot while paint-holding.
     93    await waitForCompositorReady();
     94    let scroller = document.querySelector('.scroller');
     95    scroller.scrollTo(0, 200);
     96    await waitForNextFrame();
     97    takeScreenshot();
     98  }
     99 </script>
    100 </html>