[css-images-4] Defining coordinate systems for various types of images.

[frivoal]

In the css-ui-3 spec's definition of the cursor property, we find this :

<x><y>

The x-coordinate and y-coordinate of the position in the cursor’s coordinate system (left/top relative) which represents the precise position that is being pointed to.

Note: This specification does not define how the coordinate systems of the various types of are established, and defers these definitions to [CSS4-IMAGES].

This is when discussing the x and y values of the property, that position the cursor hotspot in the cursor image.

As far as I can tell, css-images (regardless of level), doesn't do that. Did I miss it?

That the origin is at the top left is clear. This also probably means that:

• that for a bitmap image the unit is in image pixels
• that for an svg image, the unit is the unitless length integer

However, it isn't clear what this means for a gradient or
an image-set, which has images at multiple resolutions.

The full list of possible values is:

<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>

We need to define this (and css-image seems does seem like the right place, so that things just work when new <image> values are added).

As for the actual definitions, I propose:
bitmaps
-> the unit is the image pixel for bitmap images

svg
-> the svg unit

<image()>
-> the coordinate system of the image you end up loading
ISSUE: what to do if we fallback to a color?

<image-set()>
-> the coordinate system of the first image in the list

<element()>
-> CSS pixels?

<cross-fade>
-> the coordinate system of the <cf-mixing-image>

<gradient>
-> each axis goes from 0 to 100