origin-border-box_with_position

background-origin:border-box & background-position

WeasyPrint

This browser

Flags
image
Assertion
border-box : The position is relative to the border box.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3   <title>CSS Backgrounds Test:  background-origin:border-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-origin" rel="help">
 6   <meta content="image" name="flags">
 7   <meta content="border-box : The position is relative to the border 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-origin : 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 painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
53 When background-position is enabled, the browser should paint the background correctly.
54 </div>
55 
56 <div class="test-case">
57 
58   <div class="view case no-repeat">
59       Test background-origin:
60   </div>
61 
62   <div class="view case">
63       Test background-origin:
64   </div>
65 
66 
67 </div>
68 
69 
70 
71 
72 </body></html>