[css-backgrounds] [css-images] No way to control the clip box of a replaced element

[emilio]

Replaced elements clip their contents to the content box as per https://drafts.csswg.org/css-backgrounds/#corner-clipping. All browsers as expected do this correctly.

Some Firefox front-end engineers today had a use case for clipping to the padding-edge instead, and I had to say that there's no way to fix it while using <img>, that they needed to either use CSS backgrounds or have a wrapper element.

(For context, they were trying to make the corners of the background of the reload icon on hover in Firefox fully round, and the arrow would get clipped. It's effectively an image with a bit of padding and a border-radius.)

Given backgrounds have this control, perhaps replaced elements should too, even if they default to different things? Does an object-clip property analogous to background-clip sound like a good idea, given we're adding things like object-view-box etc?

To be clear this is not super-urgent as workarounds exist, but it was just unfortunate that they couldn't do what they wanted to do in an obvious way.

cc @tabatkins

[Loirooriol]

I would expect object-overflow: visible to allow this.

[emilio]

Hmm good point. I guess there could still be a use case for controlling the box (clip to the padding box instead for example), though for my specific use case I don't think it matters.

[Loirooriol]

I'm getting a bit lost with all these properties. Maybe

object-overflow: visible;
overflow: clip;
overflow-clip-margin: padding-box; /* default value */

[khushalsagar]

+1 to the last comment, overflow-clip-margin allows you to customize the reference box for clipping and with the conclusion we're leaning towards on the issue above it'll work.