[cssom]getComputedStyle(element) should return a list of transform functions

[gibbok]

I would like to suggest having getComputedStyle(element).transform function returning the actual transform functions and serialized matrix instead serialized matrix only.

Or alternative having a new function returning the actual transform functions.

Example:
https://jsfiddle.net/gibbok/pruyh2ns/

<div id="target"></div>

div {
  transform: translate(0, 0) rotate(45deg);
  width: 50px;
  height:100px;
  background-color:red;
}

var elem1 = document.getElementById("target");
var style = window.getComputedStyle(elem1, null);
console.log(style.transform);
// now returns matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)
// would be interesting having also the actual transform functions returned as translate(0, 0) rotate(45deg)

Related documentation:
https://drafts.csswg.org/css-transforms/#serialization-of-the-computed-value

Related:
https://bugs.chromium.org/p/chromium/issues/detail?id=680111
web-animations/web-animations-js#101

[alancutter]

This should be labelled as css-transforms-1.

[atanassov]

smfr: implementations are always returning a matrix or matrix3d. Authors want a list of functions.
dbaron: this will cause breakage
TabAtkins: the CSS Typed OM should return the functions
dino: Suggested resolution - no change to current getComputedStyle behaviour, but we hope that CSS typed OM will return a function for computedStyleMap
s/function/list of functions/
Rossen: objections?

RESOLVED: no change to current getComputedStyle behaviour, but we hope that CSS typed OM will return a function for computedStyleMap

[tabatkins]

Specifically, TypedOM will return a CSSTransformValue object, and there's no reason for it to collapse the functions into matrix(); it can preserve the functions exactly. It also contains an "equivalent matrix", so you get the best of both worlds.