Mix between different versions of `skew` in the SVG specification

[Mbodin]

As stated in #328, there seems to be an issue around skew, skewX, and skewY.

I don't know enough the SVG specification, but there seems to be two different incompatible specifications of skew (and its variants skewX and skewY): https://drafts.csswg.org/css-transforms/#svg-skewX https://drafts.csswg.org/css-transforms/#funcdef-transform-skewx

In one case, skew only expects a number (meaning an angle in degrees). In the other case, skew expects an angle which is composed of a number and a unit (rad , turn, grad, deg), sometimes with an additional 0 value, sometimes not.

The question is what should we do about `SkewX? Should it accepts an angle, or a float? https://github.com/ocsigen/tyxml/blob/master/lib/svg_types.mli#L302

The issue is that currently TyXML refuses a correct syntax transform="skewX(42)" while printing an invalid transform="skewX(42deg)" in some contexts.

I can see several ways to resolve this. One could be to use angle internally, but accept both variants (with or without unit), and print-out the right version (potentially converting into degrees when the variant with unit is not accepted).

[Mbodin]

The same applies for rotate. A similar issue also applies for translate, in which one version accepts only numbers, and the other a length-percentage.

[Drup]

I'm a bit confused, because both seem like they reference the same thing at the same place in the syntax. Can you show two different pieces of HTML where skewX doesn't have the same syntax/signature ?

[Mbodin]

I agree that it's confusing. From what they say at the beginning of Section 6.2 ( https://drafts.csswg.org/css-transforms/#svg-syntax ), there are two syntaxes for transform: one for the SVG attribute, and one for the CSS property. And they differ 😭​

From what I understood, here is a valid example of SVG file, in which both rectangles should render exactly the same:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
  test {
    transform: skewX(45deg) ;
  }
  </style>
  <rect width="200" height="200" fill="red" class="test" />
  <rect width="200" height="200" fill="red" transform="skewX(45)" />
</svg>

However, as I understand, it would not be valid to write transform: skewX(45) ; in the <style> declaration, and neither would it be to write transform="skewX(45deg)" as a rect attribute: they really follow different syntaxes.