Rehabilitated 4 border-image tests and created 4 reference files

[TalbotG]

border-image-shorthand-002.htm
border-image-shorthand-003.htm
border-image-slice-005.htm
border-image-slice-007.htm
reference/border-image-shorthand-002-ref.html
reference/border-image-shorthand-003-ref.html
reference/border-image-slice-005-ref.html
reference/border-image-slice-007-ref.html
support/9grid40-30-20-10-red.png
support/9grid40-30-20-10-lime.png

These 4 tests are originally from Microsoft.
Presumably the 9grid40-30-20-10-red.png and
9grid40-30-20-10-lime.png images were removed
intentionally. I have recreated, customized them
to make sense inside the tests.

[gsnedders]

Presumably the 9grid40-30-20-10-red.png and 9grid40-30-20-10-lime.png images were removed
intentionally. I have recreated, customized them to make sense inside the tests.

They weren't removed intentionally; they were simply never added! 35f109a is the commit that added the test originally and notably neither in that commit nor any other commit were the images added. I presume this was simply just a mistake when they were moved into the CSS testsuite.

Their omission was #10808, so this at least partly fixes that issue.

[fantasai]

So, I know this is not you fault but the fault of the original author... but this image is too simple to actually check for the proper condition. If the UA only slices off the first 1px off each side, it will still render correctly. We need an image that doesn't only detect when the UA slices too much, but also if it slices off too little.

My suggestion here is to use a skewed "striped border": design the image so that once it is sliced and squished into the border, it creates an evenly striped border. Since the numbers here are all divisible by a factor of 5, then 5 even stripes on each side would work well. The image will be uneven from side to side, but once it is squished into the border it will be even all the way around.

If there are stripes missing in the test, then we know the UA sliced too little of the image. If there is red in the test, then it sliced too much. It has to slice exactly the right amount.

[TalbotG]

fantasai, I need more time to carefully read your comment. Right now, I do not know what "skewed 'striped border'", "evenly striped border" and what "squished" mean.

"skewed striped border" == "bordure rayée asymétrique"

"evenly striped border" == "bordure uniformément rayée"

"squished" == "écrasé"

but I do understand that the test would be ideal (at least, more challenging) if an image was designed in a way that display failures if the UA slices too much or slices too little.

[TalbotG]

<deep breath> Okay. I need to split this PR23808 into 2 smaller PRs.
1 PR (PR25802) for
border-image-shorthand-002.htm
border-image-shorthand-003.htm
reference/border-image-shorthand-002-ref.html
reference/border-image-shorthand-003-ref.html
support/9grid40-30-20-10-red.png
with all of the requested modifications
(Once this smaller PR gets approved,
I will be able to close PR21445.)

and 1 PR (PR25825) for
border-image-slice-005.htm
border-image-slice-007.htm
reference/border-image-slice-005-ref.html
reference/border-image-slice-007-ref.html
with the skewed "striped border" idea.

[TalbotG]

Here's how the border-image-slice-00[5|7] tests look with the skewed striped border, evenly striped border and squishing ideas:

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/border-image-slice-005-newer-GT.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/reference/border-image-slice-005-newer-GT-ref.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/border-image-slice-007-newer-GT.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/reference/border-image-slice-007-newer-GT-ref.html

When the slicing is 20px or 10px, then fuzzy anti-aliased pixels appear with the 3 browsers (Firefox 68.12.0 ESR, Chromium 83.0.4103.116 and Epiphany 3.32.1.2 using WebKitGTK+ 2.28.4) that I checked. When the slicing is 40px or 30px, then there is no fuzzy anti-aliased pixels appearing with the same 3 browsers. So, one idea to try to overcome this problem would be to create a new border-image-source which would be a rescaled version of the 100px by 100px border-image-source to become a 300px by 300px border-image-source which would maintain the alternation of stripes (3 filled blue stripes interleaving 2 transparent stripes) typical of the original border-image-source.

[TalbotG]

No fuzzy anti-alias pixels appears now in the following tests, as far as I can see in the 3 tested browsers... although it must be said that the 2 border-image-source now have a filesize of 709 kilo-bytes and 711 kilo-bytes.

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/border-image-slice-005-newest2-GT.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/reference/border-image-slice-005-newer-GT-ref.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/border-image-slice-007-newest2-GT.html

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/reference/border-image-slice-007-newer-GT-ref.html

[Edit september 28th]
I have carefully tweaked the 2 border-image-source and I managed to reduce the filesize to 12KB and 8KB. No fuzzy anti-alias pixels appears in the tests but if I zoom/magnify to 200% the webpages of tests, then I can see fuzzy anti-aliased pixels. I do not know what can be done about this.
[/Edit september 28th]

[TalbotG]

Okay. I will close this PR. Then I will create another PR (PR25825) which will contain:
border-image-slice-005.htm
border-image-slice-007.htm
reference/border-image-slice-005-ref.html
reference/border-image-slice-007-ref.html
support/9grid40-30-20-10-red.png
support/9grid40-30-20-10-green.png
and a link to this PR.

[TalbotG]

Closing this PR. New PR for border-image-slice-00[ 5 | 7] is
#25825