RE: [css3-background] color transition line

If I'm reading your attachment correctly, what's wrong with it is that the demarcation line moves as the radii change.

My understanding and IE9(, and IE8 for that matter) are implemented such that the border-radius has no impact whatsoever on where the demarcation line is; radius only impacts the shape of the inner and outer edge that meet the line.

In short, the desired algorithm as I have always understood it is...
1. Calculate your border-box
2. Calculate your padding-box
3. For a given corner on both boxes, find the line that passes through both
This is the demarcation line.

Notice that border-radius is not involved in the identification of the line -- just the endpoints of the line-segment along that line.

I didn't realize that this was still unclear in anyone's mind in 2011.  Interesting.


> -----Original Message-----
> From: Simon Fraser []
> Sent: Tuesday, November 01, 2011 10:02 AM
> To: Řyvind Stenhaug
> Cc:
> Subject: Re: [css3-background] color transition line
> On Nov 1, 2011, at 9:05 AM, Řyvind Stenhaug wrote:
> > On Tue, 01 Nov 2011 14:54:26 +0100, Brad Kemper
> <>
> > wrote:
> >
> >>> I think you're reading it as "use the angle an indicator of the
> location along the partial ellipse of the outer curve, do the same with
> the inner curve, and connect the dots".
> >>
> >> I believe that was the intention.
> >>
> >> I thought this meant that for a 45deg ray, "the point on the curve"
> would be where 45deg was perpendicular to the tangent. Is that not
> right? It has been a long time since I have been in a geometry class,
> and describing a point on a curve as an angle has just never come up in
> any of my conversations since then.
> >>
> >> The third rendering doesn't look to me like it is where a 45deg
> angle would bisect the outer curve at a place where a tangent to the
> curve would be perpendicular to that angle.
> >
> > OK, the above doesn't really make sense to me, but the "tangent" part
> provides a hint to interpreting the spec in a different way. So it's
> supposed to pick a point on the border edge curve where the slope is a
> certain number, then the same for the padding edge curve, and the
> transition center is a line segment joining those two points? Then
> maybe t17-tangent.png is actually what the spec intends to say, though
> nobody's actually implemented that. Not sure it makes sense to choose
> that slope independently of the border radii, either.
> That seems hard to implement. What WebKit does is illustrated here:
> <>
> What's wrong with that approach?
> Simon

Received on Tuesday, 1 November 2011 17:22:40 UTC