border-image-repeat-round-003.html (3876B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds Test: border-image-repeat: round</title> 6 7 <!-- 8 9 Created: June 21st 2023 10 11 Last modified: August 23rd 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-round-003-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 'round'. In this test, we check with a specially crafted rectangular border-image how the sliced border-image is, in the first-subtest, rescaled down in the 4 sides, is, in the second-subtest, rescaled up in the 4 sides and, finally, is, in the third-subtest, rescaled up in the left and right sides while being rescaled down in the top and bottom sides." name="assert"> 22 23 <!-- 24 25 'round' 26 The image is tiled (repeated) to fill the area. If it does not 27 fill the area with a whole number of tiles, the image is rescaled 28 so that it does. 29 30 https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-round 31 32 --> 33 34 <style> 35 div 36 { 37 border: red solid 64px; 38 border-image-repeat: round; /* this is the same as 'round round' 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: 64 fill; /* the center will be black */ 45 border-image-source: url("support/4bicolor-squares.png"); 46 display: inline-block; 47 image-rendering: pixelated; /* attempt to overcome antialias fuzziness */ 48 margin-right: 1em; 49 vertical-align: bottom; 50 } 51 52 div#first-subtest 53 { 54 height: 96px; 55 width: 96px; 56 /* 57 96px divided by 64px == 1.5 which is rounded up to 2. 58 So, each image should be 96px divided by 2 == 48px 59 wide or tall. That means that the top and bottom 60 bicolor (yellow and purple) images should be 48px wide 61 and the left and right bicolor (orange and blue) 62 images should be 48px tall. 63 So, in this first-subtest, the 4 side border-image is 64 rescaled down, from sliced 64px to 48px. 65 */ 66 } 67 68 div#second-subtest 69 { 70 height: 80px; 71 width: 80px; 72 /* 73 80px divided by 64px == 1.25 which is rounded down to 1. 74 So, each image should be 80px divided by 1 == 80px 75 wide or tall. That means that the top and bottom 76 bicolor (yellow and purple) images should be 80px wide 77 and the left and right bicolor (orange and blue) 78 images should be 80px tall. 79 So, in this second-subtest, the 4 side border-image are 80 rescaled up, from sliced 64px to 80px. 81 */ 82 } 83 84 div#third-subtest 85 { 86 margin-top: 1em; 87 88 height: 144px; 89 width: 168px; 90 /* 91 168px divided by 64px == 2.625 which is rounded up to 3. 92 So, each image should be 168px divided by 3 == 56px 93 wide. That means that the top and bottom 94 bicolor (yellow and purple) images should be 56px wide. 95 144px divided by 64px == 2.25 which is rounded down to 2. 96 So, each image should be 144px divided by 2 == 72px 97 tall. That means that the left and right 98 bicolor (orange and blue) images should be 72px tall. 99 So, in this third-subtest, the 2 top and bottom sides 100 border-image are rescaled down, from sliced 64px to 101 56px while the 2 left and right sides border-image are 102 rescaled up, from sliced 64px to 72px. 103 */ 104 } 105 </style> 106 107 <div id="first-subtest"></div> 108 109 <div id="second-subtest"></div><br> 110 111 <div id="third-subtest"></div>