clip-border-box_with_position.html (1461B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>CSS Backgrounds Test: background-clip:border-box & background-position</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 background-position: -15px -15px; 43 } 44 45 46 </style> 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 When background-position is enabled, the browser should clip the background correctly. 54 </div> 55 56 <div class="test-case"> 57 58 <div class="view case no-repeat" > 59 Test background-clip: 60 </div> 61 62 <div class="view case" > 63 Test background-clip: 64 </div> 65 66 67 </div> 68 69 </body> 70 71 </html>