| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <title>CSS Border Test:border image repeat property with value stretch</title> |
| <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> |
| <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> |
| <style type="text/css"> |
| div { |
| width: 152px; |
| height: 152px; |
| position: relative; |
| } |
| .red { |
| width: 26px; |
| height: 26px; |
| position: absolute; |
| } |
| #red1 { |
| top: 0; |
| left: 0; |
| } |
| #red2 { |
| top: 0; |
| right: 0; |
| } |
| #red3 { |
| bottom: 0; |
| right: 0; |
| } |
| #red4 { |
| bottom: 0; |
| left: 0; |
| } |
| .blue { |
| position: absolute; |
| } |
| #blue1 { |
| top: 0; |
| left: 26px; |
| width: 100px; |
| height: 26px; |
| } |
| #blue2 { |
| top: 26px; |
| right: 0; |
| width: 26px; |
| height: 100px; |
| } |
| #blue3 { |
| bottom: 0; |
| right: 26px; |
| width: 100px; |
| height: 26px; |
| } |
| #blue4 { |
| bottom: 26px; |
| left: 0; |
| width: 26px; |
| height: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <p> |
| The test passes if the blue diamond is stretching between the red diamonds. |
| </p> |
| <div> |
| <img src="../support/red-diamond.png" alt="left top red diamond" class="red" id="red1"/> |
| <img src="../support/red-diamond.png" alt="right top red diamond" class="red" id="red2" /> |
| <img src="../support/red-diamond.png" alt="right bottom red diamond" class="red" id="red3" /> |
| <img src="../support/red-diamond.png" alt="left bottom red diamond" class="red" id="red4" /> |
| <img src="../support/blue-diamond.png" alt="top blue diamond" class="blue" id="blue1"/> |
| <img src="../support/blue-diamond.png" alt="right blue diamond" class="blue" id="blue2" /> |
| <img src="../support/blue-diamond.png" alt="bottom blue diamond" class="blue" id="blue3" /> |
| <img src="../support/blue-diamond.png" alt="left blue diamond" class="blue" id="blue4" /> |
| </div> |
| </body> |
| </html> |
