new-content-object-view-box-clip-path.html (2051B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: object-view-box with larger clip-path</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-clip-path-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 } 19 .child { 20 width: 123px; 21 height: 150px; 22 background: lightblue; 23 position: relative; 24 top: -10px; 25 left: -20px; 26 } 27 .grandchild { 28 width: 25px; 29 height: 25px; 30 position: relative; 31 top: 20px; 32 left: 40px; 33 background: green; 34 } 35 #one { 36 view-transition-name: target-one; 37 clip-path: inset(10px 12px 20px 28px); 38 } 39 #two { 40 view-transition-name: target-two; 41 clip-path: inset(10px -12px 20px -28px); 42 } 43 44 html::view-transition-group(target-one), 45 html::view-transition-group(target-two) { animation-duration: 300s; } 46 html::view-transition-old(target-one), 47 html::view-transition-old(target-two) { animation: unset; opacity: 0; height: 100%; } 48 html::view-transition-new(target-one), 49 html::view-transition-new(target-two) { 50 animation: unset; 51 opacity: 1; 52 /* clip overflow, and verify inner contents only */ 53 overflow: hidden; 54 height: 100%; 55 } 56 57 html::view-transition-group(root) { animation: unset; opacity: 0; } 58 html::view-transition { background: lightpink; } 59 </style> 60 61 <div id=one class=target> 62 <div class=child> 63 <div class=grandchild></div> 64 </div> 65 </div> 66 <div style="height: 20px;"></div> 67 <div id=two class=target> 68 <div class=child> 69 <div class=grandchild></div> 70 </div> 71 </div> 72 73 <script> 74 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 75 76 async function runTest() { 77 document.startViewTransition(() => 78 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))); 79 } 80 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 81 </script>