new-content-object-view-box-overflow.html (1641B)
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="new-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) { 39 animation: unset; 40 opacity: 1; 41 42 /* clip overflow, and verify inner contents only */ 43 overflow: hidden; 44 height: 100%; 45 } 46 html::view-transition-old(target) { animation: unset; opacity: 0; height: 100%; } 47 48 html::view-transition-group(root) { animation: unset; opacity: 0; } 49 html::view-transition { background: lightpink; } 50 </style> 51 52 <div class=target> 53 <div class=child> 54 <div class=grandchild></div> 55 </div> 56 </div> 57 58 <script> 59 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 60 61 async function runTest() { 62 document.startViewTransition(() => 63 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))); 64 } 65 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 66 </script>