tor-browser

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

content-with-clip.html (2048B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: element with clip</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-clip-ref.html">
      7 
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10 :root {
     11  scrollbar-width: none;
     12 }
     13 .target {
     14  contain: paint;
     15  width: 100px;
     16  height: 100vh;
     17  position: relative;
     18  top: 50vh;
     19  display: inline-block;
     20 }
     21 
     22 .embedded {
     23  width: 100%;
     24  height: 50%;
     25 }
     26 
     27 .hidden {
     28  contain: paint;
     29  width: 10px;
     30  height: 10px;
     31  background: grey;
     32  view-transition-name: hidden;
     33 }
     34 
     35 /* Makes sure the viewport height is consistent for scrollbars to align */
     36 body {
     37  height: 150vh;
     38 }
     39 
     40 html::view-transition {
     41  background: pink;
     42  height: 100%;
     43 }
     44 html::view-transition-group(hidden) { animation-duration: 300s; }
     45 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     46 
     47 html::view-transition-group(target1), html::view-transition-group(target2) {
     48  position: absolute;
     49  top: -50vh;
     50 }
     51 html::view-transition-old(target1) { animation: unset; opacity: 1; }
     52 html::view-transition-new(target2) { animation: unset; opacity: 1; }
     53 html::view-transition-group(root) { display: none }
     54 
     55 </style>
     56 
     57 <div id="target1" class="target" style="view-transition-name: target1">
     58  <div class="embedded" style="background: green;"></div>
     59  <div class="embedded" style="background: blue"></div>
     60 </div>
     61 <div id="target2" class="target">
     62  <div class="embedded" style="background: green;"></div>
     63  <div class="embedded" style="background: blue"></div>
     64 </div>
     65 <div id=hidden class=hidden></div>
     66 
     67 <script>
     68 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     69 
     70 async function runTest() {
     71  let transition = document.startViewTransition(() => {
     72    target1.style = "";
     73    target2.style = "view-transition-name: target2";
     74  });
     75  transition.ready.then(takeScreenshot);
     76 }
     77 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     78 </script>