background-clip-padding-box-with-border-radius.html (1652B)
1 <!DOCTYPE html> 2 <html> 3 <!-- Submitted from TestTWF Paris --> 4 <head> 5 6 <title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title> 7 <link rel="author" title="Lea Verou" href="http://lea.verou.me" /> 8 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> 9 <link rel="help" href="http://www.w3.org/TR/css3-background/#corner-shaping" /> 10 <link rel="match" href="reference/background-clip-padding-box-with-border-radius-ref.html" /> 11 <meta name="fuzzy" content="maxDifference=0-29;totalPixels=0-80" /> 12 <meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness." /> 13 <style> 14 div { 15 position: absolute; 16 } 17 18 .container { 19 position: relative; 20 width: 140px; 21 height: 140px; 22 margin: 10px; 23 } 24 25 .ref { 26 top: 10px; 27 left: 10px; 28 height: 140px; 29 width: 140px; 30 border-radius: 30px; 31 } 32 33 .test { 34 width: 100px; 35 height: 100px; 36 padding: 20px; 37 border: 10px solid transparent; 38 border-radius: 40px; 39 background-clip: padding-box; 40 } 41 42 .behind { 43 background-color: red; 44 } 45 46 .top { 47 background-color: green; 48 } 49 50 .ref.top { 51 width: 144px; 52 height: 144px; 53 left: 8px; 54 top: 8px; 55 } 56 57 .test.top { 58 width: 104px; 59 height: 104px; 60 left: -2px; 61 top: -2px; 62 } 63 </style> 64 65 </head> 66 <body> 67 68 <p>Test passes if there are two filled green rounded squares and <strong>no red</strong>.</p> 69 <div class="container"> 70 <div class="test behind"></div> 71 <div class="ref top"></div> 72 </div> 73 74 <div class="container"> 75 <div class="ref behind"></div> 76 <div class="test top"></div> 77 </div> 78 79 </body> 80 </html>