|
1 <!DOCTYPE html> |
|
2 <html lang="en-US"> |
|
3 <head> |
|
4 <title>test of border-image: number repetition</title> |
|
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
6 <meta http-equiv="Content-Style-Type" content="text/css"> |
|
7 <style type="text/css"> |
|
8 |
|
9 div { |
|
10 background: red; /* fail if this shows through */ |
|
11 background-image: url('3x3multicolor.png'); /* fail if this shows through */ |
|
12 margin-bottom: 2px; |
|
13 } |
|
14 |
|
15 div.one { |
|
16 border-width: 4px 6px 8px 6px; |
|
17 border-style: solid; |
|
18 border-image: url(10x5multicolor.png) 2 2 2 2; |
|
19 -khtml-border-image: url(10x5multicolor.png) 2 2 2 2; |
|
20 border-image: url(10x5multicolor.png) 2 2 2 2; |
|
21 width: 5px; |
|
22 height: 2px; |
|
23 } |
|
24 |
|
25 div.two { |
|
26 border-width: 4px 4px 4px 4px; |
|
27 border-style: solid; |
|
28 border-image: url(10x5multicolor.png) 2 1 2 1; |
|
29 -khtml-border-image: url(10x5multicolor.png) 2 1 2 1; |
|
30 border-image: url(10x5multicolor.png) 2 1 2 1; |
|
31 width: 5px; |
|
32 height: 2px; |
|
33 } |
|
34 |
|
35 div.three { |
|
36 border-width: 4px 2px 4px 2px; |
|
37 border-style: solid; |
|
38 border-image: url(10x5multicolor.png) 2 3 1 3; |
|
39 -khtml-border-image: url(10x5multicolor.png) 2 3 1 3; |
|
40 border-image: url(10x5multicolor.png) 2 3 1 3; |
|
41 width: 5px; |
|
42 height: 2px; |
|
43 } |
|
44 |
|
45 div.four { |
|
46 border-width: 4px 3px 4px 3px; |
|
47 border-style: solid; |
|
48 border-image: url(10x5multicolor.png) 2 3 1 1; |
|
49 -khtml-border-image: url(10x5multicolor.png) 2 3 1 1; |
|
50 border-image: url(10x5multicolor.png) 2 3 1 1; |
|
51 width: 5px; |
|
52 height: 2px; |
|
53 } |
|
54 |
|
55 </style> |
|
56 </head> |
|
57 <body> |
|
58 <div class="one"></div> |
|
59 <div class="two"></div> |
|
60 <div class="three"></div> |
|
61 <div class="four"></div> |
|
62 </body> |
|
63 </html> |