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