[css3-background][css3-images] background-repeat: none and extend

tl;dr: We need to nail down the desired effect of background-repeat on
images which have paint outside their stated dimensions, such as
gradients, because it's effecting how I write other things like
element().

Right now, if you use a CSS gradient in Firefox and set
background-repeat:none plus set background-size or background-position
to a non-default value, you can see that FF "clips" the gradient to
its sizing rectangle.  However, gradients theoretically throw paint
over an infinite plane.  It may sometimes be desirable to have the
gradient "look" infinite, so that it is only clipped by the actual
size of the background painting area.  This way, doing something like
"background-size:50%" would just scale the gradient down by 50%, but
the image would still fill the entire background.

I've been assuming that the Firefox behavior is a sensible default,
and that we'd activate the latter behavior through another
background-repeat value like 'extend' or something.*  Can I depend on
this?

I ask because other types of images may throw paint outside of their
stated bounds.  For example, I'm cleaning up the element() function to
be more than a sketch right now, and I'm defining the generated image
to be the size of the margin box of the referenced element.  This
means that any decorations or descendants that extend outside the
margin box (like border-image or box-shadow decorations, or floating
or positioned descendants) would get clipped even if background-size
or background-position shifts the image such that theoretically there
is room in the background positioning area to position them.
background-repeat:extend would be a useful switch here, making it so
that the browser would draw decorations and descendants outside the
margin box.

Thoughts?  I'm cool with this just being a planned extension in B&B 4,
I just want something to depend on when I'm writing this stuff.

* Why would this be a background-repeat value when it has nothing to
do with repetition?  Because, under one logical way to generalize
background-repeat, the property is unfortunately misnamed.  One way of
looking at background-repeat is that it specifies how to turn a finite
image into an infinite layer, which is what the background properties
actually act on.  'none' just means 'fill the plane with transparent
black outside the image's stated dimensions', while the repeat
keywords tile the image in one or both directions, filling in the rest
of the plane with transparent black if necessary.  'extend', then,
would mean 'paint the entire image, composited over an infinite
transparent black plane'.  For normal images this is the same as
'none'.  For gradients, it changes things so that the entire plane is
filled with the gradient's paint.  For element(), it changes things so
that decorations and descendants outside the margin box are still
painted.

~TJ

Received on Wednesday, 15 December 2010 21:10:44 UTC