1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Backgrounds Test: background-origin:content-box & border-radius</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 border-radius: 60px;
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 is the content-area(excludes padding-area ) of the DIV.<br>
53 When border-radius 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 </div>
67
68
69
70
71 </body></html>