Re: border-image clarifications needed

I strongly disagree with your suggested changes.

I don't understand why you think repeat would not do a scale.  You  
always want to scale a border-side slice to the actual width of the  
border.  Especially when high DPI is involved, the image slices are  
not necessarily even in the same coordinate space!  1 pixel in the  
image != 1 CSS pixel!  This is why CSS pixels are not used to do the  
slicing.  I think you need to take some time to think about this  
difference before proposing changes.

It looks to me like the current spec has changed the definition of  
repeat for the worse, so I'll tell you how we do repeat (which is how  
it was specified at the time I implemented it).

Repeat preserves the image's aspect ratio and scales the image in the  
correct dimension to the border-width.  It should then do a tile that  
spreads out from the center of the border side.  All this was  
specified when I last looked at the spec.  Centering achieves the  
best result, since you want the joins of the images at the corners to  
be symmetric.  Tiling from a corner is a bad idea, since you get  
asymmetric results.

Round is basically like repeat but ensures that a whole # of images  
fit within the border.  The aspect ratio of the images gets messed  
with slightly to make this work.

dave

On Jun 13, 2007, at 10:31 AM, Andrew Smith wrote:

>
> I couldn't find Dave Hyatt's email address (would someone email it  
> to me?) but I looked at the Safari beta to test the -webkit-border- 
> image property. Here's what i found:
>
> Andrew Smith a écrit :
>> Regarding http://www.w3.org/TR/css3-background/#the-border-image
>> 1) Of the three keywords (stretch, repeat, and round) only two are  
>> explaned. If 'repeat' is explained somewhere else, a reference is  
>> needed.
> In webkit this does not tile the image. For example: on a  
> horisontal border the width of the tile is as set by the four  
> numbers used to split the source image; the height of the tile is  
> the same as the height set by border-width (or the replacement for  
> border-width from border-image). In case I'm not explaining it  
> well, here's a screen shot: http://littlesvr.ca/border-image/safari- 
> border-image-01.PNG
>
> Not sure what you (fantasai) mean by anchoring. The first tile  
> starts from the left (or top) and is cut off on the right (or bottom).
>
> Regardless, if it's not explained it's really up to the implementer  
> to decide what to do and I think this part could use some  
> consistency, so at least a "'repeat' means to simply tile the image  
> as for background-image" would do nicely in the spec.
>
>> 2) The sample source image in Example 1 does not break cleanly  
>> into 3x3. This is entirely unexpected. The coordinates should be  
>> 0-26 for the first diamond, 27-53 for the second, 54-80 for the  
>> third. The image the way it is now is hard to use for testing,  
>> because of 1 or 2-pixel artifacts. I can make a replacement if you  
>> like.
> On the webkit blog I found Hyatt saying the same thing. I took a  
> quick look again and at least the top left tile is too big: 0-27 in  
> both directions, it should be 0-26. I use http://littlesvr.ca/misc/ 
> border.png for testing instead.
>
>> 3) "If the first keyword is 'round', the top, middle and bottom  
>> images are reduced in width" - I assume that means they get  
>> squashed horisontally, but on the example it looks like they  
>> haven't lost their proportions, which is very unlikely unless the  
>> container is sized to accomodate the border image. Should clarify  
>> this.
>> 4) "If the first keyword is 'round', the top, middle and bottom  
>> images are reduced in width, so that exactly a whole number of  
>> them fit in the width of the padding box" - if the width of the  
>> padding box is a prime number the only way to fit a whole number  
>> of images in it is to have them sized to 1 or to the width of the  
>> padding area. Should clarify this.
>> 5) "X' = W / ceil(W / X)" - this doesn't give me a whole number,  
>> is it supposed to? If not, what am I to do with this formula? If  
>> it does make sense, a reference to where this is explained would  
>> help a lot.
> In webkit for 'round' the tiles are increased or decreased in size  
> to keep their proportions. Any space left is used up equally on  
> both ends, with the tiles cut off on both ends.
>
> Since I can't figure out what the author(s) of the specification  
> meant, I propose the following changes: http://littlesvr.ca/border- 
> image/border-image-01.pdf If approved, the webkit implementation  
> remains mostly valid (except for the 'repeat'). I believe that will  
> handle all the expected use cases and I will happily implement the  
> same in Mozilla.
>
>> 6) If the width of two consecutive sides isn't the same, what's  
>> done to the corner? There are at least three different ways to  
>> deal with it. Should clarify this.
> In webkit the corner is stretched in both directions. Actually this  
> is already explained in step 1 bullet 3, but I moved it in the  
> proposed changes document.
>
> Comments please?
>
> Andrew
>
>

Received on Friday, 15 June 2007 23:12:29 UTC