tor-browser

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

small-scale.html (1165B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <link rel="match" href="small-scale-ref.html">
      4 <link rel="help" href="https://bugzil.la/1968672">
      5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      6 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
      7 <link rel="author" href="https://mozilla.org" title="Mozilla">
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10  :root {
     11    view-transition-name: none;
     12  }
     13  body { margin: 0 }
     14  .outer {
     15    /* Removing this makes it work */
     16    transform: scale(0.5);
     17  }
     18  .inner {
     19    view-transition-name: inner;
     20    width: 200px;
     21    height: 200px;
     22    background-color: green;
     23  }
     24  :root::view-transition {
     25    background: pink;
     26  }
     27  :root::view-transition-group(inner),
     28  :root::view-transition-image-pair(inner),
     29  :root::view-transition-old(inner),
     30  :root::view-transition-new(inner) {
     31    animation-play-state: paused;
     32  }
     33 </style>
     34 
     35 <div class="outer">
     36  <div class="inner"></div>
     37 </div>
     38 <script>
     39 onload = function () {
     40  requestAnimationFrame(() => requestAnimationFrame(() => {
     41    document.startViewTransition().ready.then(takeScreenshot);
     42  }));
     43 }
     44 </script>