Re: [csswg-drafts] [css-backgrounds-4] Using logical keywords in background-position shorthand with multiple backgrounds (#12132)

I think I am having trouble with the phrase "properties sharing a computed value", or at least, I don't know why they would need to have the same computed value, as I don't think that applies to other logical property groupings.

Indeed, `direction: rtl; background-position-inline: 0%` refers to the right hand side. 

But I don't understand why that would be a problem.


Let's take a different set of properties first, `margin-left`/`margin-right` and `margin-inline-start`/`margin-inline-end`. 

Starting with default `direction: ltr`:
```
<div id="test1" style="direction: ltr; margin-left: 2px; margin-right: 1px;">...</div>
```

we see the following:

```
assert(document.getElementById("test1").style['margin-left'] == "2px");
assert(document.getElementById("test1").style['margin-right'] == "1px");
assert(document.getElementById("test1").style['margin-inline-start'] == "");
assert(document.getElementById("test1").style['margin-inline-end'] == "");

assert(window.getComputedStyle(document.getElementById("test1"))['margin-left'] == "2px");
assert(window.getComputedStyle(document.getElementById("test1"))['margin-right'] == "1px");
assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-start'] == "2px");
assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-end'] == "1px");
```

That is, the computed values of `margin-left` and `margin-inline-start` are the same values.

But, if we change the writing mode, and set `direction: rtl;`:

```
<div id="test1" style="direction: rtl; margin-left: 2px; margin-right: 1px;">...</div>
```

we see the following:

```
assert(document.getElementById("test1").style['margin-left'] == "2px");
assert(document.getElementById("test1").style['margin-right'] == "1px");
assert(document.getElementById("test1").style['margin-inline-start'] == "");
assert(document.getElementById("test1").style['margin-inline-end'] == "");

assert(window.getComputedStyle(document.getElementById("test1"))['margin-left'] == "2px");
assert(window.getComputedStyle(document.getElementById("test1"))['margin-right'] == "1px");
assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-start'] == "1px");
assert(window.getComputedStyle(document.getElementById("test1"))['margin-inline-end'] == "2px");
```

Now, the computed values of `margin-left` and `margin-inline-start`  are no longer the same value.


So, taking your example:

```
<div id="test1" style="direction: rtl; background-position-inline: 0%;">...</div>
```

I would expect the following to hold:

```
assert(document.getElementById("test1").style['background-position-inline'] == "0%");
assert(document.getElementById("test1").style['background-position-x'] == "");

assert(window.getComputedStyle(document.getElementById("test1"))['background-position-inline'] == "0%");
assert(window.getComputedStyle(document.getElementById("test1"))['background-position-x'] == "100%");
```

@Loirooriol, can you help me understand where this breaks down for you?

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


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

Received on Thursday, 3 July 2025 16:03:16 UTC