background-rounded-image-clip-002.html (1046B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Background Clip Follows Rounded Corner</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-100"> 6 <link rel="match" href="../reference/ref-filled-green-200px-square.html"> 7 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> 8 <link rel="help" href="https://github.com/servo/servo/issues/29685"> 9 <style> 10 .wrapper { 11 width: 200px; 12 height: 200px; 13 background: red; 14 } 15 .wrapper > * { 16 position: absolute; 17 width: 100px; 18 height: 100px; 19 border: 50px solid green; 20 } 21 .round-border { 22 border-radius: 100px 150px 200px 250px / 350px; 23 } 24 .background { 25 border-color: transparent; 26 background: linear-gradient(green, green) padding-box; 27 transform: scale(1.05); 28 } 29 </style> 30 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 31 <div class="wrapper"> 32 <div class="round-border background"></div> 33 <div class="round-border"></div> 34 <div></div> 35 </div>