Re: Border-Images and oversized corners: CSS Backgrounds and Borders Module Level 3

So...

Does this make sense? Can the corners of border-image act the same as  
the corners of 'border-radius' in regard to how they resize when the  
box is to small to contain all the corners at the sizes indicated? Can  
these two properties have similar wording for that?


On Sep 26, 2009, at 6:42 PM, Brad Kemper wrote:

> I'm looking at the editor's Draft of the "CSS Backgrounds and  
> Borders Module Level 3". I noticed that in 5.3 'border-image-width'  
> that it says the following:
>
> If two opposite ‘border-image-width’ offsets are large enough  
> that they overlap, then their used values are proportionally reduced  
> until they no longer overlap.
>
> That is a good idea, because it sounds like I can use 'border-image'  
> analogously to 'border-radius' when the box is too small for the  
> specified values, as I think it should. But I wonder if we should be  
> a bit more explicit, with language and formula matching that of  
> 'border-radius', which says this:
>
> The sum of two adjacent radii may not be more than the width or  
> height (whichever is relevant) of the box. If any sum exceeds that  
> value, the used values of all radii are reduced according to the  
> following formula: Let f = min(Li/Si), where i ∈ {top, right,  
> bottom, left}, Si is the sum of the radii of the corners on side i,  
> and Ltop = Lbottom = the width of the box, and Lleft = Lright = the  
> height of the box. If f < 1, then all corner radii are reduced by  
> multiplying them by f.
>
> Thus, for 'border-image' we would have:
>
> The sum of two opposing ‘border-image-width’ offsets  may not be  
> more than the width or height (whichever is relevant) of the box. If  
> any sum exceeds that value, the used values of all ‘border-image- 
> width’ offsets are reduced according to the following formula: Let  
> f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum  
> of the ‘border-image-width’ offsets intersecting side i, and Ltop  
> = Lbottom = the width of the box + left and right offsets, and Lleft  
> = Lright = the height of the box + top and bottom offsets. If f < 1,  
> then all ‘border-image-width’ offsets are reduced by multiplying  
> them by f.
>
> That does make it clear (-ish) that all offsets are reduced  
> proportionally, not just the two opposite offsets (if I understand  
> this formula correctly). If it was just the two opposite offsets,  
> there would be unwanted distortion, and an unwanted difference  
> between rounded corners created via 'border-radius' and rounded  
> corner images used in 'border-image'. On the other had, maybe this  
> formula could be stated more simply for both border-radius and  
> border-image?
>
> We could also go further, in item 2 (Scale to length) of 5.6 (Border- 
> image drawing process), add another bullet:
>
> Scale to length.
> If the the middle part of the border-image area has zero width, then  
> the top, middle and bottom images are not drawn.
> By the way, I was thoroughly confused by the following sentence/ 
> formula:
> If X ≠ 0 is the width of the image and W is the width of the  
> padding area, then the rounded width X' = W / ceil(W / X)
> I start reading it as "If X is not equal to zero is the width..."  
> That seems to have two verbs. Also, I don't think the padding area  
> is relevant to this calculation any more, since the introduction of  
> the whole 'background-image-offset' idea.
>
>
> [1] http://dev.w3.org/csswg/css3-background/#the-border-image-width