clip-padding-box_with_position.html (1443B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>CSS Backgrounds Test: background-clip:padding-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="padding-box : The background is painted within (clipped to) the padding 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 : padding-box; 43 background-position: -15px -15px; 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 is the area covered by border(includes padding-area ).<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 </div> 67 68 </body> 69 70 </html>