[css-typed-om-1] How should keyword timing function values like `step-start` be represented in Typed OM?

[janvarga]

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:

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

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.