4 <title>test of border-image
</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">
10 * This is a copy of multicolor-image-2.html with a few changes:
11 * (1) the whole thing is inside a -moz-transform
12 * (2) different border-images have different values for
13 * repeat/stretch/round
18 -moz-transform: translate
(100px, 100px) scale
(2,3);
19 -moz-transform-origin: 0 0;
20 -khtml-transform: translate
(100px, 100px) scale
(2,3);
21 -khtml-transform-origin: 0 0;
22 transform: translate
(100px, 100px) scale
(2,3);
23 transform-origin: 0 0;
27 background: red
; /* fail if this shows through */
28 background-image: url
('3x3multicolor.png'); /* fail if this shows through */
33 border-image: url
(10x5multicolor.png) 2 2 1 3 fill stretch
;
34 -khtml-border-image: url
(10x5multicolor.png) 2 2 1 3 fill stretch
;
35 border-image: url
(10x5multicolor.png) 2 2 1 3 fill stretch
;
36 border-width: 4px 6px 8px 11px;
43 border-image: url
(10x5multicolor.png) 40% 20% 20% 30% fill repeat
;
44 -khtml-border-image: url
(10x5multicolor.png) 40% 20% 20% 30% fill repeat
;
45 border-image: url
(10x5multicolor.png) 40% 20% 20% 30% fill repeat
;
46 border-width: 3px 1px 0px 4px;
53 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill round
;
54 -khtml-border-image: url
(10x5multicolor.png) 40% 2 1 30% fill round
;
55 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill round
;
56 border-width: 10px 2px 5px 3px;
63 border-image: url
(10x5multicolor.png) 2 2 20% 30% fill stretch round
;
64 -khtml-border-image: url
(10x5multicolor.png) 2 2 20% 30% fill stretch round
;
65 border-image: url
(10x5multicolor.png) 2 2 20% 30% fill stretch round
;
66 border-width: 5px 7px 1px 0;
73 border-width: 4px 8px 10px 2px;
75 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill repeat stretch
;
76 -khtml-border-image: url
(10x5multicolor.png) 40% 2 1 30% fill repeat stretch
;
77 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill repeat stretch
;
83 border-width: 4px 0 10px 2px;
85 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill round repeat
;
86 -khtml-border-image: url
(10x5multicolor.png) 40% 2 1 30% fill round repeat
;
87 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill round repeat
;
93 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill stretch repeat
;
94 -khtml-border-image: url
(10x5multicolor.png) 40% 2 1 30% fill stretch repeat
;
95 border-image: url
(10x5multicolor.png) 40% 2 1 30% fill stretch repeat
;
96 border-width: 1px 3px 0 0;
105 <div class=
"one"></div>
106 <div class=
"two"></div>
107 <div class=
"three"></div>
108 <div class=
"four"></div>
109 <div class=
"five"></div>
110 <div class=
"six"></div>
111 <div class=
"seven"></div>