95 lines
3.1 KiB
HTML
95 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>CSS Backgrounds Test: border-image-repeat: stretch round</title>
|
|
|
|
<!--
|
|
|
|
Created: June 23rd 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-stretch-round-001-ref.html">
|
|
|
|
<meta content="" name="flags">
|
|
<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">
|
|
|
|
<!--
|
|
|
|
'stretch'
|
|
The image is stretched to fill the area.
|
|
|
|
https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-stretch
|
|
|
|
|
|
'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: stretch round;
|
|
/*
|
|
"
|
|
The first keyword applies to the horizontal scaling and
|
|
tiling of the top, middle and bottom parts, the second to
|
|
the vertical scaling and tiling of the left, middle and right parts
|
|
"
|
|
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;
|
|
}
|
|
|
|
div#first-subtest
|
|
{
|
|
height: 96px;
|
|
width: 192px;
|
|
/*
|
|
96px divided by 64px == 1.5 which is rounded up to 2.
|
|
So, the image should be 96px divided by 2 == 48px
|
|
wide. That means that the left and right
|
|
bicolor (orange and blue) images should be 48px tall,
|
|
therefore rescaled down, from sliced 64px to 48px.
|
|
|
|
The top and bottom sides should be stretched from
|
|
sliced 64px to 192px (3 times).
|
|
*/
|
|
}
|
|
|
|
div#second-subtest
|
|
{
|
|
height: 80px;
|
|
width: 128px;
|
|
/*
|
|
80px divided by 64px == 1.25 which is rounded down to 1.
|
|
So, each image should be 80px divided by 1 == 80px
|
|
tall. That means that the left and right bicolor
|
|
(orange and blue) images should be 80px tall
|
|
therefore rescaled up, from sliced 64px to 80px.
|
|
|
|
The top and bottom sides should be stretched from
|
|
sliced 64px to 128px (2 times).
|
|
*/
|
|
}
|
|
</style>
|
|
|
|
<div id="first-subtest"></div>
|
|
|
|
<div id="second-subtest"></div>
|