[css-backgrounds] a `no-repeat` option for `border-image-repeat`

[jsnkuhn]

https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat

a no-repeat option for border-image-repeat that would center the sliced edges like repeat does but would NOT fill in the empty space with repeated tiles.

this would allow developers to create border-images with centered edges like this:

[fantasai]

What happens if the box is too small to accommodate the entire center image? Do we just clip it, or do we want to scale it down?

[jsnkuhn]

ahh, honestly hadn't thought about the fill. I assume if a designer went to the trouble to make a border image they probably wouldn't want the browser to just arbitrarily cut it off so "scale it down" sounds like the better option here.

[jsnkuhn]

it occurs to me I might have misunderstood the question. Are you taking about the center fill area or this situation where the width is not large enough for the full edge image?

[jsnkuhn]

It looks like there are 3 different possibilities right now for when there isn't room for a whole iteration of the edge image. stretch and round scale it down, repeat clips from each size and space just removes the image altogether.

The current space behavior (just removing it) is probably most desired for no-repeat.

[jsnkuhn]

some jury-rigged live no-repeat examples:

https://codepen.io/jsnkuhn/pen/ExEPBzX?editors=0110

[jsnkuhn]

Not entirely sure whether this would be a use case here or not. Looking at the centered thing on the top border and wondering if that's really part of the border or if it's a separate element.

[SebastianZ]

The current space behavior (just removing it) is probably most desired for no-repeat.

I agree with that. Though I can imagine that there may be cases in which scaling it down or clipping it could be desired results.

Having said that, to let this feature find its way into the spec., I think it'd be best to add it with the removing behavior first. If use cases for the other behaviors rise, we can still add them later.

Sebastian

[SebastianZ]

@jsnkuhn The example in your last comment could be covered by having clipping behavior for no-repeat Though that would have the downside that the text is part of the image. And as an author you'd probably want to have multiple such elements with different titles in them. Also, you'd have to create a rather wide image to avoid any gaps between the corner images and the centered one.

For cases like that (but maybe without title), it would probably better to allow multiple border images. So you could define the first one using stretch and the second one with no-repeat.

Sebastian

[jsnkuhn]

Ran into 2 other examples with centered design elements but once again not sure if no-repeat is what's needed for these. It almost seems to me like in these cases what's needed is a 5x5 sliced image instead of a 3x3.

I.E. slices for fixed corner and the center sizes but allow the remaining edge bits to stretch to fill the space?

[jsnkuhn]

https://ffvii-remake-intergrade.square-enix-games.com/en-us/

Currently done with a bunch of presentational divs. This one seems even more like it would really need the 5x5 slice. or 3x3 for just the corners and the solid line plus a single ::after for the centered diamond.

[jsnkuhn]

https://www.zelda.com/tears-of-the-kingdom/

This might be more of a mask-border situation but it still has the centered style element.

[SebastianZ]

@jsnkuhn Your two examples before the last one seem to be better served through a 5x5 grid or multiple border images instead of a no-repeat keyword. So maybe we should split that out into a separate issue.

Sebastian

[jsnkuhn]

it occurs to me that no-repeat probably isn't specific enough of a keyword. The non repeated image fragment could technically be left aligned, right aligned or centered in the top edge. no-repeat-center-aligned seems like a bit much... And I don't think I've ever seen a case where something like no-repeat-left-align or no-repeat-right-align would be used. So... maybe center is a better keyword here?

It also seems worth pointing out that this should apply to both border-image-repeat and mask-border-repeat