[csswg-drafts] [css-typed-om-1] How should keyword timing function values like `step-start` be represented in Typed OM? (#13685)

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

== [css-typed-om-1] How should keyword timing function values like `step-start` be represented in Typed OM? ==
There appears to be an interop mismatch between engines when handling keyword values for timing functions such as `step-start` in Typed OM.

`step-start` is a keyword value, but it is equivalent to `steps(1, start)`, and some engines canonicalize it to that functional form.

Test case:

```js
const el = document.createElement('div');
document.body.appendChild(el);
el.style.animationTimingFunction = "step-start";
console.log('cssom style:', el.style.animationTimingFunction);
console.log('typed om:', el.attributeStyleMap.get('animation-timing-function'));

const el2 = document.createElement('div');
document.body.appendChild(el2);
el2.attributeStyleMap.set('animation-timing-function', new CSSKeywordValue("step-start"));
console.log('cssom style:', el2.style.animationTimingFunction);
console.log('typed om:', el2.attributeStyleMap.get('animation-timing-function'));
```

Current behavior:

* Chrome:

  * preserves `"step-start"` in both CSSOM and Typed OM (`CSSKeywordValue`)
* Safari:

  * when set via CSSOM, serializes as `"steps(1, start)"`
  * when set via Typed OM, preserves `"step-start"`
* Firefox:

  * serializes as `"steps(1, start)"`, Typed OM returns an unparsed value

The problem is that `steps(1, start)` is not representable in Typed OM Level 1, so canonicalization can lead to loss of Typed OM support.

This also explains the current WPT results, where Chrome and Safari pass:
[https://wpt.fyi/results/css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html?label=experimental&label=master&aligned](https://wpt.fyi/results/css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html?label=experimental&label=master&aligned)

It seems browsers should consistently treat the value either as the original keyword (`step-start`) or as its canonical form (`steps(1, start)`), instead of depending on whether it was set via CSSOM or Typed OM.


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


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

Received on Thursday, 19 March 2026 15:02:03 UTC