Re: [CSS3, Backgrounds and Borders Module] some questions about border-radius

Andrew Fedoniouk <news@terrainformatica.com> wrote:
> 
> Here are three possible cases of the location of the transition area:
> http://www.terrainformatica.com/w3/border-radius-transition-areas.png
> 
> plus I've added for the reference example of Xara way of doing corner
> transitions on wide borders. Algorithm is close to case (1) as far as
> I can tell. At least it matches case #9 here 
> http://www.terrainformatica.com/w3/round-corners-sciter.png
> 
> I suspect that current spec is trying to define case (1) also.
> 
> Zack, your case is (3) and is different from what spec is saying
> about tangents.

I don't see how you can possibly read the spec as calling for case (1). 
The transition boundaries in case (1) are defined by the *outer* curve,
but the existing spec language speaks only of the *inner* curve (or
sharp inner corner).  Case (2) is not consistent with the spec language
either, for the same reason.

I think (3) is the only thing that can reasonably have been meant, and
the only thing we need is editorial improvements, clarifying the text
and/or adding diagrams to illustrate.

> For the note: FF appears to use case (2) and Google Chrome appears
> as having bug in such cases. Didn't test it in Safari. Document for
> testing:

Neither Gecko nor Webkit implements gradient transitions, so they
cannot be said to use *any* of these cases.  However, both of them draw
their sharp transition line outward from the corner point.

>             border-radius: 60px/20px;
>             -moz-border-radius: 60px/20px;
>             -webkit-border-radius: 20px;

I know webkit doesn't implement the full border-radius shorthand, but
you're not testing the same thing on all browsers if you give up and
just say 20px.  You can get rendering matching Gecko by spelling it out
longhand:

  -webkit-border-top-left-radius: 60px 20px;
  -webkit-border-top-right-radius: 60px 20px;
  -webkit-border-bottom-right-radius: 60px 20px;
  -webkit-border-bottom-left-radius: 60px 20px;

zw

Received on Sunday, 23 August 2009 18:56:05 UTC