1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds Test: background-origin:padding-box</title>
5 <link href="mailto:finscn@gmail.com" rel="author" title="finscn">
6 <link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
7 <meta content="image" name="flags">
8 <meta content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" name="assert">
9
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 : padding-box;
42 }
43
44
45 </style>
46
47
48 </head>
49 <body>
50
51 <div class="infomation">
52 Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).
53 </div>
54
55 <div class="test-case">
56
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 </div>
67
68
69
70
71 </body></html>