multicolor-image-5.html (2285B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 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"> 8 9 /** 10 * This is a copy of multicolor-image-2.html with a few changes: 11 * (1) the whole thing is inside a transform 12 * (2) different border-images have different values for 13 * repeat/stretch/round 14 */ 15 16 body { 17 width: 100px; 18 /* This transform has no scale, and thus tests pixel-snapping codepaths! */ 19 transform: translate(100px, 100px); 20 transform-origin: 0 0; 21 } 22 23 div { 24 background: red; /* fail if this shows through */ 25 background-image: url('3x3multicolor.png'); /* fail if this shows through */ 26 margin-bottom: 2px; 27 } 28 29 div.one { 30 border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch; 31 border-width: 4px 6px 8px 11px; 32 border-style: solid; 33 width: 9px; 34 height: 1px; 35 } 36 37 div.two { 38 border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat; 39 border-width: 3px 1px 0px 4px; 40 border-style: solid; 41 width: 2px; 42 height: 17px; 43 } 44 45 div.three { 46 border-image: url(10x5multicolor.png) 40% 2 1 30% fill round; 47 border-width: 10px 2px 5px 3px; 48 border-style: solid; 49 width: 17px; 50 height: 8px; 51 } 52 53 div.four { 54 border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round; 55 border-width: 5px 7px 1px 0; 56 border-style: solid; 57 width: 8px; 58 height: 5px; 59 } 60 61 div.five { 62 border-width: 4px 8px 10px 2px; 63 border-style: solid; 64 border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch; 65 width: 0; 66 height: 8px; 67 } 68 69 div.six { 70 border-width: 4px 0 10px 2px; 71 border-style: solid; 72 border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat; 73 width: 17px; 74 height: 0; 75 } 76 77 div.seven { 78 border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; 79 border-width: 1px 3px 0 0; 80 border-style: solid; 81 width: 17px; 82 height: 0; 83 } 84 85 </style> 86 </head> 87 <body> 88 <div class="one"></div> 89 <div class="two"></div> 90 <div class="three"></div> 91 <div class="four"></div> 92 <div class="five"></div> 93 <div class="six"></div> 94 <div class="seven"></div> 95 </body> 96 </html>