clip-border-box.html (1312B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>CSS Backgrounds Test: background-clip:border-box</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="border-box : The background is painted within (clipped to) the border box." > 9 10 <meta charset="utf-8"> 11 12 <style type="text/css"> 13 14 .infomation { 15 padding : 10px; 16 font-size : 16pt; 17 margin : 5px; 18 } 19 20 .test-case { 21 padding : 5px; 22 margin : 5px; 23 } 24 25 .view { 26 border : 30px solid rgba(60,150,255,0.4); 27 width : 320px; 28 height : 240px; 29 padding : 30px; 30 margin : 10px; 31 font-size : 16pt; 32 color : #ff9933; 33 background-image : url("../support/css3.png"); 34 } 35 36 .no-repeat { 37 background-repeat : no-repeat; 38 } 39 40 .case { 41 background-clip : border-box; 42 } 43 44 45 </style> 46 47 48 </head> 49 <body> 50 51 <div class="infomation"> 52 Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br> 53 </div> 54 55 <div class="test-case"> 56 57 <div class="view case no-repeat" > 58 Test background-clip 59 </div> 60 61 <div class="view case" > 62 Test background-clip 63 </div> 64 65 66 </div> 67 68 </body> 69 70 </html>