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

weinig has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds-4] Using logical keywords in background-position shorthand with multiple backgrounds ==
When trying to implement support for [`background-position-block`](https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-block)/[`background-position-inline`](https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-inline) and the new logical keywords added to [`<position>`](https://drafts.csswg.org/css-values-5/#position) in CSS Values 5, I ran into an issue with the fact that `background-position` (and `background`) operate on lists of backgrounds.

To explain the issue, let's start with an existing example where you have the following usage:

```
<div id="test1" style="background-position: left bottom, right top;">...</div>
```

In this example, the following assertions hold:

```
assert(document.getElementById("test1").style.backgroundPositionX == "left, right");
assert(document.getElementById("test1").style.backgroundPositionY == "bottom, top");
```

Simple. When processing the shorthand, the parser split each `background-position` pair into an `x` and `y` component and created lists with them.
 
Now, consider a case using the new logical keywords along with the old physical keywords:

```
<div id="test2" style="background-position: left bottom, block-start inline-end;">...</div>
```

What should the following assertions be?

```
assert(document.getElementById("test2").style.backgroundPositionX == ???);
assert(document.getElementById("test2").style.backgroundPositionY == ???);
assert(document.getElementById("test2").style.backgroundPositionBlock == ???);
assert(document.getElementById("test2").style.backgroundPositionInline == ???);
```

Internally in the engine, we would probably be modeling this as with some placeholder value that tells the style building to not do anything for that specific value:

```
backgroundPositionX      == [ left,          <placeholder> ]
backgroundPositionY      == [ bottom,        <placeholder> ]
backgroundPositionBlock  == [ <placeholder>, block-start   ]
backgroundPositionInline == [ <placeholder>, inline-end    ]
```

But its not clear how that would serialize.

Two ideas, both from @fantasai, are:

1. Allow lists to have empty values that take the place of the placeholder:

```
assert(document.getElementById("test2").style.backgroundPositionX == "left, ");
assert(document.getElementById("test2").style.backgroundPositionY == "bottom, ");
assert(document.getElementById("test2").style.backgroundPositionBlock == ", block-start");
assert(document.getElementById("test2").style.backgroundPositionInline == ", inline-end");
```

2. Add an explicit `defer` keyword for the same purpose:

```
assert(document.getElementById("test2").style.backgroundPositionX == "left, defer");
assert(document.getElementById("test2").style.backgroundPositionY == "bottom, defer");
assert(document.getElementById("test2").style.backgroundPositionBlock == "defer, block-start");
assert(document.getElementById("test2").style.backgroundPositionInline == "defer, inline-end");
```

I  prefer the explicitness of the `defer` keyword. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12132 using your GitHub account


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

Received on Monday, 28 April 2025 18:41:23 UTC