border-image-width-009.html (3538B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds and Borders Test: border image area - border-image-width with 1, 2 or 4 values with percentage unit</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width"> 9 <link rel="match" href="reference/border-image-width-009-ref.html"> 10 11 <meta name="flags" content=""> 12 <meta content="This test checks that the border image area can still exist even if the border area (or border belt) of an element is inexistent. In this test, the border image fills the content area, the padding area and 25px of the extended-beyond-border-belt area, 25px into the margin area of each of the 4 tested block elements." name="assert"> 13 14 <style> 15 div 16 { 17 background-color: red; 18 border: red 100px; 19 /* 20 'border-style' defaults to 'none', in which case computed border-width is 0px. So, here, the border belt (or border area) of each div blocks must be 0px tall and 0px wide for all 4 sides of each of the 4 div block elements. 21 */ 22 border-image-source: url("support/9-colored-areas.png"); 23 border-image-slice: 5% 10% 15% 20%; 24 /* <number> Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. */ 25 border-image-outset: 25px; 26 /* The border-image-outset values specify the amount by which the border image area _ extends beyond the border box_. */ 27 height: 20px; 28 margin: 25px 25px 58px 25px; 29 /* 25px == border-image-outset . 30 Not part of the test. We want each square to be fully visible and not to expand outside the viewport on the left side. We also want both top border-image-outset and bottom border-image-outset to be rendered without overlapping by taking into account the margin collapsing. After margin collapsing of vertically-adjacent div blocks, we want inter-square distance to be 8px. 31 */ 32 padding: 15px; 33 width: 20px; 34 } 35 36 div#sub-test1 37 { 38 border-image-width: 50%; 39 /* 40 The four values of 'border-image-width' specify offsets 41 that are used to divide the border image area into nine 42 parts. They represent inward distances from the top, 43 right, bottom, and left sides of the area, respectively. 44 In this sub-test1, the border-image-width divide the border 45 image area into four (4) parts, not nine parts. The center 46 (fill) area is 0px wide by 0px tall. 47 */ 48 margin-top: 33px; 49 } 50 51 div#sub-test2 52 { 53 border-image-width: 50% 30%; 54 /* 55 In this sub-test2, the border-image-width divide the border 56 image area into six (6) parts, not nine parts. The center 57 (fill) area is 40px wide by 0px tall. 58 */ 59 } 60 61 div#sub-test3 62 { 63 border-image-width: 70% 0% 30% 0%; 64 /* 65 In this test sub-test3, the border-image-width divide the border 66 image area into two (2) parts, not nine parts. The center 67 (fill) area is 100px wide by 0px tall. 68 */ 69 } 70 71 div#sub-test4 72 { 73 border-image-width: 0% 70% 0% 30%; 74 /* 75 In this sub-test4, the border-image-width divide the border 76 image area into two (2) parts, not nine parts. The center 77 (fill) area is 0px wide by 100px tall. */ 78 } 79 </style> 80 81 <div id="sub-test1"></div> 82 83 <div id="sub-test2"></div> 84 85 <div id="sub-test3"></div> 86 87 <div id="sub-test4"></div>