tor-browser

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

animating-new-content.html (1719B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: animations in the new element show up in the images</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 <link rel="match" href="animating-new-content-ref.html">
      7 
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="/common/rendering-utils.js"></script>
     10 <style>
     11 #target {
     12  width:100px;
     13  height:100px;
     14  background: blue;
     15  view-transition-name: target;
     16  will-change: transform;
     17 }
     18 
     19 .child {
     20  width: 50px;
     21  height: 50px;
     22  will-change: transform;
     23  background: green;
     24 }
     25 
     26 .hidden {
     27  width: 10px;
     28  height: 10px;
     29  background: grey;
     30  view-transition-name: hidden;
     31 }
     32 
     33 html::view-transition-group(hidden) { animation-duration: 300s; }
     34 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     35 
     36 html::view-transition-group(target) {
     37  animation: unset;
     38 }
     39 
     40 html::view-transition-old(target) {
     41  animation: unset;
     42  opacity: 0;
     43 }
     44 
     45 html::view-transition-new(target) {
     46  animation: unset;
     47  opacity: 1;
     48 }
     49 </style>
     50 
     51 <div id="target">
     52  <div class="child">
     53    I'm the inner composited child.
     54  </div>
     55 </div>
     56 <div class="hidden"></div>
     57 
     58 <script>
     59 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     60 
     61 async function runTest() {
     62  let transition = document.startViewTransition();
     63  transition.ready.then(async () => {
     64    await waitForAtLeastOneFrame();
     65    await waitForAtLeastOneFrame();
     66    target.style.background = "grey";
     67 
     68    await waitForAtLeastOneFrame();
     69    await waitForAtLeastOneFrame();
     70    takeScreenshot();
     71  });
     72 }
     73 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     74 </script>