| <!DOCTYPE html> |
| <html> |
| <!-- Submitted from TestTWF Paris --> |
| <head> |
| <title>CSS Test: Border Image: box with spaced repeating border image</title> |
| <link rel="author" title="Levi Weintraub" href="mailto:leviw@chromium.org"> |
| <style> |
| div { |
| background-color: green; |
| } |
| .borderContainer { |
| width: 108px; |
| height: 108px; |
| position: relative; |
| } |
| .borderContainer > div { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| position: absolute; |
| } |
| .corner { |
| background-image: url('../support/border.png'); |
| background-size: 60px 60px; |
| } |
| .edge { |
| background-image: url('../support/border.png'); |
| background-position: left -20px; |
| background-size: 60px 60px; |
| } |
| .left { |
| left: 0px; |
| } |
| .left1 { |
| left: 22px; |
| } |
| .left2 { |
| left: 44px; |
| } |
| .left3 { |
| left: 66px; |
| } |
| .right { |
| right: 0px; |
| } |
| .top { |
| top: 0px; |
| } |
| .top1 { |
| top: 22px; |
| } |
| .top2 { |
| top: 44px; |
| } |
| .top3 { |
| top: 66px; |
| } |
| .bottom { |
| bottom: 0px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>There should be a green box below with red diamonds in the corners, and three yellow diamonds evenly spaced |
| apart along the edges.</p> |
| <div class="borderContainer"> |
| <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> |
| <div class="edge left top1"></div><div class="edge right top1"></div> |
| <div class="edge left top2"></div><div class="edge right top2"></div> |
| <div class="edge left top3"></div><div class="edge right top3"></div> |
| <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> |
| </div> |
| </body> |
| </html> |
