1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Backgrounds Test: background-clip:border-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-clip" rel="help">
6 <meta content="image" name="flags">
7 <meta content="border-box : The background is painted within (clipped to) the border box." name="assert">
8
9 <meta charset="utf-8">
10
11 <style type="text/css">
12
13 .infomation {
14 padding : 10px;
15 font-size : 16pt;
16 margin : 5px;
17 }
18
19 .test-case {
20 padding : 5px;
21 margin : 5px;
22 }
23
24 .view {
25 border : 30px solid rgba(60,150,255,0.4);
26 width : 320px;
27 height : 240px;
28 padding : 30px;
29 margin : 10px;
30 font-size : 16pt;
31 color : #ff9933;
32 background-image : url("../support/css3.png");
33 }
34
35 .no-repeat {
36 background-repeat : no-repeat;
37 }
38
39 .case {
40 background-clip : border-box;
41 background-size : 50%;
42 }
43
44
45 </style>
46
47 </head>
48 <body>
49
50 <div class="infomation">
51 Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
52 When background-size is enabled, the browser should clip the background correctly.
53 </div>
54
55 <div class="test-case">
56
57 <div class="view case no-repeat" id="border-box">
58 Test background-clip:
59 </div>
60
61 <div class="view case" id="border-box">
62 Test background-clip:
63 </div>
64
65 </div>
66
67
68
69
70 </body></html>