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

On 12/02/2011 11:22 AM, Tab Atkins Jr. wrote:
> 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.


Don't get what you mean by "IE9, unfortunately, implements the spec 
here." Isn't IE supporting the spec a good thing. :-) Sorry, I don't 
have a IE9 preview with svg image support.


> 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.


This is not just because the image has just one dimension being 
height=50px. Try this svg.


<svg height="50px" version="1.1" xmlns="http://www.w3.org/2000/svg">

 <ellipse cx="50%" cy="50%" rx="50%" ry="25px" fill="blue" />

</svg>


It produces the same result in Opera and WebKit. Haven't checked in FF4b 
yet.


>
> 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


This is fine but we also have to include what happens when certain svg 
values are different like ry="25px".

Before any major decisions are made, many test have to be carried out. 
My test so far with svg as an image has produced very different 
rendering in a few cases.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Saturday, 12 February 2011 04:51:21 UTC