old-content-with-object-view-box.html (1325B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <html class=reftest-wait> 4 <title>View transitions: capture elements with object view box on the pseudo</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="author" href="mailto:vmpstr@chromium.org"> 7 <link rel="match" href="content-with-object-view-box-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 #target { 11 position: relative; 12 top: 100px; 13 left: 100px; 14 background: green; 15 width: 100px; 16 height: 100px; 17 view-transition-name: target; 18 } 19 20 html::view-transition-group(*) { animation-duration: 300s; } 21 html::view-transition-old(*) { 22 object-view-box: inset(5px 10px 15px 20px); 23 /* Need to specify explicit dimensions since view box changes intrinsic size */ 24 width: 100px; 25 height: 100px; 26 animation: unset; 27 opacity: 1; 28 } 29 html::view-transition-new(*) { animation: unset; opacity: 0; } 30 html::view-transition-group(root) { animation: unset; opacity: 0; } 31 html::view-transition { background: pink; } 32 </style> 33 <div id=target></div> 34 <script> 35 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 36 37 async function runTest() { 38 document.startViewTransition().ready.then(takeScreenshot); 39 } 40 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 41 </script>