[css-borders-4] Move `<image-1D>` to `border-image-source`

[SebastianZ]

At the moment, <image-1D> and with it the stripes() function are part of border-color. Though that always felt a bit weird to me because author's are familiar with -color properties defining colors, not images. So I mentioned at some point that we should rather add this functionality to border-image-source instead.

This probably requires being able to turn off the image slicing, see #9734.

If we define that slicing doesn't have any effect on <image-1D> values, one could simply define stripes like that:

border-image: stripes(red, yellow, green, blue);

Sebastian

[SebastianZ]

If we decide to move <image-1D> to border-image-source, we probably also want to move its definition in outline-color to somewhere else. One option could be to introduce an outline-image for that.

Sebastian

[SelenIT]

To me, the existing border-image and the proposed usage of <image-1D> in borders seem to serve two significantly different functions. Border-image is basically "take this predefined image and attach it to the box edges the best way artistically, using box edges only as a reference", while in the cases where <image-1D> is intended for is more like "take this border (with all geometric enhancements like roundings) and fill it with the given pattern, with as little extra steps as possible". Perhaps a brand new property like border-fill would be a better choice for the latter case?

[SebastianZ]

The mental model of border-image is obviously coupled with slicing, as there is currently no option to avoid slicing. A general discussion whether to continue using border-image for border image use cases happens in #9714. Though there are also a bunch of ideas how to extend it. (E.g. explictly turning of slicing is discussed in #9734.)

The idea here is to implicitly turn off slicing, meaning the rendering of stripes() takes all geometric changes like roundings into account, just like it does now in border-color. I wouldn't introduce another property just for this use case, as that just makes it harder for authors to know when to use what.

Sebastian

[JoshTumath]

My initial reaction to this proposal is that I'm quite sceptical, due to how it might work with forced colours mode.

A primary use-case for the stripe() function is to make focus rings in outlines out of multiple colours. If <image-1D> are moved to a new outline-image-source property, it will be removed by forced colour mode. See CodePen example: https://codepen.io/joshtumath/pen/vYqzxBX