Parse as CSS 'transform' instead of SVG transform=""

Also refactor into a common algorithm for both DOMMatrix constructor
and setMatrixValue, since they kept getting out of sync. Explicitly
hook into the css-syntax "parse something according to a CSS grammar".

Fixes #149. Fixes #144.

Tests: web-platform-tests/wpt#5902

Author: zcorpan

geometry/Overview.bs

@@ -601,9 +601,8 @@ caniuse=dommatrix>matrix</dfn> with the purpose of describing transformations in
 context. The following sections describe the details of the interface.
 
 <div class="figure">
- <!--<img src="images/4x4matrix.png" alt="4x4 matrix with items m11 to m44">-->
  <math display=block><mrow><mfenced open=[ close=] separators=,><mrow><mtable><mtr><mtd><msub><mi>m</mi><mi>11</mi></msub></mtd><mtd><msub><mi>m</mi><mi>21</mi></msub></mtd><mtd><msub><mi>m</mi><mi>31</mi></msub></mtd><mtd><msub><mi>m</mi><mi>41</mi></msub></mtd></mtr><mtr><mtd><msub><mi>m</mi><mi>12</mi></msub></mtd><mtd><msub><mi>m</mi><mi>22</mi></msub></mtd><mtd><msub><mi>m</mi><mi>32</mi></msub></mtd><mtd><msub><mi>m</mi><mi>42</mi></msub></mtd></mtr><mtr><mtd><msub><mi>m</mi><mi>13</mi></msub></mtd><mtd><msub><mi>m</mi><mi>23</mi></msub></mtd><mtd><msub><mi>m</mi><mi>33</mi></msub></mtd><mtd><msub><mi>m</mi><mi>43</mi></msub></mtd></mtr><mtr><mtd><msub><mi>m</mi><mi>14</mi></msub></mtd><mtd><msub><mi>m</mi><mi>24</mi></msub></mtd><mtd><msub><mi>m</mi><mi>34</mi></msub></mtd><mtd><msub><mi>m</mi><mi>44</mi></msub></mtd></mtr></mtable></mrow></mfenced></mrow></math>
- <p class="capture">A 4x4 matrix representing a {{DOMMatrix}} with items m11 to m44.
+ <p class="capture">A <dfn lt="abstract matrix">4x4 matrix</dfn> with items m11 to m44.
 </div>
 
 <p>In the following sections, terms have the following meaning:
@@ -882,6 +881,51 @@ run the following steps:
 values, and also for ''0'' and ''-0''. [[!ECMA-262]]
 
 
+<h3 id=dommatrix-parse algorithm>Parsing a string into an abstract matrix</h3>
+
+<p>To <dfn>parse a string into an abstract matrix</dfn>, given a string <var>transformList</var>,
+means to run the following steps. It will either return a <a lt="abstract matrix">4x4 matrix</a> and
+a boolean <var>2dTransform</var>, or failure.
+
+<ol>
+ <li><p>If <var>transformList</var> is the empty string, set it to the string "<code
+ nohighlight>matrix(1, 0, 0, 1, 0, 0)</code>".
+
+ <li><p><a for=CSS>Parse</a> <var>transformList</var> into <var>parsedValue</var> given the grammar
+ for the CSS 'transform' property. The result will be a <<transform-list>>, the keyword
+ ''transform/none'', or failure. If <var>parsedValue</var> is failure, or any <<transform-function>>
+ has <<length>> values without <a spec=css-values>absolute length</a> units, or any keyword other
+ than ''transform/none'' is used, then return failure. [[!CSS3-SYNTAX]] [[!CSS3-TRANSFORMS]]
+
+ <li><p>If <var>parsedValue</var> is ''transform/none'', set <var>parsedValue</var> to a
+ <<transform-list>> containing a single identity matrix.
+
+ <li>
+  <p>Let <var>2dTransform</var> track the 2D/3D dimension status of <var>parsedValue</var>.
+
+  <dl class=switch>
+   <dt>If <var>parsedValue</var> consists of any <a
+   href="https://drafts.csswg.org/css-transforms-1/#transform-primitives">three-dimensional
+   transform functions</a>
+   <dd><p>Set <var>2dTransform</var> to <code>false</code>.
+
+   <dt>Otherwise
+   <dd><p>Set <var>2dTransform</var> to <code>true</code>.
+  </dl>
+
+ <li><p>Transform all <<transform-function>>s to <a lt="abstract matrix">4x4 matrices</a> by
+ following the “<a
+ href=https://drafts.csswg.org/css-transforms-1/#mathematical-description>Mathematical Description
+ of Transform Functions</a>”. [[!CSS3-TRANSFORMS]]
+
+ <li><p>Let <var>matrix</var> be a <a lt="abstract matrix">4x4 matrix</a> as shown in the initial
+ figure of this section. <a for=matrix>Post-multiply</a> all matrices from left to right and set
+ <var>matrix</var> to this product.
+
+ <li><p>Return <var>matrix</var> and <var>2dTransform</var>.
+</ol>
+
+
 <h3 id=dommatrix-create>Creating DOMMatrixReadOnly and DOMMatrix objects</h3>
 
 <p>To <dfn>create a 2d matrix</dfn> of type <var>type</var> being either {{DOMMatrixReadOnly}} or
@@ -935,48 +979,19 @@ must follow these steps:
    <li><p>If <a>current global object</a> is not a {{Window}} object, then throw a {{TypeError}}
    exception.
 
