old-content-object-view-box-clip-path-ref.html (955B)
1 <!DOCTYPE html> 2 <title>View transitions: object-view-box with larger overflow (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <style> 6 .target { 7 color: red; 8 width: 100px; 9 height: 100px; 10 contain: paint; 11 position: relative; 12 top: 50px; 13 left: 50px; 14 } 15 .child { 16 width: 123px; 17 height: 150px; 18 background: lightblue; 19 position: relative; 20 top: -10px; 21 left: -20px; 22 } 23 .grandchild { 24 width: 25px; 25 height: 25px; 26 position: relative; 27 top: 20px; 28 left: 40px; 29 background: green; 30 } 31 #one { clip-path: inset(10px 12px 20px 28px); } 32 #two { clip-path: inset(10px -12px 20px -28px); } 33 body { background: lightpink; } 34 </style> 35 36 <div id=one class=target> 37 <div class=child> 38 <div class=grandchild></div> 39 </div> 40 </div> 41 <div style="height: 20px;"></div> 42 <div id=two class=target> 43 <div class=child> 44 <div class=grandchild></div> 45 </div> 46 </div>