Skip to content

Commit

Permalink
Added border-image-repeat-round-003.html test (#40715)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TalbotG
TalbotG authored Aug 16, 2023
1 parent c382179 commit 6d6d16d
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 0 deletions.
110 changes: 110 additions & 0 deletions css/css-backgrounds/border-image-repeat-round-003.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Backgrounds Test: border-image-repeat: round</title>

<!--
Created: June 21st 2023
Last modified: June 25th 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;
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>
83 changes: 83 additions & 0 deletions css/css-backgrounds/reference/border-image-repeat-round-003-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!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>
Binary file added css/css-backgrounds/support/4bicolor-squares.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6d6d16d

Please sign in to comment.