Re: [css3-background] Curved borders intersecting backgrounds of inner boxes

On Apr 12, 2010, at 8:56 AM, Zack Weinberg <zweinberg@mozilla.com> wrote:

> Brad Kemper <brad.kemper@gmail.com> wrote:
>> 
>> It is pretty weird that Webkit still clips to the outside of the
>> border at the curved borders, when the overflow is 'hidden', and that
>> mozilla still doesn't clip to any curve. I brought this up some time
>> ago, and the following was added to the backgrounds and borders
>> module to clarify what should happen:
>> 
>>> Backgrounds, but not the border-image, are clipped to the
>>> appropriate curve (as determined by ‘background-clip’). Other
>>> effects that clip to the border or padding edge (such as ‘overflow’
>>> other than ‘visible’) also must clip to the curve. The content of
>>> replaced elements is always trimmed to the content edge curve.
>>> Also, the area outside the curve of the border edge does not accept
>>> mouse events on behalf of the element.
> 
> I think that language does not clearly say which curve the background
> of an inner element should be clipped to.

If you have ‘background-clip:padding-box’, then this says you should clip the background to the inner edge of the curve (that is, the curve that aligns with the padding box, not the outer curve that aligns with the border box). Therefore, if you have overflow:hidden in that situation, then anything outside the inner curve of the border should be clipped. So, both Firefox and Safari have problems here.

I think the problem is that overflow normally affects just the padding box. I couldn't find where CSS2.1 actually says that (it just refers to "the element's box"), but the example there shows it being clipped inside the border, which matches what UAs do, and it does say that scroll bars, if drawn, go "between the inner border edge and the outer padding edge."  [1]

But the initial value for 'background-clip' is 'border-box' (sadly), which means that (unless "the element's box" is always the box indicated by 'background-clip') you would get a weird clipping shape if you followed the text quoted above, whenever you didn't change the initial value of ‘background-clip’ (it would clip to the padding box for the flat areas, and then jump to the outside of the curves).  And we don't want the clipping to work differently for non-zero border-radius, because one doesn't expect border-radius to affect layout.

What I'm getting at, is that this is not just an issue for 'border-radius', it is also for 'background-clip'. We should add something to ‘background-clip’ similar to what we are saying about border-radius:

Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the box indicated by 'background-clip'. 


1. http://www.w3.org/TR/2009/CR-CSS2-20090908/visufx.html#overflow-clipping