border-image-width-001.htm (2895B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Background and Borders Test: The 'border-image-width' property with four numbers as a value</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width" /> 7 <link rel="match" href="reference/border-image-width-001-ref.html" /> 8 <meta name="flags" content="" /> 9 <meta name="assert" content="This test checks that four numbers as a value of 'border-image-width' specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the top, right, bottom, and left sides of the border image area. Numbers represent multiples of the corresponding computed border-width. Percentages refer to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets" /> 10 <style type="text/css"> 11 div.subtest 12 { 13 background-color:red; 14 border: 10px double red; 15 border-image-slice: 10; 16 border-image-source: url("support/green_color.png"); 17 height: 100px; 18 margin: 8px auto 8px 0px; 19 width: 100px; 20 } 21 22 #subtest1 23 { 24 border-image-width: 5 4 3 2; 25 } 26 27 #subtest2 28 { 29 border-image-width: 50px 10px; 30 } 31 32 #subtest3 33 { 34 border-image-width: 40% 20%; 35 height: 115px; 36 width: 90px; 37 } 38 39 #subtest4 40 { 41 border-image-slice: 20 40; 42 border-image-width: auto; 43 } 44 45 div div 46 { 47 background-color: lime; 48 } 49 50 div#subtest1 div , div#subtest3 div 51 { 52 height: 75px; 53 margin: 20px 5px; 54 width: 80px; 55 } 56 57 div#subtest2 div 58 { 59 height: 60px; 60 margin: 20px 0px; 61 width: 100px; 62 } 63 64 div#subtest4 div 65 { 66 height: 90px; 67 margin: 5px 15px; 68 width: 70px; 69 } 70 </style> 71 </head> 72 <body> 73 <div class="subtest" id="subtest1"> 74 <div></div> 75 </div> 76 77 <div class="subtest" id="subtest2"> 78 <div></div> 79 </div> 80 81 <div class="subtest" id="subtest3"> 82 <div></div> 83 </div> 84 85 <div class="subtest" id="subtest4"> 86 <div></div> 87 </div> 88 </body> 89 </html>