border-image-space-001-ref.html (1869B)
1 <!DOCTYPE html> 2 <html> 3 <!-- Submitted from TestTWF Paris --> 4 <head> 5 <title>CSS Test: Border Image: box with spaced repeating border image</title> 6 <link rel="author" title="Levi Weintraub" href="mailto:leviw@chromium.org"> 7 <style> 8 div { 9 background-color: green; 10 } 11 .borderContainer { 12 width: 108px; 13 height: 108px; 14 position: relative; 15 } 16 .borderContainer > div { 17 display: inline-block; 18 width: 20px; 19 height: 20px; 20 position: absolute; 21 } 22 .corner { 23 background-image: url('../support/border.png'); 24 background-size: 60px 60px; 25 } 26 .edge { 27 background-image: url('../support/border.png'); 28 background-position: left -20px; 29 background-size: 60px 60px; 30 } 31 .left { 32 left: 0px; 33 } 34 .left1 { 35 left: 22px; 36 } 37 .left2 { 38 left: 44px; 39 } 40 .left3 { 41 left: 66px; 42 } 43 .right { 44 right: 0px; 45 } 46 .top { 47 top: 0px; 48 } 49 .top1 { 50 top: 22px; 51 } 52 .top2 { 53 top: 44px; 54 } 55 .top3 { 56 top: 66px; 57 } 58 .bottom { 59 bottom: 0px; 60 } 61 </style> 62 </head> 63 <body> 64 <p>There should be a green box below with red diamonds in the corners, and three yellow diamonds evenly spaced 65 apart along the edges.</p> 66 <div class="borderContainer"> 67 <div class="corner top left"></div><div class="edge top left1"></div><div class="edge top left2"></div><div class="edge top left3"></div><div class="corner top right"></div> 68 <div class="edge left top1"></div><div class="edge right top1"></div> 69 <div class="edge left top2"></div><div class="edge right top2"></div> 70 <div class="edge left top3"></div><div class="edge right top3"></div> 71 <div class="corner bottom left"></div><div class="edge bottom left1"></div><div class="edge bottom left2"></div><div class="edge bottom left3"></div><div class="corner bottom right"></div> 72 </div> 73 </body> 74 </html>