clip-content-box_with_radius.html (1421B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>CSS Backgrounds Test: background-clip:content-box & border-radius</title> 5 <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > 7 <meta name="flags" content="image"> 8 <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." > 9 10 <meta charset="utf-8"> 11 12 13 <style type="text/css"> 14 15 .infomation { 16 padding : 10px; 17 font-size : 16pt; 18 margin : 5px; 19 } 20 21 .test-case { 22 padding : 5px; 23 margin : 5px; 24 } 25 26 .view { 27 border : 30px solid rgba(60,150,255,0.4); 28 width : 320px; 29 height : 240px; 30 padding : 30px; 31 margin : 10px; 32 font-size : 16pt; 33 color : #ff9933; 34 background-image : url("../support/css3.png"); 35 } 36 37 .no-repeat { 38 background-repeat : no-repeat; 39 } 40 41 .case { 42 background-clip : content-box; 43 border-radius: 60px; 44 } 45 46 47 </style> 48 49 </head> 50 <body> 51 52 <div class="infomation"> 53 Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br> 54 When border-radius is enabled, the browser should clip the background correctly. 55 </div> 56 57 <div class="test-case"> 58 59 <div class="view case no-repeat" > 60 Test background-clip 61 </div> 62 63 <div class="view case" > 64 Test background-clip 65 </div> 66 67 </div> 68 69 </body> 70 71 </html>