old-content-object-view-box-overflow.html (1626B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: object-view-box with larger overflow</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="old-content-object-view-box-overflow-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 .target { 10 color: red; 11 width: 100px; 12 height: 100px; 13 contain: paint; 14 overflow-clip-margin: 1000px; 15 position: relative; 16 top: 50px; 17 left: 50px; 18 view-transition-name: target; 19 } 20 .child { 21 width: 123px; 22 height: 150px; 23 background: lightblue; 24 position: relative; 25 top: -10px; 26 left: -20px; 27 } 28 .grandchild { 29 width: 25px; 30 height: 25px; 31 position: relative; 32 top: 20px; 33 left: 40px; 34 background: green; 35 } 36 37 html::view-transition-group(target) { animation-duration: 300s; } 38 html::view-transition-new(target) { animation: unset; opacity: 0; } 39 html::view-transition-old(target) { 40 animation: unset; 41 opacity: 1; 42 /* clip overflow, and verify inner contents only */ 43 overflow: hidden; 44 height: 100%; 45 } 46 47 html::view-transition-group(root) { animation: unset; opacity: 0; } 48 html::view-transition { background: lightpink; } 49 </style> 50 51 <div class=target> 52 <div class=child> 53 <div class=grandchild></div> 54 </div> 55 </div> 56 57 <script> 58 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 59 60 async function runTest() { 61 document.startViewTransition(() => 62 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))); 63 } 64 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 65 </script>