Status: FAIL | Duration: 28ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-backgrounds/border-image-repeat-round-003.html
<!DOCTYPE html> <meta charset="UTF-8"> <title>CSS Backgrounds Test: border-image-repeat: round</title> <!-- Created: June 21st 2023 Last modified: August 23rd 2023 --> <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat"> <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-process"> <link rel="match" href="reference/border-image-repeat-round-003-ref.html"> <meta content="" name="flags"> <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"> <!-- 'round' The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-round --> <style> div { border: red solid 64px; border-image-repeat: round; /* this is the same as 'round round' since " If the second keyword is absent, it is assumed to be the same as the first. https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat " */ border-image-slice: 64 fill; /* the center will be black */ border-image-source: url("support/4bicolor-squares.png"); display: inline-block; image-rendering: pixelated; /* attempt to overcome antialias fuzziness */ margin-right: 1em; vertical-align: bottom; } div#first-subtest { height: 96px; width: 96px; /* 96px divided by 64px == 1.5 which is rounded up to 2. So, each image should be 96px divided by 2 == 48px wide or tall. That means that the top and bottom bicolor (yellow and purple) images should be 48px wide and the left and right bicolor (orange and blue) images should be 48px tall. So, in this first-subtest, the 4 side border-image is rescaled down, from sliced 64px to 48px. */ } div#second-subtest { height: 80px; width: 80px; /* 80px divided by 64px == 1.25 which is rounded down to 1. So, each image should be 80px divided by 1 == 80px wide or tall. That means that the top and bottom bicolor (yellow and purple) images should be 80px wide and the left and right bicolor (orange and blue) images should be 80px tall. So, in this second-subtest, the 4 side border-image are rescaled up, from sliced 64px to 80px. */ } div#third-subtest { margin-top: 1em; height: 144px; width: 168px; /* 168px divided by 64px == 2.625 which is rounded up to 3. So, each image should be 168px divided by 3 == 56px wide. That means that the top and bottom bicolor (yellow and purple) images should be 56px wide. 144px divided by 64px == 2.25 which is rounded down to 2. So, each image should be 144px divided by 2 == 72px tall. That means that the left and right bicolor (orange and blue) images should be 72px tall. So, in this third-subtest, the 2 top and bottom sides border-image are rescaled down, from sliced 64px to 56px while the 2 left and right sides border-image are rescaled up, from sliced 64px to 72px. */ } </style> <div id="first-subtest"></div> <div id="second-subtest"></div><br> <div id="third-subtest"></div>
/css/css-backgrounds/reference/border-image-repeat-round-003-ref.html
<!DOCTYPE html> <meta charset="UTF-8"> <title>CSS Reftest reference</title> <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <style> div#first-subtest { background-color: black; display: inline-table; margin-right: 1em; table-layout: fixed; height: 224px; width: 224px; } div#second-subtest { background-color: black; display: inline-table; table-layout: fixed; height: 208px; width: 208px; } div#third-subtest { background-color: black; display: inline-table; margin-top: 1em; table-layout: fixed; height: 272px; width: 296px; } </style> <div id="first-subtest"> <div style="display: table-row;"> <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> </div> <div style="display: table-row;"> <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div> </div> <div style="display: table-row;"> <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 25%, purple 25% 50%, yellow 50% 75%, purple 75% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> </div> </div> <div id="second-subtest" style="vertical-align: bottom;"> <div style="display: table-row;"> <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> </div> <div style="display: table-row;"> <div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 50%, blue 50% 100%);"></div> </div> <div style="display: table-row;"> <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0% 50%, purple 50% 100%);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> </div> </div><br> <div id="third-subtest"> <div style="display: table-row;"> <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0px 28px, purple 28px 56px, yellow 56px 84px, purple 84px 112px, yellow 112px 140px, purple 140px 168px, yellow 168px 196px, purple 196px 224px);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> </div> <div style="display: table-row;"> <div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div><div style="display: table-cell;"></div><div style="display: table-cell; background-image: linear-gradient(orange 0% 25%, blue 25% 50%, orange 50% 75%, blue 75% 100%);"></div> </div> <div style="display: table-row;"> <div style="display: table-cell; height: 64px; width: 64px;"></div><div style="display: table-cell; background-image: linear-gradient(to right, yellow 0px 28px, purple 28px 56px, yellow 56px 84px, purple 84px 112px, yellow 112px 140px, purple 140px 168px, yellow 168px 196px, purple 196px 224px);"></div><div style="display: table-cell; height: 64px; width: 64px;"></div> </div> </div>