tor-browser

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

content-with-transform-new-image.html (1494B)

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