old-content-object-view-box-clip-path-reference.html (2318B)
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-reference-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-100"> 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: url(#clip1); 39 } 40 #two { 41 view-transition-name: target-two; 42 clip-path: url(#clip2) 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 <svg> 75 <defs> 76 <clipPath id="clip1"> 77 <rect x="10" y="20" width="70" height="50" /> 78 </clipPath> 79 <clipPath id="clip2"> 80 <rect x="-10" y="20" width="130" height="50" /> 81 </clipPath> 82 </defs> 83 </svg> 84 85 <script> 86 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 87 88 async function runTest() { 89 document.startViewTransition(() => 90 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))); 91 } 92 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 93 </script>