tor-browser

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

content-with-clip-root.html (1979B)

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