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>