inner-border-non-renderable.html (1281B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <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> 5 <link rel="match" href="inner-border-non-renderable-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> 7 <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"> 8 <style> 9 body { 10 font-size: 24px; 11 color: black; 12 margin: 8px; 13 } 14 .clipping { 15 width: 300px; 16 height: 200px; 17 overflow: hidden; 18 border: 30px solid green; 19 border-top-color: gold; 20 border-top-right-radius: 150px 267px; 21 background-color: blue; 22 } 23 .composited { 24 width: 100%; 25 height: 100%; 26 background-color: blue; 27 } 28 .clip-test { 29 clip-path: inset(60px 10px 190px 320px); 30 } 31 </style> 32 </head> 33 <body> 34 <div> Test passes if no blue square is shown:</div> 35 <div class="clipping clip-test"> 36 <div class="composited"></div> 37 </div> 38 </body> 39 </html>