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