tor-browser

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

capture-with-visibility-mixed-descendants.html (1541B)

      1 <!doctype html>
      2 <html class=reftest-wait>
      3 <title>View transitions: visibility hidden/visible descendants</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="capture-with-visibility-mixed-descendants-ref.html">
      7 <meta name=fuzzy content="maxDifference=0-5; totalPixels=0-500">
      8 <script src="/common/reftest-wait.js"></script>
      9 
     10 <style>
     11 :root {
     12  scrollbar-width: none;
     13 }
     14 .target {
     15  width: 100px;
     16  height: 100px;
     17  view-transition-name: target;
     18  background: blue;
     19 }
     20 .invisible {
     21  top: 200px;
     22  left: 200px;
     23  width: 500px;
     24  height: 500px;
     25  position: relative;
     26  background: red;
     27  visibility: hidden;
     28 }
     29 .visible {
     30  background: green;
     31  width: 10px;
     32  height: 10px;
     33  visibility: visible;
     34 }
     35 
     36 ::view-transition-group(root) {
     37  visibility: hidden;
     38  animation-duration: 500s;
     39 }
     40 
     41 ::view-transition-group(*),
     42 ::view-transition-image-pair(*) {
     43  animation-play-state: paused;
     44 }
     45 
     46 ::view-transition-old(*) {
     47  animation: unset;
     48  opacity: 1;
     49 }
     50 
     51 ::view-transition-new(*) {
     52  animation: unset;
     53  opacity: 0;
     54 }
     55 
     56 ::view-transition {
     57  background: pink;
     58 }
     59 </style>
     60 
     61 <div class=target>
     62  <div class=invisible><div class=visible></div></div>
     63 </div>
     64 
     65 <script>
     66 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     67 
     68 function runTest() {
     69  const transition = document.startViewTransition();
     70  transition.ready.then(takeScreenshot);
     71 }
     72 
     73 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     74 </script>