<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Backgrounds Test: 'border-image-slice: 100' with 'fill' keyword (edge case)</title>
<!--
Created: February 24th 2023
Last modified: March 23rd 2023
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css3-background/#border-image-slice">
<link rel="match" href="reference/ref-filled-green-100px-square.xht">
<meta content="" name="flags">
<meta content="This test checks the rendering process of selecting the middle part of the border-image to be preserved. Since 'border-image-slice' is '100', then the 8 surrounding areas of the border-image area are selecting the white areas of the border-image and 50px of (and into) the red area. The middle part must be filled with red and green area. In which case, only the horizontal center and the vertical center of the border-image must fill the middle area. Therefore, only the green 100x100 area of the border-image must be painted into the middle area. This test also checks that since the border-style is 'none', then the computed value of 'border-width' must be 0px. Therefore the border belt of the div can not be painted with the 8 sliced border-image areas. So, we should see no red in this test." name="assert">
<meta name="fuzzy" content="maxDifference=0-112; totalPixels=0-199" />
<style>
div
{
border: red none 100px;
border-image-repeat: repeat;
border-image-slice: 100 fill;
border-image-source: url("support/500x500-red-with-green-center.png");
height: 100px;
width: 100px;
}
/*
This is how the border-image 500x500-red-with-green-center.png is painted:
(0, 500) (50, 500) (200, 500) (300, 500) (450, 500) (500, 500)
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| ^ |
| White area 50 White area |
| v |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 450)
| | FAIL ^ | |
| | . | |
|<-50-> | |<-50-> |
| | 1 | |
| W | Red area Red area | W |
| h | 5 | h |
| i | | i |
| t | 0 | t |
| e | | e |
| | . | |
| a | v | a |
| r | ------------ | r | (500, 300)
| e | | | | e |
| a | Red area | Green | Red area | a |
| | | | | |
| | <!- . . . 150 . . . -> | area | <!- . . . 150 . . . -> | |
| | | | | |
| | ------------ | | (500, 200)
| | ^ | |
| | . | |
| | | |
| | Red area 1 Red area | |
| | | |
| | 5 | |
| | | |
| | 0 | |
| | | |
| | . | |
| | v | |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | (500, 50)
| ^ |
| White area 50 White area |
| v |
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
(0, 0) (50, 0) (200, 0) (300, 0) (450, 0) (500, 0)
*/
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div></div>
Codebase Browser
chromium