tor-browser

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

root-element-transition-no-opt-in.html (1088B)


      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-no-opt-in-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <script>
      9 onload = takeScreenshot;
     10 </script>
     11 <style>
     12 html {
     13  background: grey;
     14 }
     15 .hidden {
     16  width: 10px;
     17  height: 10px;
     18  view-transition-name: hidden;
     19  background: green;
     20  contain: layout;
     21 }
     22 html::view-transition-group(hidden) { animation-duration: 300s; }
     23 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     24 html::view-transition-new(*), html::view-transition-old(*) {
     25  opacity: 1;
     26  animation: unset;
     27 }
     28 html::view-transition-old(root) {
     29  width: 50vw;
     30  height: 100vh;
     31  position: fixed;
     32  left: 0px;
     33  top: 0px;
     34 }
     35 html::view-transition-new(root) {
     36  width: 50vw;
     37  height: 100vh;
     38  position: fixed;
     39  left: 50vw;
     40  top: 0px;
     41  opacity: 1;
     42 }
     43 </style>
     44 <div class="hidden"></div>
     45 </html>