W3C home > Mailing lists > Public > www-style@w3.org > February 2011

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

From: Alan Gresley <alan@css-class.com>
Date: Sat, 12 Feb 2011 15:50:45 +1100
Message-ID: <4D5611A5.3050801@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
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" />


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

> 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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:43 UTC