border-image-repeat-space-011.html (1890B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds Test: border-image-repeat: space</title> 6 7 <!-- 8 9 Created: March 31st 2023 10 11 Last modified: April 9th 2023 12 13 --> 14 15 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 16 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat"> 17 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process"> 18 <link rel="match" href="reference/border-image-repeat-space-011-ref.html"> 19 20 <meta content="" name="flags"> 21 <meta content="This test checks that the process of repeating the tile when 'border-image-repeat' is 'space'. The testing div is wide enough and tall enough to have 2 complete border-image on each of the 4 sides. 96px will become the extra space which must be distributed around the 2 tiles." name="assert"> 22 23 <!-- 24 25 'space' 26 The image is tiled (repeated) to fill the area. If it does 27 not fill the area with a whole number of tiles, the extra 28 space is distributed around the tiles. 29 30 https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-space 31 32 --> 33 34 <style> 35 div 36 { 37 border: red solid 100px; 38 border-image-repeat: space; /* this is the same as 'space space' since 39 " 40 If the second keyword is absent, it is assumed to be the same as the first. 41 https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat 42 " 43 */ 44 border-image-slice: 50; 45 border-image-source: url("support/border-image-repeat-space-011.png"); 46 height: 296px; 47 width: 296px; 48 49 /* 50 51 296 52 - 53 200 54 ====== 55 96 56 57 and since there is 3 spaces created, we divide 58 the remaining by 3 giving us exactly 32px between and around 59 each pair of (gray, purple, orange and blue) squares 60 61 */ 62 } 63 </style> 64 65 <div></div>