Serialization of transform functions and transform attribute.

[karlcow]

I'm in the process of creating some WPT tests for transform functions such as setScale(sx, sy) and setTranslate(tx, ty) because browsers send different results.

I want also to make sure that I get my analysis of serialization correct with regards to the attribute values.

Missing comma in Safari and Chrome

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
var transform = svg.createSVGTransform();
transform.setScale(-2, -4);
g.transform.baseVal.appendItem(transform)
g.getAttribute('transform')

And the results are:

         IN             OUT
Safari:  scale(-2, -4)  scale(-2 -4)
Firefox: scale(-2, -4)  scale(-2, -4)
Chrome:  scale(-2, -4)  scale(-2 -4)

Modifying an existing transform attribute missing comma

data:text/html,<svg><g><circle r="100" transform="scale(2)"/></svg></g>

Then

const circle = document.querySelector("circle");
circle.getAttribute('transform');
// "scale(2)" everywhere
circle.transform.baseVal.getItem(0).setScale(3, 4)
circle.getAttribute('transform');
// "scale(3, 4)" in Firefox, "scale(3 4)" in Safari and Chrome