tor-browser

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

fractional-box-new.html (1176B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: fractional box -- new content</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:vmpstr@chromium.org">
      6 <link rel="match" href="fractional-box-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <style>
      9 .box {
     10  margin: 15px;
     11  background: green;
     12  width: 100.125px;
     13  height: 50.875px;
     14 }
     15 .shift {
     16  position: relative;
     17  left: 0.4px;
     18 }
     19 html::view-transition-group(*) { animation-duration: 300s; }
     20 html::view-transition-new(*) { animation: unset; opacity: 1; }
     21 html::view-transition-old(*) { animation: unset; opacity: 0; }
     22 html::view-transition-group(root) { animation: unset; opacity: 0; }
     23 html::view-transition { background: lightpink; }
     24 </style>
     25 <div class="box" style="view-transition-name: one"></div>
     26 <div class="box shift" style="view-transition-name: two"></div>
     27 <script>
     28 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     29 
     30 async function runTest() {
     31  document.startViewTransition().ready.then(takeScreenshot);
     32 }
     33 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     34 </script>