border-image-image-type-001.htm needs to be improved

[TalbotG]

I have to believe that this test

http://wpt.live/css/css-backgrounds/border-image-image-type-001.htm

https://wpt.fyi/results/css/css-backgrounds/border-image-image-type-001.htm

as designed and as coded is not restrictive enough and is not constrained enough in order to be considered reliable and trustworthy.

See also this review comment in Pull Request 42646

The 4 sliced areas of the border-image should have 2 colors (and not just 1 single uniform filling color like right now) so that we can better check visually if the stretch is done and how the stretch is actually done. One quick way is to paint the middle+central area with a tenth (10th) color so that it will split the 8 sliced areas into 2 distinguishible colors. With inserting
<rect x="5" y="20" width="80" height="70" fill="#FFF8" />
(or
<rect x="5" y="20" width="80" height="70" fill="white" opacity="50%" />
? )
a semi-transparent white-ish rectangular veil at the appropriate line inside the
http://wpt.live/css/css-backgrounds/support/9-colored-areas-40-30-20-10.svg
support SVG image should achieve that reliability goal.

Eg

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/support/9-colored-areas-40-30-20-10-new.svg

Credits should go to @fantasai for such idea.

[TalbotG]

What I want to do now is this:

Create a perfectly-equivalent SVG image that is perfectly identical to a .PNG image that was already used in another approved border-image test and then reused its reference file for it. Why? Because I have already spent way too much time trying to work on a test using support/9-colored-areas-40-30-20-10.svg image or using support/9-colored-areas-40-30-20-10-new.svg image and I do not succeed in creating a reliable and trustworthy reference file for it.

The goal and the result of doing the above would create an easy, quick, reliable and trustworthy test (using an SVG image) and its reference file would be already created.