[csswg-drafts] [css-backgrounds][css-animations] Should background-* and animation-* longhands computed values serialize using the same truncation rules? (#12791)

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

== [css-backgrounds][css-animations] Should background-* and animation-* longhands computed values serialize using the same truncation rules? ==
I am trying to work out the correct behavior for computed value serialization of a few families of properties, `background-*` and `animation-*` (and their partners `mask-*` and `transition-*`, though I will ignore them for the moment for simplicity) and need some clarification as WPT currently has divergent expectations.

Specifically, this issue is looking at what the behavior of serialization of longhands should be when the base property is either omitted or has fewer entries (though, the same question arises for the case where the base property has more entries, complicating things with both cases will only serve to make this more complicated, and I think we will likely be able to infer one answer from the other). Currently WPT seems to expect that `background-*` properties to truncate to the length of `background-image`, whereas `animation-*` properties don't truncate to the length of `animation-name`. 

This lack of consistency seems unfortunate and somewhat contrary to the note in CSS Animations spec after describing how to [handle multiple values](https://www.w3.org/TR/css-animations-1/#animation-name) that states:

> NOTE: This is analogous to the behavior of the background-* properties, with [background-image](https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image) analogous to [animation-name](https://www.w3.org/TR/css-animations-1/#propdef-animation-name).

To more clear, here are specific examples.

### `background-*` Example

For the `background-*` behavior, suppose we are given the element:

```html
<div id="test1" style="background-repeat: repeat-x, repeat-y, space, round"></div>
```

and assuming it has no other relevant styles applied to it, what should be the result of the following:

```javascript
window.getComputedStyle(document.getElementById('test1'))['background-repeat']
```

WPT (in [this test](https://wpt.fyi/results/css/css-backgrounds/parsing/background-repeat-computed.html) for instance) expects the result to be truncated down to just the first element due to no corresponding `background-image` entries:

```javascript
 "repeat-x"
```

### `animation-*` Example

Conversely, for the `animation-*` behavior, suppose we are given the element:

 ```html
<div id="test2" style="animation-fill-mode: none, forwards, backwards, both;"></div>
```

and assuming it has no other relevant styles applied to it, what should be the result of the following:

```javascript
window.getComputedStyle(document.getElementById('test2'))['animation-fill-mode']
```

WPT (in [this test](https://wpt.fyi/results/css/css-animations/parsing/animation-fill-mode-computed.html) for instance) expects the result to NOT be truncated down to just the first element due to no corresponding `animation-name` entries, and instead be the full set:

```javascript
 "none, forwards, backwards, both"
```

My initial instinct is that the non-truncation behavior of the `animation-*` properties is probably correct, as it would seem to adhere to the rule set out for [coordinating list property group](https://www.w3.org/TR/css-values-4/#coordinating-list-property) that states pretty clearly:

> The [computed values](https://www.w3.org/TR/css-cascade-5/#computed-value) of the [coordinating list properties](https://www.w3.org/TR/css-values-4/#coordinating-list-property) are not affected by such truncation or repetition.

And `animation-*` were defined to be a [coordinating list property group](https://www.w3.org/TR/css-values-4/#coordinating-list-property) in [CSS Animations Level 2](https://www.w3.org/TR/css-animations-2/#animation-definition).

### Questions

But the inconsistency is still unfortunate. So this leaves me with the following questions:

- Should the `background-*` properties be defined to be a [coordinating list property group](https://www.w3.org/TR/css-values-4/#coordinating-list-property) and adopt the truncation behavior?
- Or alternatively, should the `background-*` properties be defined to be a [coordinating list property group](https://www.w3.org/TR/css-values-4/#coordinating-list-property) and the behavior for all such groups be redefined to truncate for computed style? (A reason to potentially prefer the truncation behavior is that it can be implemented more efficiently in some cases by allowing knowledge of the final length as determine by the length the base property).

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


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

Received on Saturday, 13 September 2025 16:52:50 UTC