[css-backgrounds-4] Can you chain border-area and text in background-clip?

[nt1m]

#9456 added background-clip: border-area.

I think it would be useful to support background-clip: border-area text in case you want your background to bleed through both the text and the border-area of an element.

The new syntax would then be:

<bg-clip> = <visual-box> | [ border-area || text ]

[smfr]

I think this is just two border-images:

            background-image: linear-gradient(to bottom right, green, blue), linear-gradient(to bottom right, green, blue), none;
            background-color: yellow;
            background-origin: border-box;
            background-clip: border-area, text, border-box;

[yisibl]

Considering that the border gradient uses the same gradient as the text, and to avoid writing multiple background-image, I think it's necessary to support the background-clip: border-area text syntax.

cc @LeaVerou

[LeaVerou]

Agreed. Though my preference would be to not special case the combination of border-area and text, but to define a more general way to create unions of these. Possibly just by space-separating the identifiers. Sure, that could allow nonsensical combinations like border-box content-box but UAs can easily short-circuit those. E.g. border-box text is not meaningless, since text can actually overflow its container (though currently text is clipped by border-box, which is very unfortunate).

[nt1m]

Feel free to reopen if you feel like this is a path exploring

[SebastianZ]

I guess that's a straight-forward change and all seem positive about it. So let's put it on the agenda.

The two points to resolve on:

1. Support for multiple values in background-clip
2. Support any keyword combination or only sensible ones?

Regarding combinations, I don't see value in allowing all combinations. So I propose the syntax to be

<bg-clip> = [ <visual-box> | border-area ] || text

Or, if we believe there are use cases to combine styling the box areas with the border area, then

<bg-clip> = <visual-box> || border-area || text

Sebastian

[Loirooriol]

border-area content-box and border-area text seem reasonable.
border-area padding-box and border-area border-box should just behave like border-box I think.
text content-box and text padding-box would have their own behavior if there is text overflowing the content/padding box, but I can't image why someone would want this combination.
text border-box behaves like border-box, unless we change the definition of text.

[fantasai]

I have a preference for only supporting the reasonable values. The QA cost to checking invalid values are invalid is wayyy less than ensuring nonsensical values work correctly.