css3-border-image-repeat-repeat-ref.html (1292B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Reference Test</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 9 <style> 10 table 11 { 12 border-spacing: 0px; 13 table-layout: fixed; 14 } 15 16 td 17 { 18 height: 18px; 19 padding: 0px; 20 } 21 22 td.corner 23 { 24 background-image: url("../support/new-red-diamond-27x27.png"); 25 background-size: cover; 26 } 27 28 td#first-row-second-cell , td#third-row-second-cell , td.second-row 29 { 30 background-image: url("../support/blue-diamond-27x27.png"); 31 background-size: contain; 32 background-position: center; 33 } 34 35 td.second-row 36 { 37 height: 108px; /* 6 times 18 == 108 */ 38 } 39 </style> 40 41 <p>Test passes if a blue diamond is repeated 8 times horizontally between red diamonds and repeated 6 times vertically between red diamonds. Each of the 4 edges between red diamonds must start and end with a half slice of a blue diamond. 42 43 <table> 44 45 <col width="18"><col width="144"><col width="18"> 46 47 <tr><td class="corner"><td id="first-row-second-cell"><td class="corner"> 48 49 <tr><td class="second-row"><td><td class="second-row"> 50 51 <tr><td class="corner"><td id="third-row-second-cell"><td class="corner"> 52 53 </table>