Re: [CSSWG] Minutes and Resolutions 2009-08-12

Alright, so here's an updated proposal. Apologies for the hand-waving in a
couple of places...

Define new image types linear-gradient and radial gradient with the
following syntax:
  linear-gradient( background_position, background_position | angle, color,
[ [ percentage ] color ]*, color);
The parameters mean start position, end position, start color stop, [
additional color stops ], end color stop.

  radial-gradient( background_position, length, background_position, length,
color, [ [ percentage ] color ]*, color);
The parameters mean first circle center, first circle radius, second circle
center, second circle radius, start color stop, [ additional color stops ],
end color stop.

background_positions are interpreted relative to the background positioning
area defined by CSS3 Backgrounds and Borders, as for background-position.

In linear-gradient, using an angle for the end position means drawing a ray
along that angle starting at the first position and using that ray's
intersection with the edge of the background positioning area as the end
position. (We'd have to define the interpretation of the angle, I'm leaving
that open.)

Gradients fill the background painting area defined by CSS3 Backgrounds and
Borders. If 'background-repeat' is 'no-repeat' for this image, then the
gradient does not repeat, areas beyond the first and last color stops are
filled with the color of the nearest color stop. If 'background-repeat' has
any other value, then the gradient repeats naturally beyond the start and
end by repeating the given color stops in the normal manner (see e.g. SVG).
(When gradient images are used in other situations than CSS backgrounds,
default to 'no-repeat'.)

In the list of color stops, the first color stop is always the color for the
start point or circle, and the last color stop is the color for the end
point or circle. The intermediate color stops may have percentages supplied
which must be between 0% and 100% inclusive, describing their position in
the color spectrum. If no percentage is supplied, then we compute the
default percentages by considering each run of consecutive intermediate
color stops which needs a default. Each such run has color stops with known
position before and after it, so evenly distribute the run's color stops
between them. Color stops are stably sorted into the order of their
positions before being used. So for example,
  red, 20% blue, black, yellow, 80% magenta, green
would have red at 0, blue at 20%, black at 40%, yellow at 60%, magenta at
80%, green at 100%.
  red, 80% blue, black, yellow, 20% magenta, green
would have red at 0, magenta at 20%, yellow at 40%, black at 60%, blue at
80%, green at 100%. (Specifying stops out of order is disrecommended, but we
have to define something for it.)

For radial gradients, if we feel that allowing the circle centers to differ
isn't worth it, we can just remove the second circle center parameter. I
don't really mind one way or another.

What this *doesn't* allow is complex radial sizing effects like creating a
circle that exactly covers or is exactly contained in a box. I think it gets
too complicated to handle all the possible alternatives that an author might
want. You can achieve those effects using an SVG image with
preserveAspectRatio, and I think we should leave it at that.

Rob
-- 
"He was pierced for our transgressions, he was crushed for our iniquities;
the punishment that brought us peace was upon him, and by his wounds we are
healed. We all, like sheep, have gone astray, each of us has turned to his
own way; and the LORD has laid on him the iniquity of us all." [Isaiah
53:5-6]