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