Re: [css3-images] Radial gradients with a degenerate shape

On Thu, Aug 11, 2011 at 7:26 PM, Brian Manthos <brianman@microsoft.com> wrote:
> It has an impact on the location of non-percentage stop locations by affecting the length of the gradient line segment.
>
> Case A
> radial-gradient(center, 10px 10px, red 5px, blue 7px);
>
> Case B
> radial-gradient(center, 10px 0px, red 5px, blue 7px);
>
> Case C
> radial-gradient(center, 0px 20px, red 5px, blue 7px);
>
> Case D
> radial-gradient(center, 0px 0px, red 5px, blue 7px);

Try all of these with .1px substituted for 0px to see the limit image
each approaches.  I've prepared a testpage which lets you play with
this directly: <http://www.xanthir.com/etc/degenerate-gradients.html>.
 The sliders are logarithmic, going from a scale of 1 to 1/1000.

The upshot is that the limit image is *not* always equal to the last
color-stop, particular with your Case C.

Mathematically, the degenerate shapes are nothing special; they're
just degenerate ellipses.  When you scale them you get various
ellipses with one axis infinitely long - we usually call these
"parallel lines".  These have some implications:

* If the gradient is zero-height (case B), the 100% point on the
gradient-line is a reasonable distance away (whatever the width is),
so percentage stops are still placed normally.  However, when you try
to paint the canvas outside of the ending-shape, the ellipses
intersect the gradient-line at infinity, which means they're painted
the color of the last color-stop.
    - For repeating gradients, the color at infinity is indeterminate.
 However, as you approach zero-height, the successive ellipses
approach zero vertical separation between layers, which indicates that
we should paint it the average color.

* If the gradient is zero-width (case C), the 100% point on the
gradient-line coincides with the 0% line, so percentage stops all
resolve to 0px.  Non-percentage stops are unaffected, as usual.  When
you paint the canvas outside of the ending-shape, you just get
parallel lines advancing horizontally outward from the center, which
intersects the gradient-line in the usual way.  This looks like a
pretty normal linear gradient that happens to be mirrored across the
center.
    - For repeating gradients, nothing special happens.  It looks like
a mirrored repeating linear gradient.

* If the gradient is double-zero (case D), the 100% point on the
gradient-line coincides with the 0% line, so again percentage stops
resolve to 0px.  Painting outside the ending-shape presents some
problems, though.  The shape doesn't have an aspect-ratio, so the
shape outside is undefined.  We could take it to be circular,
zero-width, zero-height, or anything in-between, and they all produce
a different image.  We just have to define it to be something.

I think this ends up being similar to the question of what to define
0^0 as.  There are multiple valid answers, but some are less
consistent, so we can discard them.  In this case, defining it as
zero-height is less consistent, since the general zero-height case
treats percentages differently.

Similarly, the fact that it's a degenerate case seems to make it
slightly less consistent to treat it as a non-degenerate ratio.

So, this leaves us with treating it like zero-width.  This means that
there's a discontinuity in the image if you're approaching double-zero
from any direction other than zero-width, but that's unavoidable.

~TJ

Received on Friday, 12 August 2011 20:52:37 UTC