border-radius-clip-002.htm (2183B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: Background is clipped to the curve of the content-box when 'background-clip: content-box'</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 7 <link rel="match" href="reference/border-radius-clip-002-ref.htm"> 8 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-clipping"> 9 <meta name="assert" content="Background is clipped to the curve of the content-box when 'background-clip: content-box'"> 10 <meta name=fuzzy content="0-70;0-50"> 11 <style type="text/css"> 12 #test-base 13 { 14 width: 98px; 15 height: 98px; 16 border: 10px double black; 17 padding: 11px; 18 border-radius: 40px; 19 background: red url(support/swatch-red.png); 20 background-clip: content-box; 21 } 22 #reference-cover 23 { 24 margin: -120px 0 40px 20px; 25 width: 100px; 26 height: 100px; 27 border-radius: 20px; 28 background-color: black; 29 } 30 31 #reference-base 32 { 33 width: 98px; 34 height: 98px; 35 margin-top: 62px; 36 margin-left: 20px; 37 border-radius: 20px; 38 background: red url(support/swatch-red.png); 39 } 40 #test-cover 41 { 42 margin-top: -120px; 43 border: 10px double black; 44 padding: 10px; 45 width: 100px; 46 height: 100px; 47 border-radius: 40px; 48 background-color: black; 49 background-clip: content-box; 50 } 51 </style> 52 </head> 53 <body> 54 <p>Test passes if there is no red visible on the page.</p> 55 <div id="test-base"></div> 56 <div id="reference-cover"></div> 57 <div id="reference-base"></div> 58 <div id="test-cover"></div> 59 </body> 60 </html>