object-view-box-old-image.html (1709B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <html class=reftest-wait> 4 <title>View transitions: object-view-box</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="author" href="mailto:khushalsagar@chromium.org"> 7 <link rel="match" href="object-view-box-ref.html"> 8 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-300"> 9 10 <script src="/common/reftest-wait.js"></script> 11 <style> 12 .target { 13 contain: paint; 14 width: 100px; 15 height: 100px; 16 transform: scale(2.0, 3.0); 17 position: relative; 18 top: 200px; 19 left: 200px; 20 view-transition-name: target; 21 } 22 23 .embedded { 24 width: 100%; 25 height: 50%; 26 } 27 28 .hidden { 29 contain: paint; 30 width: 10px; 31 height: 10px; 32 background: grey; 33 view-transition-name: hidden; 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-new(target) { 40 animation: unset; 41 opacity: 0; 42 height: 100%; 43 } 44 html::view-transition-old(target) { 45 animation: unset; 46 opacity: 1; 47 object-view-box: inset(50px 0px 0px 0px); 48 object-fit: none; 49 object-position: 0% 0%; 50 height: 100%; 51 contain: paint; 52 } 53 54 </style> 55 56 <div id="target" class="target"> 57 <div class="embedded" style="background: green;"></div> 58 <div class="embedded" style="background: blue">SharedElement</div> 59 </div> 60 <div id=hidden class=hidden></div> 61 62 <script> 63 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 64 65 async function runTest() { 66 document.startViewTransition(() => { 67 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 68 }); 69 } 70 onload = () => requestAnimationFrame(runTest); 71 </script>