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

My point was, the behavior should be the same in case of a hypothetical `background-position` that only takes one position _and_ the `background-position` we have that operates on a list of positions. So, going with an explicit keyword, the result is this in _both cases_:

```html
<div id="test3" style="background-position: left bottom;">...</div>
```

```js
assert(document.getElementById("test3").style.backgroundPositionX == "left");
assert(document.getElementById("test3").style.backgroundPositionY == "bottom");
assert(document.getElementById("test3").style.backgroundPositionBlock == "defer");
assert(document.getElementById("test3").style.backgroundPositionInline == "defer");
```

and

```html
<div id="test4" style="background-position: block-start inline-end;">...</div>
```

```js
assert(document.getElementById("test4").style.backgroundPositionX == "defer");
assert(document.getElementById("test4").style.backgroundPositionY == "defer");
assert(document.getElementById("test4").style.backgroundPositionBlock == "block-start");
assert(document.getElementById("test4").style.backgroundPositionInline == "inline-end");
```

Though this discussion is moot, anyway, as we currently only have list-valued properties that are affected by this issue. So, apologies for the confusion!

-----

My original point was to go with option 2, i.e. use an explicit keyword. Using an empty value might be confusing to authors and looks strange, especially if you have multiple of them. Also, it makes sense to distinguish the case of being set to a later-resolved value vs. not being set at all.

-----

One question that just came to my mind is, what happens when you explicitly set the longhands to `defer`? E.g.

```html
<div id="test5" style="background-position-x: defer, left; background-position-y: defer, bottom;">...</div>
```

```js
assert(document.getElementById("test5").style.backgroundPosition == ???);
assert(document.getElementById("test5").style.backgroundPositionBlock == ???);
assert(document.getElementById("test5").style.backgroundPositionInline == ???);
```

One possible solution would be to fall back to the initial value, i.e.

```js
assert(document.getElementById("test5").style.backgroundPosition == '0% 0%, left bottom');
assert(document.getElementById("test5").style.backgroundPositionBlock == '0%, defer');
assert(document.getElementById("test5").style.backgroundPositionInline == '0%, defer');
```

and

```html
<div id="test6" style="background-position-block: defer, start; background-position-inline: defer, end;">...</div>
```

the result would be

```js
assert(document.getElementById("test5").style.backgroundPosition == '0% 0%, block-start inline-end');
assert(document.getElementById("test5").style.backgroundPositionX == '0%, defer');
assert(document.getElementById("test5").style.backgroundPositionY == '0%, defer');
```

-----

Also note that in your initial examples you had a little error. The logical longhands don't use the `block-` and `inline-` prefixes for the values (to avoid redundancy). So, when setting `background-position: block-start inline-end;` on the element the result should be

```js
assert(document.getElementById("test2").style.backgroundPositionBlock == "start");
assert(document.getElementById("test2").style.backgroundPositionInline == "end");
```

not 

```js
assert(document.getElementById("test2").style.backgroundPositionBlock == "block-start");
assert(document.getElementById("test2").style.backgroundPositionInline == "inline-end");
```

Sebastian

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


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

Received on Thursday, 1 May 2025 22:20:03 UTC