Re: [csswg-drafts] with the background-position property, where is the 50% position decision? (#7982)

> > These subpixel things are not currently specified. See #5210 for an attempt to specify how border widths are rounded.
> 
> but there is no "border" in my problem, it's about the position

CSS does not specify how to round these subpixel values at the moment.

I will try to go through the computation of background-position in your example, if that helps:

### Used values

In your example, you have the following
```css
   background-position: 50% 50%;
   background-size: 4px 6px;
   width: 9px;
   height: 10px;
```

When background position is specified in percentages, this is calculated as a percentage of the remaining space in the element (width of background positioning area - width of background image). This is specified in [CSS Backgrounds and Borders Module Level 3](https://w3c.github.io/csswg-drafts/css-backgrounds/#background-position) :

>A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by [background-size](https://w3c.github.io/csswg-drafts/css-backgrounds/#propdef-background-size) .

Your remaining horizontal space is `5px`. Your remaining vertical space is `4px`.
The horizontal offset is then `50% of 5px` or `2.5px`.
The vertical offset is `50% of 4px` or `2px`. 

This should give the same result as if you had specified:
```css
   background-position: 2.5px 2px;
```

These are your used values.

### Actual values

Your browser (or user agent, as it is called in the specs) might not be able to use these values directly. 
It can't render `2.5px` if you don't have a screen with a high enough resolution. It has to approximate the used value. This is the actual value.

[CSS Cascading and Inheritance](https://www.w3.org/TR/css-cascade-4/#actual) specifies the [actual](https://www.w3.org/TR/css-cascade-4/#actual) values:

> A [used value](https://www.w3.org/TR/css-cascade-4/#used-value) is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the [used](https://www.w3.org/TR/css-cascade-4/#used-value) width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the [font-size-adjust](https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust) property. The actual value is the used value after any such adjustments have been made.

The specification has [many examples of value computations](https://www.w3.org/TR/css-cascade-4/#stages-examples).

[CSS Values and Units]() also specifies that the browser has to approximate the values.
> In cases where the [used](https://www.w3.org/TR/css-cascade-5/#used-value) length cannot be supported, user agents must approximate it in the [actual](https://www.w3.org/TR/css-cascade-5/#actual-value) value.

### Your question
> My question is where are the documents that specify this type of CSS decision?

The documents specify that it is up to the browser to decide how to round these numbers. I have tried to provide links to where in the documents in the text above.

-- 
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7982#issuecomment-1301186171 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 2 November 2022 20:26:09 UTC