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