pseudo-element-overflow-clip-with-border-radius-ref.html (792B)
1 <!-- Ref file is based off pseudo-element-overflow-clip-ref.html by mattwoodrow@apple.com --> 2 <!DOCTYPE html> 3 <html style="background:pink"> 4 <title>View transitions: overflow:clip with border-radius is respected on pseudo elements</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <style> 7 body { 8 margin: 0px; 9 } 10 div { 11 width: 200px; 12 height: 200px; 13 } 14 #target { 15 position: absolute; 16 width: 200px; 17 height: 200px; 18 background: green; 19 overflow: clip; 20 overflow-clip-margin: 30px; 21 border-bottom-right-radius: 30px; 22 } 23 #inner { 24 position: relative; 25 left: 100px; 26 top: 100px; 27 background: blue; 28 } 29 .offset { 30 left: 400px; 31 } 32 </style> 33 34 <div id="target"><div id="inner"></div></div> 35 <div id="target" class="offset"><div id="inner"></div></div> 36 </html>