Re: [csswg-drafts] [css-backgrounds-4] Computed Value serialization of background-position and its longhands (#12564)

First, we need to clarify whether the longhands keep the origin keyword in their computed value. This is relevant for inheritance:

```html
<div style="direction: ltr; background-position-x: x-end 25%">
  <div style="direction: rtl; background-position-x: inherit"></div>
</div>
```

Should the parent compute to `background-position: 75%`, and thus the child inherit `75%` too? Or should the parent compute to `x-end 25%`, and thus the child inherit `x-end 25%` (that will behave like `25%`)?

`x-end` seems to only be implemented in WebKit, which does the former.

Proposal: the computed value keeps the origin keyword. This will help with the logical longhands, see https://github.com/w3c/csswg-drafts/issues/12132#issuecomment-3123373338

But then, we are probably compat restrained that the resolved value of the shorthand should not include the keyword, e.g.

```html
<!DOCTYPE html>
<div id="target" style="background-position: right"></div>
<script>
console.log(getComputedStyle(target).backgroundPosition); // 100% 50%
</script>
```

However, it may be fine to serialize `getComputedStyle()` with the keyword in cases that didn't exist in CSS2.

| `background-position` | Gecko | Blink | WebKit |
| - | - | - | - |
| `right` | `100% 50%` | `100% 50%` | `100% 50%` |
| `right 1px center` | `calc(100% - 1px) 50%` | `calc(100% - 1px) 50%` | `calc(100% - 1px) 50%` (*) |
| `x-end` | N/A | N/A | `100% 50%` |

(*) Seems to have changed recently, Epiphany 48.5+ says `right 1px 50%`

And then we also need to decide whether the resolved values of the longhands should include the keyword or not. Might also do different things for the physical and logical longhands.

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


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

Received on Thursday, 13 November 2025 02:44:02 UTC