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

On 12/02/2011 3:50 PM, Alan Gresley wrote:
> 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.


Reading that part of the spec, there is no differentiation between an 
image like a JPG or PNG and a SVG. One thing I note when not declaring a 
height or width to a SVG is that it fill the entire canvas. I do believe 
that intrinsic dimensions between images (JPG, etc.) and SVG are 
completely different things. For starters, images like JPGs and PNGs don 
not have descendant elements.



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


Yes. The same if no width or height is given.


>> Chrome fills
>> in the missing dimension as, I dunno, .5em? Something like that,
>> probably related to the width of the default bullet.


I agree.


>> It's not exactly
>> right, but it clearly has the same behavior as Opera.


Yes but appears smaller.


>> I can't seem to get Firefox or IE8 to render an SVG list-style-image.


IE8 does not support SVG period and IE9 beta does not support SVG in 
list-style-image. You need to check in FF4 beta to view SVGs.


>> IE9, unfortunately, implements the spec here.


Upon testing, IE9 RC does a strange thing. The effect would have to make 
it be a major bug.


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


Remember that a SVG is not a normal image.



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


Test case.


<http://css-class.com/test/svg/intrinsic-list-marker.htm>


All browsers render the same when the SVG has a given height and width 
(both 50px) and the cx value is 50% or an absolute value that is half 
the size of it width (25px).

Opera 11 shows ok but the list items are rather tall.

WebKit shows ok.

Gecko 2 (FF4b) will not render a SVGs that have no height or width.

IE9 RC sizes the SVGs that do not have a width to be 50px wide when the 
right edge of the viewport is 50px of the left edge of the list item. 
This magical width can be greater if padding is added (it accounts for 
the width of the padding). I have marked the right edge of this magical 
area by an AP element with a solid opaque 1px line. Now resizing the 
viewport show the SVG marker becoming wider. Surely a bug.

Either Opera or WebKit are correct but when an absolute unit is used for 
the rx and ry, I believe this should be the computed value, regardless 
of if the SVG has no height or width.



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

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

Received on Saturday, 12 February 2011 16:39:04 UTC