tor-browser

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

set-current-time-transform.html (1492B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: set current time</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
      5 <link rel="author" href="mailto:vmpstr@chromium.org">
      6 <link rel="match" href="set-current-time-transform-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <style>
      9 :root { view-transition-name: unset; }
     10 #target {
     11  width: 100px;
     12  height: 100px;
     13  background: blue;
     14  view-transition-name: target;
     15  position: relative;
     16 }
     17 .left {
     18  left: 0;
     19 }
     20 .right {
     21  left: 100px;
     22 }
     23 
     24 html::view-transition-group(*) {
     25  animation: unset;
     26 }
     27 html::view-transition-old(*) {
     28  animation: unset;
     29  opacity: 0;
     30 }
     31 @keyframes move {
     32  from {
     33    transform: translate(500px);
     34  }
     35 }
     36 html::view-transition-new(target) {
     37  animation-name: move;
     38  animation-duration: 1s;
     39  animation-timing-function: linear;
     40  animation-play-state: paused;
     41 }
     42 </style>
     43 
     44 <div id=target class=left></div>
     45 
     46 <script>
     47 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     48 
     49 async function runTest() {
     50  let transition = document.startViewTransition(() => target.classList.replace("left", "right"));
     51  transition.ready.then(() => {
     52    requestAnimationFrame(() => requestAnimationFrame(() => {
     53      document.getAnimations().forEach((animation) => {
     54        animation.currentTime = 500;
     55      });
     56      requestAnimationFrame(takeScreenshot);
     57    }));
     58  });
     59 }
     60 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     61 </script>