-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added 2 border-image-repeat tests and removed 2 (#40731)
border-image-16 is covered by reftest css3-border-image-repeat-stretch.html border-image-15 is covered by reftest border-image-repeat-space-011.html and others
- Loading branch information
Showing
6 changed files
with
304 additions
and
76 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
94 changes: 94 additions & 0 deletions
94
css/css-backgrounds/border-image-repeat-round-stretch-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
<!DOCTYPE html> | ||
|
||
<meta charset="UTF-8"> | ||
|
||
<title>CSS Backgrounds Test: border-image-repeat: round stretch</title> | ||
|
||
<!-- | ||
Created: June 23rd 2023 | ||
Last modified: June 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-stretch-001-ref.html"> | ||
|
||
<meta content="" name="flags"> | ||
<meta content="This test checks that the process of repeating the tile when 'border-image-repeat' is 'round stretch'. Thanks to a specially crafted rectangular border-image, we check how the sliced border-image is, in the first-subtest, rescaled down horizontally (top and bottom sides), and is, in the second-subtest, rescaled up horizontally (top and bottom sides). In both subtests, the border-image in the vertical axis (left and right sides) are stretched." 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 | ||
'stretch' | ||
The image is stretched to fill the area. | ||
https://www.w3.org/TR/css-backgrounds-3/#valdef-border-image-repeat-stretch | ||
--> | ||
|
||
<style> | ||
div | ||
{ | ||
border: red solid 64px; | ||
border-image-repeat: round stretch; | ||
/* | ||
" | ||
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; | ||
margin-right: 1em; | ||
} | ||
|
||
div#first-subtest | ||
{ | ||
height: 192px; | ||
width: 96px; | ||
/* | ||
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 top and bottom bicolor | ||
(yellow and purple) images should be 48px wide, | ||
therefore rescaled down, from sliced 64px to 48px. | ||
|
||
The left and right sides should be stretched from | ||
sliced 64px to 192px (3 times). | ||
*/ | ||
} | ||
|
||
div#second-subtest | ||
{ | ||
height: 128px; | ||
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. That means that the top and bottom bicolor | ||
(yellow and purple) images should be 80px wide | ||
therefore rescaled up, from sliced 64px to 80px. | ||
|
||
The left and right sides should be stretched from | ||
sliced 64px to 128px (2 times). | ||
*/ | ||
} | ||
</style> | ||
|
||
<div id="first-subtest"></div> | ||
|
||
<div id="second-subtest"></div> |
94 changes: 94 additions & 0 deletions
94
css/css-backgrounds/border-image-repeat-stretch-round-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
<!DOCTYPE html> | ||
|
||
<meta charset="UTF-8"> | ||
|
||
<title>CSS Backgrounds Test: border-image-repeat: stretch round</title> | ||
|
||
<!-- | ||
Created: June 23rd 2023 | ||
Last modified: June 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; | ||
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> |
58 changes: 58 additions & 0 deletions
58
css/css-backgrounds/reference/border-image-repeat-round-stretch-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<!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: 320px; | ||
width: 224px; | ||
} | ||
|
||
div#second-subtest | ||
{ | ||
background-color: black; | ||
display: inline-table; | ||
table-layout: fixed; | ||
|
||
height: 256px; | ||
width: 208px; | ||
} | ||
</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% 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% 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> |
58 changes: 58 additions & 0 deletions
58
css/css-backgrounds/reference/border-image-repeat-stretch-round-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<!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: 320px; | ||
} | ||
|
||
div#second-subtest | ||
{ | ||
background-color: black; | ||
display: inline-table; | ||
table-layout: fixed; | ||
|
||
height: 208px; | ||
width: 256px; | ||
} | ||
</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% 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% 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% 50%, purple 50% 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> |