| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Testing that child-background doesn't bleed through its parent border for a inner-border-radius that is larger than the content rect</title> |
| <link rel="match" href="inner-border-non-renderable-ref.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> |
| <link rel="assert" content="Testing that child-background doesn't bleed through its parent border for a inner-border-radius that is larger than the content rect"> |
| <style> |
| body { |
| font-size: 24px; |
| color: black; |
| margin: 8px; |
| } |
| .clipping { |
| width: 300px; |
| height: 200px; |
| overflow: hidden; |
| border: 30px solid green; |
| border-top-color: gold; |
| border-top-right-radius: 150px 267px; |
| background-color: blue; |
| } |
| .composited { |
| width: 100%; |
| height: 100%; |
| background-color: blue; |
| } |
| .clip-test { |
| clip-path: inset(60px 10px 190px 320px); |
| } |
| </style> |
| </head> |
| <body> |
| <div> Test passes if no blue square is shown:</div> |
| <div class="clipping clip-test"> |
| <div class="composited"></div> |
| </div> |
| </body> |
| </html> |
