tor-browser

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

root-element-transition.html (1118B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>View transitions: basic cross-document navigation (new page)</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 <link rel="match" href="root-element-transition-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <script>
      9 onload = takeScreenshot;
     10 </script>
     11 <style>
     12 @view-transition { navigation: auto; }
     13 
     14 html {
     15  background: grey;
     16 }
     17 .hidden {
     18  width: 10px;
     19  height: 10px;
     20  view-transition-name: hidden;
     21  background: green;
     22  contain: layout;
     23 }
     24 html::view-transition-group(hidden) { animation-duration: 300s; }
     25 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     26 html::view-transition-new(*), html::view-transition-old(*) {
     27  opacity: 1;
     28  animation: unset;
     29 }
     30 html::view-transition-old(root) {
     31  width: 50vw;
     32  height: 100vh;
     33  position: fixed;
     34  left: 0px;
     35  top: 0px;
     36 }
     37 html::view-transition-new(root) {
     38  width: 50vw;
     39  height: 100vh;
     40  position: fixed;
     41  left: 50vw;
     42  top: 0px;
     43  opacity: 1;
     44 }
     45 </style>
     46 <div class="hidden"></div>
     47 </html>