tor-browser

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

far-away-capture.html (2518B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: offscreen 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="far-away-capture-ref.html">
      7 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5">
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10 .flex {
     11  display: flex;
     12  flex-direction: row;
     13  justify-content: flex-start;
     14  align-items: flex-start;
     15 }
     16 .box {
     17  width: 100px;
     18  height: 500px;
     19  contain: paint;
     20 }
     21 .shared {
     22  background: green;
     23  border: 1px solid black;
     24  box-sizing: border-box;
     25 }
     26 .spacer {
     27  height: 1000px;
     28 }
     29 #hidden {
     30  width: 10px;
     31  height: 10px;
     32  background: red;
     33  contain: paint;
     34  view-transition-name: hidden;
     35 }
     36 
     37 html::view-transition-group(hidden) { animation-duration: 300s; }
     38 html::view-transition-image-pair(hidden) { visibility: hidden; }
     39 
     40 html::view-transition-group(*) { animation-duration: 0s; }
     41 html::view-transition-new(*) { animation: unset; opacity: 0; }
     42 html::view-transition-old(*) { animation: unset; opacity: 1; }
     43 html::view-transition-group(root) { display: none; }
     44 html::view-transition { background: pink }
     45 
     46 </style>
     47 
     48 <div class=flex>
     49 <div id=dst1 class=box></div>
     50 <div id=dst2 class=box></div>
     51 <div id=dst3 class=box></div>
     52 <div id=dst4 class=box></div>
     53 <div id=dst5 class=box></div>
     54 </div>
     55 <div id=hidden></div>
     56 <div id=content>
     57 <div id=src1 class="box shared" style="view-transition-name: one">500</div>
     58 <div class=spacer></div>
     59 <div id=src2 class="box shared" style="view-transition-name: two">2000</div>
     60 <div class=spacer></div>
     61 <div id=src3 class="box shared" style="view-transition-name: three">3500</div>
     62 <div class=spacer></div>
     63 <div id=src4 class="box shared" style="view-transition-name: four">5000</div>
     64 <div class=spacer></div>
     65 <div id=src5 class="box shared" style="view-transition-name: five">6500</div>
     66 </div>
     67 
     68 <script>
     69 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     70 
     71 async function runTest() {
     72  document.startViewTransition(() => {
     73    content.remove();
     74    dst1.style = "view-transition-name: one";
     75    dst2.style = "view-transition-name: two";
     76    dst3.style = "view-transition-name: three";
     77    dst4.style = "view-transition-name: four";
     78    dst5.style = "view-transition-name: five";
     79    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
     80  });
     81 }
     82 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     83 </script>