border-image-repeat-stretch-round-001.html (3149B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds Test: border-image-repeat: stretch round</title> 6 7 <!-- 8 9 Created: June 23rd 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-stretch-round-001-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 'stretch round'. Thanks to a specially crafted rectangular border-image, we check how the sliced border-image is, in the first-subtest, rescaled down vertically (left and right sides), and is, in the second-subtest, rescaled up vertically (left and right sides). In both subtests, the border-image in the horizontal axis (top and bottom sides) are stretched." name="assert"> 22 23 <!-- 24 25 'stretch' 26 The image is stretched to fill the area. 27 28 https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-stretch 29 30 31 'round' 32 The image is tiled (repeated) to fill the area. If it does not 33 fill the area with a whole number of tiles, the image is rescaled 34 so that it does. 35 36 https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-round 37 38 --> 39 40 <style> 41 div 42 { 43 border: red solid 64px; 44 border-image-repeat: stretch round; 45 /* 46 " 47 The first keyword applies to the horizontal scaling and 48 tiling of the top, middle and bottom parts, the second to 49 the vertical scaling and tiling of the left, middle and right parts 50 " 51 https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat 52 */ 53 border-image-slice: 64 fill; /* the center will be black */ 54 border-image-source: url("support/4bicolor-squares.png"); 55 display: inline-block; 56 image-rendering: pixelated; /* attempt to overcome antialias fuzziness */ 57 margin-right: 1em; 58 } 59 60 div#first-subtest 61 { 62 height: 96px; 63 width: 192px; 64 /* 65 96px divided by 64px == 1.5 which is rounded up to 2. 66 So, the image should be 96px divided by 2 == 48px 67 wide. That means that the left and right 68 bicolor (orange and blue) images should be 48px tall, 69 therefore rescaled down, from sliced 64px to 48px. 70 71 The top and bottom sides should be stretched from 72 sliced 64px to 192px (3 times). 73 */ 74 } 75 76 div#second-subtest 77 { 78 height: 80px; 79 width: 128px; 80 /* 81 80px divided by 64px == 1.25 which is rounded down to 1. 82 So, each image should be 80px divided by 1 == 80px 83 tall. That means that the left and right bicolor 84 (orange and blue) images should be 80px tall 85 therefore rescaled up, from sliced 64px to 80px. 86 87 The top and bottom sides should be stretched from 88 sliced 64px to 128px (2 times). 89 */ 90 } 91 </style> 92 93 <div id="first-subtest"></div> 94 95 <div id="second-subtest"></div>