[csswg-drafts] [web-animations] when are keyframe values resolved (#8157)

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

== [web-animations] when are keyframe values resolved ==
This issue stems from https://github.com/web-platform-tests/wpt/issues/37053 where I was asking about the intended behavior of a WPT test that essentially boils down to this little reduction:

```javascript
const element = document.body.appendChild(document.createElement("div"));
element.style.fontSize = "40px";
element.animate({ "lineHeight": ["40px", "calc(40px - 2em)"] }, 1000);
element.currentTime = 500;
```

What is the value of `line-height`?

As of this writing, Chrome will compute the value as the 50% value between `40px` and `-40px` (the _unclamped_ output of `calc(40px - 2em)`) and resolve `0px`.

Meanwhile, Firefox and Safari will resolve `20px`, the 50% value between `40px` and `0px` (the _clamped_ output of `calc(40px - 2em)`).

The difference here is that Safari (and I expect Firefox as well) will fully resolve the `calc()` value before using it as input to interpolating the animated value, whereas Chrome will not do so.

Of note, the CSS Values and Units spec has this to say in the [Range Checking section for calc()](https://w3c.github.io/csswg-drafts/css-values/#calc-range):

> Parse-time range-checking of values is not performed within [math functions](https://w3c.github.io/csswg-drafts/css-values/#math-function), and therefore out-of-range values do not cause the declaration to become invalid. However, the value resulting from an expression must be clamped to the range allowed in the target context.

Should that mean that the `calc()` value here should be clamped for the allowed range, which the [`line-height` definition](https://w3c.github.io/csswg-drafts/css-inline/#line-height-property) clearly states should be non-negative?

I think it would be good for the Web Animations specification to at least have a note accounting for this.

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


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

Received on Wednesday, 30 November 2022 14:37:42 UTC