1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Backgrounds Test: background-origin:border-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="border-box : The position is relative to the border box." 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 : border-box;
42 }
43
44 </style>
45
46 </head>
47 <body>
48
49 <div class="infomation">
50 Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
51 </div>
52
53 <div class="test-case">
54
55 <div class="view case no-repeat">
56 Test background-origin
57 </div>
58
59 <div class="view case">
60 Test background-origin
61 </div>
62
63
64 </div>
65
66
67
68
69 </body></html>