[css3-background] Percentages on background-position

The thread earlier today [4] made me notice that there are a few issues
with percentages on background-position [1] that should be fixed in
CSS3.

The most serious is that percentages and lengths are defined separately,
which means that calc() doesn't make sense.  I think the spec should be
rewritten to say that horizontal (vertical) percentages are relative to
the width (height) of the box minus the width (height) of the image.
This is equivalent to the current behavior but yields a definition such
that percentages and lengths can have the same type of used value.
Having a single type of used value will allow calc() to make sense.  (We
can still say that the percentage is part of the computed value so that
inheritance behaves as it does today.)

A minor but related issue is that the "Percentages" line is incorrect,
both because it does not mention the relative-to-the-image aspect and it
doesn't mention that size of the box to which percentages are relative
is affected by 'background-origin'.


I would propose the following changes to the css3-backgrounds definition
of background-position [1]:

(1) Replace (in the property template):

# Percentages:  refer to the size of the box itself

with

# Percentages:  refer to the size of the area defined by
#               'background-origin' minus the size of the image

(2) Replace the definitions of "<percentage> <percentage>" and "<length>
<length>" values:

# <percentage> <percentage> 
#   With a value pair of '0% 0%', the upper left corner of the image is
#   aligned with the upper left corner of some area, usually the box's
#   padding edge, but possibly the border edge, content edge or the
#   viewport (<a href="#bg-area-edge">see below</a>). A value pair of
#   '100% 100%' places the lower right corner of the image in the lower
#   right corner of the area. With a value pair of '14% 84%', the point
#   14% across and 84% down the image is to be placed at the point 14%
#   across and 84% down the area.
# <length> <length>
#   With a value pair of '2cm 1cm', the upper left corner of the image
#   is placed 2cm to the right and 1cm below the upper left corner of
#   the area.

with the following text which defines the values more precisely and then
turns the existing text into examples:

# <percentage> <percentage> 
# <length> <length>
#   The first value gives the horizontal displacement of the initial
#   position of the left edge of the image from the left edge of the
#   background-origin area (<a href="#the-background-origin">see
#   below</a>); a percentage is relative to the width of the
#   background-origin area <em>minus</em> the width of the image.  The
#   second value gives the vertical displacement of the initial position
#   of the top edge of the image from the top edge of the
#   background-origin area (<a href="#the-background-origin">see
#   below</a>); a percentage is relative to the height of the
#   background-origin area <em>minus</em> the width of the image.  For
#   example:
#    * With a value pair of '0% 0%', the upper left corner of the image
#      is aligned with the upper left corner of the background-origin
#      area.
#    * With a value pair of '100% 100%', the lower right corner of the
#      image in the lower right corner of the area.
#    * With a value pair of '14% 84%', the point 14% across and 84% down
#      the image is to be placed at the point 14% across and 84% down
#      the area.
#    * With a value pair of '2cm 1cm', the upper left corner of the
#      image is placed 2cm to the right and 1cm below the upper left
#      corner of the area.


We also need to make sure the background-origin area is well-defined for
inline elements, probably by including the proposed definition of
background-inline-policy [3].

-David

[1] http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-position
[2] http://www.w3.org/TR/2005/WD-css3-values-20050726/#used-values0
[3] http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0079
      (Original Member-only proposal; called background-tiling here)
    http://developer.mozilla.org/en/docs/CSS:-moz-background-inline-policy
      (documentation of what Mozilla implemented; different names, and
      equivalent but rewritten (hopefully clearer) definitions)
    http://hixie.ch/tests/adhoc/css/background/inline/policy/
      (tests)
[4] http://lists.w3.org/Archives/Public/www-style/2006Jun/0045

-- 
L. David Baron                                <URL: http://dbaron.org/ >
           Technical Lead, Layout & CSS, Mozilla Corporation