clip-content-box_with_position

background-clip:content-box & background-position

WeasyPrint

This browser

Flags
image
Assertion
content-box : The background is painted within (clipped to) the content box.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3   <title>CSS Backgrounds Test:  background-clip:content-box &amp; background-position</title>
 4   <link href="mailto:finscn@gmail.com" rel="author" title="finscn">
 5   <link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
 6   <meta content="image" name="flags">
 7   <meta content="content-box : The background is painted within (clipped to) the content box." name="assert">
 8 
 9   <meta charset="utf-8">
10 
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 : content-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 is the content-area(excludes padding-area ) of the DIV.<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 
69 
70 
71 </body></html>