old-content-object-fit-fill.html (1722B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: display content in a pseudo with object-fit: fill</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="content-object-fit-fill-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-20"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 #target { 11 width: 100px; 12 height: 100px; 13 contain: paint; 14 position: absolute; 15 top: 20px; 16 left: 20px; 17 view-transition-name: target; 18 background: lightblue; 19 } 20 #inner { 21 width: 10px; 22 height: 10px; 23 background: green; 24 top: 5px; 25 left: 10px; 26 } 27 #hidden { 28 background: pink; 29 width: 10px; 30 height: 10px; 31 view-transition-name: hidden; 32 } 33 34 html::view-transition-group(target) { 35 animation: unset; 36 transform: unset; 37 position: absolute; 38 top: 10px; 39 left: 10px; 40 width: 50px; 41 height: 50px; 42 } 43 44 html::view-transition-new(target) { 45 animation: unset; 46 opacity: 0; 47 } 48 html::view-transition-old(target) { 49 animation: unset; 50 opacity: 1; 51 object-fit: fill; 52 } 53 54 html::view-transition-group(hidden) { 55 animation-duration: 500s; 56 visibility: hidden; 57 } 58 59 html::view-transition-group(root) { animation: unset; opacity: 0; } 60 html::view-transition { background: lightpink; } 61 </style> 62 63 <div id=target><div id=inner></div></div> 64 <div id=hidden></div> 65 66 <script> 67 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 68 69 async function runTest() { 70 document.startViewTransition(() => { 71 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 72 }); 73 } 74 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 75 </script>