origin-padding-box_with_radius

background-origin:padding-box & border-radius

WeasyPrint

This browser

Flags
image
Assertion
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.)

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3   <title>CSS Backgrounds Test:  background-origin:padding-box &amp; 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="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     border-radius: 60px;
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 border-radius 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>