[CSS2.1] list-style-image sizing rules don't match reality

In <http://www.w3.org/TR/CSS21/generate.html#list-style> there is an
algorithm for sizing images used in list-style-image.  The algorithm
described there has identical results to what is in Image Values,
except for one case: when an image is used that has only one intrinsic
dimension and no intrinsic ratio, the CSS2.1 algorithm sets the other
dimension to make a square, rather than setting it to 1em.

This does not reflect implementations, however.  I did some basic
testing with an SVG image that had only a height or width:

test.svg:
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'
'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg height="50px" version='1.1' xmlns='http://www.w3.org/2000/svg'>
 <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue" />
</svg>

test.html:

<!doctype html>
<ul>
 <li>one</li>
 <li>two</li>
 <li>three</li>
</ul>
<style>
ul {
 list-style-image: url("test.svg");
}
</style>


Opera fills in the missing dimension as 1em, not 50px.  Chrome fills
in the missing dimension as, I dunno, .5em?  Something like that,
probably related to the width of the default bullet.  It's not exactly
right, but it clearly has the same behavior as Opera.

I can't seem to get Firefox or IE8 to render an SVG list-style-image.
IE9, unfortunately, implements the spec here.  Luckily, this is a tiny
edge-case that I suspect is extremely rare.  In all the normal cases
(images with all intrinsic dimensions, images with no dimensions,
images with just a ratio), everyone does things right.

I suggest changing the spec here to match the webkit/opera behavior,
so that list-style-image is consistent with every other use of images
in CSS.  My suggested change is to replace line #3 in the algorithm
with "If the image has no intrinsic ratio, intrinsic width, or
intrinsic height, then its intrinsic ratio is assumed to be 1:1."

~TJ

Received on Saturday, 12 February 2011 00:23:44 UTC