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

On 14/02/2011 11:21 AM, Tab Atkins Jr. wrote:
> Alan, the point of my email was specifically to test the behavior of
> browsers when given an image with precisely one intrinsic dimension
> and no intrinsic ratio. JPEG and PNG always have both their intrinsic
> dimensions and an intrinsic ratio.


Agree in respect to JPEG and PNG.


> The values I used in the ellipse
> are designed specifically to show me the size of the SVG image itself
> - differing values, particularly static ones, may not exercise the
> same behavior, and so probably aren't useful here.


A SVG does not have a size, nor intrinsic dimension nor intrinsic ratio 
if the SVG is constructed with percentage values and the SVG does not 
has absolute units for it's rendering area (porthole). A rendering area 
or porthole can not be considered as an intrinsic size.

Not declaring a width on a SVG does not mean that it has no intrinsic 
width, rather it's a dimensionless width. Giving a SVG an absolute 
height is not 'one intrinsic dimension' and not giving a SVG any width 
does not mean the SVG has 'no intrinsic ratio'.

What you want to change is this.


    3. If the image has no intrinsic ratio and a ratio cannot be
       calculated from its width and height, then its intrinsic
       ratio is assumed to be 1:1.


For replaced elements [1] is this.

   | For example, a bitmap image has an intrinsic width and an intrinsic
   | height specified in absolute units (from which the intrinsic ratio
   | can obviously be determined). On the other hand, other documents
   | may not have any intrinsic dimensions (for example, a blank HTML
   | document).


A SVG can best be equated to a blank HTML document and insofar it has no 
intrinsic dimensions. So none of the algorithms from point 1 to point 6 
for ''list-style-image' [2] can apply for SVG.

You say is your previous email that "IE9, unfortunately, implements the 
spec here." What do you mean by this and what version of IE9 were you 
testing in?

I have said that IE9 behavior is a bug but not because it is not 
following the spec but more to do with the fact that using the term 
intrinsic dimension or intrinsic ratio when talking about SVG is wrong 
and has no bearing on how intrinsic dimension or intrinsic ratio is 
understood in respect to a SVG. I can possibly presume that you just 
quickly checked in whatever version of IE9 and did not adjust the width 
of the viewport. Anyway, the placement of your <ul> sitting on the left 
edge of the <body> border box would not show any great change in IE9. 
Try the markup below and see what IE9 does when adjusting the width of 
the viewport.

test.html:

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


Now here is a screenshot of the above test for the engines that support 
SVG as list-style-image.

<http://css-class.com/test/svg/ellipse/list-style-image1.png>


Here is a screenshot of the same test showing what happens when the 
viewport is wider in IE9 RC.

<http://css-class.com/test/svg/ellipse/list-style-image2.png>


Here is a SVG with no clipping window width or porthole width (exactly 
the same as your SVG).

<http://css-class.com/test/svg/ellipse/intrinsic4.svg>


Here is a SVG with no clipping window dimension or porthole dimension 
and can best be equated like blank HTML document.

<http://css-class.com/test/svg/ellipse/intrinsic.svg>


This can somewhat be achieve using a blank HTML document by giving the 
<body> a background-image (50px by 50px) with a background-size: 100% 
100%. Remarkably it seems that IE9 RC is the only engines that handles 
this correctly.

<http://css-class.com/test/temp/disc.htm>


So surely we must test before we go changing a spec that works for a 
JPEG or PNG but has little meaning or interoperability between 
implementations with SVG.



1. <http://www.w3.org/TR/CSS21/conform.html#replaced-element>
2. <http://www.w3.org/TR/CSS21/generate.html#list-style>



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

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

Received on Monday, 14 February 2011 06:21:53 UTC