clip-path-larger-than-border-box-on-child-of-named-element-ref.html (595B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: clip-path larger than element bounds on child of a named element (ref)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <style> 7 body { 8 background: lightpink; 9 } 10 11 .target { 12 width: 100px; 13 height: 100px; 14 background: blue; 15 } 16 .child { 17 width: 10px; 18 height: 10px; 19 position: relative; 20 top: 100px; 21 left: 100px; 22 background: green; 23 clip-path: inset(-10px -100px -50px -20px); 24 } 25 </style> 26 27 <div class="target"> 28 <div class="child"></div> 29 </div>