1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Backgrounds Test: background-origin:content-box & 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="content-box : The position is relative 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-origin : content-box;
42 background-position: -15px -15px;
43 }
44
45
46 </style>
47
48 </head>
49 <body>
50
51 <div class="infomation">
52
53
54 Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br>
55 When background-position is enabled, the browser should paint the background correctly.
56 </div>
57
58 <div class="test-case">
59
60 <div class="view case no-repeat">
61 Test background-origin
62 </div>
63
64 <div class="view case">
65 Test background-origin
66 </div>
67
68 </div>
69
70
71
72
73 </body></html>