- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 12 Aug 2011 13:51:49 -0700
- To: Brian Manthos <brianman@microsoft.com>
- Cc: www-style list <www-style@w3.org>
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