old-content-object-view-box-clip-path.html (2117B)
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="old-content-object-view-box-clip-path-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-30"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .target { 11 color: red; 12 width: 100px; 13 height: 100px; 14 contain: paint; 15 overflow-clip-margin: 1000px; 16 position: relative; 17 top: 50px; 18 left: 50px; 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 #one { 37 view-transition-name: target-one; 38 clip-path: inset(10px 12px 20px 28px); 39 } 40 #two { 41 view-transition-name: target-two; 42 clip-path: inset(10px -12px 20px -28px); 43 } 44 45 html::view-transition-group(target-one), 46 html::view-transition-group(target-two) { animation-duration: 300s; } 47 html::view-transition-new(target-one), 48 html::view-transition-new(target-two) { animation: unset; opacity: 0; height: 100%; } 49 html::view-transition-old(target-one), 50 html::view-transition-old(target-two) { 51 animation: unset; 52 opacity: 1; 53 /* clip overflow, and verify inner contents only */ 54 overflow: hidden; 55 height: 100%; 56 } 57 58 html::view-transition-group(root) { animation: unset; opacity: 0; } 59 html::view-transition { background: lightpink; } 60 </style> 61 62 <div id=one class=target> 63 <div class=child> 64 <div class=grandchild></div> 65 </div> 66 </div> 67 <div style="height: 20px;"></div> 68 <div id=two class=target> 69 <div class=child> 70 <div class=grandchild></div> 71 </div> 72 </div> 73 74 <script> 75 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 76 77 async function runTest() { 78 document.startViewTransition(() => 79 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))); 80 } 81 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 82 </script>