tor-browser

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

content-visibility-auto-shared-element.html (2321B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: offscreen content with content-visibility auto</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="content-visibility-auto-shared-element-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <style>
      9 body {
     10  overflow: hidden;
     11 }
     12 .flex {
     13  display: flex;
     14  flex-direction: row;
     15  justify-content: flex-start;
     16  align-items: flex-start;
     17 }
     18 .box {
     19  width: 100px;
     20  height: 500px;
     21  contain: paint;
     22 }
     23 .shared {
     24  background: green;
     25  border: 1px solid black;
     26  box-sizing: border-box;
     27 }
     28 .spacer {
     29  height: 3000px;
     30 }
     31 #hidden {
     32  width: 10px;
     33  height: 10px;
     34  background: red;
     35  contain: paint;
     36  view-transition-name: hidden;
     37 }
     38 .locked {
     39  content-visibility: auto;
     40  contain-intrinsic-size: 500px;
     41 }
     42 
     43 html::view-transition-group(hidden) { animation-duration: 300s; }
     44 html::view-transition-image-pair(hidden) { visibility: hidden; }
     45 
     46 html::view-transition-group(*) { animation-duration: 0s; }
     47 html::view-transition-new(*) { animation: unset; opacity: 0; }
     48 html::view-transition-old(*) { animation: unset; opacity: 1; }
     49 html::view-transition-group(root) { display: none; }
     50 html::view-transition { background: pink }
     51 
     52 </style>
     53 
     54 <div class=flex>
     55 <div id=dst1 class=box></div>
     56 <div id=dst2 class=box></div>
     57 <div id=dst3 class=box></div>
     58 </div>
     59 <div id=hidden></div>
     60 <div class=spacer></div>
     61 <div id=content>
     62 <div id=lockme><div id=src1 class="box shared" style="view-transition-name: one">ancestor c-v</div></div>
     63 <div id=src2 class="box shared locked" style="view-transition-name: two">self c-v</div>
     64 <div id=src3 class="box shared" style="view-transition-name: three"><div class=locked>descendant c-v</div></div>
     65 </div>
     66 
     67 <script>
     68 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     69 
     70 async function runTest() {
     71  lockme.classList.add("locked");
     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    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
     78  });
     79 }
     80 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     81 </script>