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

Zack Weinberg wrote:
> Andrew Fedoniouk <news@terrainformatica.com> wrote:
>>> I don't think example 9 is rendered right -- I would expect the
>>> color gradient to extend as far as "case 3" specifies.  But when
>>> the inner corner is not sharp (cases 1-8), cases 1-3 are
>>> indistinguishable, because the inner and outer curves start and end
>>> on the same lines.  So you don't need to worry about that.
>> but this : "color gradient to extend as far as "case 3" specifies"
>> will break current spec. that says that transition is limited by
>> quarter-ellipses of rounded-corners (as far as I understand wording
>> there).
> 
> To reiterate: the spec speaks only of the INNER curve.  Your cases 1
> and 2 are bounding the transition based on the OUTER curve.  That's
> clearly wrong.

And now I have lost any idea what all this means. Anyway...

Here is what I've got so far:

There are three possible cases of the area where gradient transition may 
happen. They are presented on this figure:

http://www.terrainformatica.com/w3/border-radius-transition-areas-fig.png

Here is a screenshot where the renderer (latest Sciter build) uses
variant (B) of transition areas:

http://www.terrainformatica.com/w3/round-corners-sciter-b.png

Here is a screenshot where the renderer uses variant (A):

http://www.terrainformatica.com/w3/round-corners-sciter.png

Variant (C) (gradient area is limited by rectangle-intersection of two 
borders) will not work as such rectangle can be outside of the curve 
completely - no area to do transition at all.

So I believe we have only one option for the area where gradient 
transition may happen and this is the option (B) on the figure above.

This area is a union of two rectangles, one with dimensions (Rx,Ry)
and another with dimensions (Bx,By).
Where: Rx,Ry are x and y values of border-radius at that corner and
        Bx,By are widths of borders meeting at that corner.

In other words gradient transition area is limited by the area having
following dimensions: max(Rx,Bx), max(Ry,By).

Yes, in rare cases like case #10 it may produce strange results at the 
first glance but if to think about borders that have different border
styles like dotted, dashed then these areas are exactly those places
where any other border styling other than solid is prohibited by the
spec.


> 
>> Case 4 has
>>
>> border-bottom: 0px solid transparent;
>>
>> Transition to that transparency is what you observe.
> 
> Oh, ok.  It would be nice if you published the HTML source for this
> image so that we could try it in other browsers.
> 

I've attached that document used for testing.
Note that it uses shortcuts for class and ID attributes.
So this:

   <div .container #fill-borders>

has to be replaced/changed to this:

   <div class="container" id="fill-borders">

-- 
Andrew Fedoniouk.

http://terrainformatica.com