rounded-overflow-visible-clip.html (951B)
1 <!DOCTYPE html> 2 <title>Border radius should not round the clipping region when mixing overflow: visible and clip</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434"> 5 <link rel="match" href="rounded-overflow-visible-clip-ref.html"> 6 <style> 7 .container { 8 width: 50px; 9 height: 100px; 10 overflow: visible clip; 11 background: red; 12 display: inline-block; 13 } 14 .border-radius { 15 border-radius: 25px; 16 } 17 .child { 18 width: 100px; 19 height: 200px; 20 background: green; 21 fill: green; 22 } 23 </style> 24 25 There should be 4 100x100 green squares (no rounded corners) below.<br> 26 <div class="container border-radius"> 27 <div class="child"></div> 28 </div> 29 <br> 30 <div class="container"> 31 <div class="child"></div> 32 </div> 33 <br> 34 <svg class="container border-radius"> 35 <rect class="child"></rect> 36 </svg> 37 <br> 38 <svg class="container"> 39 <rect class="child"></rect> 40 </svg>