multicolor-image-3-ref.html (1653B)
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>