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

Your sample page (presumably intentionally) stops at 0.05% so of course it doesn't vanish.

I'm not seeing the discontinuities you're referring to, unfortunately. :(

In my mind it's very simple.

Think of the radial brush as a coin with zero thickness.  The whole coin is painted blue.  On top of that blue, a red circle is painted in the center on both sides and with half the diameter of the faces of the coin.  The painting was done with spray paint so there's a blend between the red and the blue -- but that blend stops before the edge of the coin.

[A] Obtain a table.  Paint the table blue.  Put the coin on the table.  Position a camera directly above the coin to render case A.
[B] Stand the coin on end (use magnets or something) with the sides of the coin facing to the "top" and "bottom" sides of the table (relative to your camera angle).  That's the rendering for case B.
[C] Stand the coin on end (use magnets or something) with the sides of the coin facing to the "left" and "render" sides of the table (relative to your camera angle).  That's the rendering for case B.

Only in case [A] is there any red visible.

As you're tilting the coin from flat [A] to standing [B] / [C], you get the intermediate ellipticals such as radial-gradient(center, 10px 0.5px, red 5px, blue 7px).

-Brian

-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Friday, August 12, 2011 1:52 PM
To: Brian Manthos
Cc: www-style list
Subject: 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 22:08:09 UTC