border-image-4

CSS Border and Background: border-image #4 border-image-slice

WeasyPrint

This browser

Assertion
Support for percentage with the border-image-slice property

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3     <meta charset="utf-8">
 4     <title>
 5         CSS Border and Background: border-image #4 border-image-slice
 6     </title>
 7     <meta content="Support for percentage with the border-image-slice property" name="assert">
 8 
 9     <link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier">
10 
11     <link href="http://www.w3.org/TR/css3-background/#border-image-slice" rel="help">
12 
13     <style type="text/css">
14 
15         #fail {
16             background-color: red;
17             width  : 60px;
18             height : 60px;
19         }
20 
21         #filler {
22             background-color: #009900;
23             width  : 40px;
24             height : 40px;
25         }
26 
27         #test {
28             border : 10px solid red;
29             width  : 40px;
30             height : 40px;
31 
32             border-image-source: url(support/img-ref-1.png);
33             border-image-slice : 33%;
34         }
35 
36     </style>
37 
38 </head>
39 <body>
40 
41     <p>
42         Pass if the square is fully green.
43     </p>
44 
45     <div id="fail">
46         <div id="test">
47             <div id="filler"></div>
48         </div>
49     </div>
50 
51 
52 
53 </body></html>