-   <li><p>If <var>init</var> is the empty string, set it to the string
-   "<code nohighlight>matrix(1, 0, 0, 1, 0, 0)</code>".
-
-   <li><p>Parse <var>init</var> into <var>parsedValue</var> by following the syntax description in
-   “<a href=https://drafts.csswg.org/css-transforms-1/#svg-syntax>Syntax of the SVG ‘transform’
-   attribute</a>” to a <<transform-list>> or the keyword ''transform/none''. If parsing is not
-   successful, or any <<transform-function>> has <<length>> values without <a
-   spec=css-values>absolute length</a> units<!--For WD: <a spec=css-values-3>absolute length
-   units</a>-->, or any keyword other than ''transform/none'' is used, throw a "{{SyntaxError}}"
-   {{DOMException}}. [[!CSS3-TRANSFORMS]]
-
-   <li><p>If <var>parsedValue</var> is ''transform/none'', set <var>parsedValue</var> to a
-   <<transform-list>> containing a single identity matrix
-
-   <li><p>Let <var>2dTransform</var> track the 2D/3D dimension status of <var>parsedValue</var>.
-    <dl class=switch>
-     <dt>If <var>parsedValue</var> consists of any <a
-     href="https://drafts.csswg.org/css-transforms-1/#three-d-transform-functions">3D Transform
-     functions</a>
-     <dd>Set <var>2dTransform</var> to <code>false</code>.
-
-     <dt>Otherwise
-     <dd>Set <var>2dTransform</var> to <code>true</code>.
-    </dl>
-
-   <li><p>Transform all <<transform-function>>s to 4x4 matrices by following the “<a
-   href=https://drafts.csswg.org/css-transforms-1/#mathematical-description>Mathematical
-   Description of Transform Functions</a>”. [[!CSS3-TRANSFORMS]]
-
-   <li><p>Let <var>matrix</var> be a 4x4 matrix as shown in the initial figure of this section. <a
-   for=matrix>Post-multiply</a> all matrices from left to right and set <var>matrix</var> to this
-   product.
+   <li><p><a lt="parse a string into an abstract matrix">Parse <var>init</var> into an abstract
+   matrix</a>, and let <var>matrix</var> and <var>2dTransform</var> be the result. If the result is
+   failure, then throw a "{{SyntaxError}}" {{DOMException}}.
 
    <li>
     <dl class=switch>
-     <dt>If <var>2dTransform</var> is set to <code>true</code>
+     <dt>If <var>2dTransform</var> is <code>true</code>
      <dd>Return the result of invoking <a>create a 2d matrix</a> of type {{DOMMatrixReadOnly}} or
      {{DOMMatrix}} as appropriate, with a sequence of numbers, the values being the elements <var
      ignore>m11</var>, <var ignore>m12</var>, <var ignore>m21</var>, <var ignore>m22</var>, <var
      ignore>m41</var> and <var ignore>m42</var> of <var>matrix</var>.
 
-     <dt>If <var>2dTransform</var> is set to <code>false</code>
+     <dt>Otherwise
      <dd>Return the result of invoking <a>create a 3d matrix</a> of type {{DOMMatrixReadOnly}} or
      {{DOMMatrix}} as appropriate, with a sequence of numbers, the values being the 16 elements of
      <var>matrix</var>.
@@ -1769,32 +1784,14 @@ user agents.
  <dt><dfn>setMatrixValue(<var>transformList</var>)</dfn>
  <dd>
   <ol>
-   <li><p>If <var>transformList</var> is the empty string, set it to the string "<code nohighlight>matrix(1, 0,
-   0, 1, 0, 0)</code>".
-
-   <li><p>Parse <var>transformList</var> into <var>parsedValue</var> by following the syntax
-   description in “<a href=https://drafts.csswg.org/css-transforms-1/#svg-syntax>Syntax of the SVG
-   ‘transform’ attribute</a>” to a <<transform-list>> or the keyword ''transform/none''. If parsing
-   is not successful, or any <<transform-function>> has <<length>> values without <a
-   spec=css-values>absolute length</a> units<!--For WD: <a spec=css-values-3>absolute length
-   units</a>-->, or any keyword other than ''transform/none'' is used, throw a "{{SyntaxError}}"
-   {{DOMException}}. [[!CSS3-TRANSFORMS]]
-
-   <li><p>If <var>parsedValue</var> is ''transform/none'', set <var>parsedValue</var> to a
-   <<transform-list>> containing a single identity matrix
-
-   <li><p>Set <a for=matrix>is 2D</a> to <code>false</code> if the <<transform-list>> consists of any
-   <a href="https://drafts.csswg.org/css-transforms-1/#three-d-transform-functions">3D Transform
-   functions</a>. Otherwise set <a for=matrix>is 2D</a> to <code>true</code>.
-
-   <li><p>Transform all <<transform-function>>s to 4x4 matrices by following the “<a
-   href="https://drafts.csswg.org/css-transforms-1/#mathematical-description">Mathematical
-   Description of Transform Functions</a>”. [[!CSS3-TRANSFORMS]]
+   <li><p><a lt="parse a string into an abstract matrix">Parse <var>transformList</var> into an
+   abstract matrix</a>, and let <var>matrix</var> and <var>2dTransform</var> be the result. If the
+   result is failure, then throw a "{{SyntaxError}}" {{DOMException}}.
 
-   <li><p><a>Post-multiply</a> all matrices from left to right to a combined 4x4 matrix.
+   <li><p>Set <a for=matrix>is 2D</a> to the value of <var>2dTransform</var>.
 
-   <li><p>Set the {{DOMMatrixReadOnly/m11}} to {{DOMMatrixReadOnly/m44}} attributes to the element
-   values of the 4x4 matrix in column-major order.
+   <li><p>Set <a for=matrix>m11 element</a> through <a for=matrix>m44 element</a> to the element
+   values of <var>matrix</var> in column-major order.
 
    <li><p>Return the current matrix.
   </ol>