tor-browser

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

content-with-transform-old-image.html (1523B)

      1 <!DOCTYPE html>
      2 <meta name="timeout" content="long">
      3 <html class=reftest-wait>
      4 <title>View transitions: object-view-box</title>
      5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      6 <link rel="author" href="mailto:khushalsagar@chromium.org">
      7 <link rel="match" href="content-with-transform-ref.html">
      8 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-400">
      9 
     10 <script src="/common/reftest-wait.js"></script>
     11 <style>
     12 .target {
     13  contain: paint;
     14  width: 100px;
     15  height: 100px;
     16  transform: scale(2.0, 3.0);
     17  view-transition-name: target;
     18 }
     19 
     20 .embedded {
     21  width: 100px;
     22  height: 50px;
     23 }
     24 
     25 .hidden {
     26  contain: paint;
     27  width: 10px;
     28  height: 10px;
     29  background: grey;
     30  view-transition-name: hidden;
     31 }
     32 
     33 html::view-transition-group(hidden) { animation-duration: 300s; }
     34 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     35 
     36 html::view-transition-old(target) {
     37  animation: unset;
     38  opacity: 1;
     39 }
     40 html::view-transition-new(target) { animation: unset; opacity: 0; }
     41 
     42 </style>
     43 
     44 <div id="target" class="target">
     45  <div class="embedded" style="background: green;">Shared</div>
     46  <div class="embedded" style="background: blue">Element</div>
     47 </div>
     48 <div id=hidden class=hidden></div>
     49 
     50 <script>
     51 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     52 
     53 async function runTest() {
     54  document.startViewTransition(() => {
     55    requestAnimationFrame(() =>  requestAnimationFrame(takeScreenshot));
     56  });
     57 }
     58 onload = () => requestAnimationFrame(runTest);
     59 </script>