| <!DOCTYPE html> |
| <title>Border radius should not round the clipping region when mixing overflow: visible and clip</title> |
| <link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping"> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434"> |
| <link rel="match" href="rounded-overflow-clip-visible-ref.html"> |
| <style> |
| .container { |
| width: 100px; |
| height: 50px; |
| overflow: clip visible; |
| background: red; |
| display: inline-block; |
| } |
| .border-radius { |
| border-radius: 25px; |
| } |
| .child { |
| width: 200px; |
| height: 100px; |
| background: green; |
| fill: green; |
| } |
| </style> |
| |
| There should be 4 100x100 green squares (no rounded corners) below.<br> |
| <div class="container border-radius"> |
| <div class="child"></div> |
| </div> |
| |
| <div class="container"> |
| <div class="child"></div> |
| </div> |
| |
| <svg class="container border-radius"> |
| <rect class="child"></rect> |
| </svg> |
| |
| <svg class="container"> |
| <rect class="child"></rect> |
| </svg> |
