[css-backgrounds-3] Illustrate border-image-repeat

[fantasai]

The diamond example image in the spec is very useful in explaining how border image works https://www.w3.org/TR/css-backgrounds-3/#border-images
It would be nice to use it to illustrate the differences between the various values of border-image-repeat.

[jsnkuhn]

so here are the border-image-repeat options next to one another in a live pen. This border-image-source might not do the best job of showing the difference between round and space:

https://codepen.io/jsnkuhn/pen/PoRPKOz?editors=1100

...also there appears to be an inconsistency between Chrome and Firefox on repeat.

[SelenIT]

According to the "Drawing the Border Image" section,

If the first keyword is repeat, the top, middle, and bottom images are centered horizontally in their respective areas. ...

If the second keyword is repeat, the left, middle, and right images are centered vertically in their respective areas.

I believe that the behavior of Firefox (non-centering) is a bug.

[jsnkuhn]

bug reported: https://bugzilla.mozilla.org/show_bug.cgi?id=1778032. Seems to be an issue with raster images only.

chrome also seems to have some issues with round and some rendering issues with svg in round and space
https://codepen.io/jsnkuhn/pen/ExEVrNq

anyway, back on track: it seems like a good example image for showing round and space would need for example an image with wider top and bottom edges. If that makes any sense?