Tighten up DOMMatrix's stringifier; throw for NaN/Infinity

Fixes w3c#120.

Tests: web-platform-tests/wpt#5885

Author: zcorpan

geometry/Overview.bs

@@ -32,6 +32,10 @@ Default Highlight: javascript
 
 <pre class=anchors>
 type: exception; text: SyntaxError; url: https://html.spec.whatwg.org/multipage/infrastructure.html#js-syntaxerror
+urlPrefix: https://tc39.github.io/ecma262/; spec: ECMA-262
+    type: dfn
+        text: ToString; url: sec-tostring
+        text: !; url: sec-algorithm-conventions
 </pre>
 
 <script src=https://resources.whatwg.org/file-issue.js async data-file-issue-url="https://github.com/w3c/fxtf-drafts/issues/new?title=[geometry]%20"></script>
@@ -935,15 +939,15 @@ must follow these steps:
    exception.
 
    <li><p>If <var>init</var> is the empty string, set it to the string
-   "<code>matrix(1, 0, 0, 1, 0, 0)</code>".
+   "<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}}
-   exception. [[!CSS3-TRANSFORMS]]
+   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
@@ -1405,22 +1409,111 @@ export>is 2D</dfn>. This flag indicates that:
  <dd><p>Returns the serialized 16 elements {{DOMMatrixReadOnly/m11}} to {{DOMMatrixReadOnly/m44}} of
  the current matrix in column-major order as {{Float64Array}}.
 
- <dt><dfn>stringifier()</dfn>
+ <dt><dfn dfn>stringification behavior</dfn>
  <dd>
-  <dl class=switch>
-    <dt>If <a for=matrix>is 2D</a> is <code>true</code>
-    <dd><p>Return a DOMString in the form of a CSS Transforms <<matrix()>> function where <var
-    ignore>a</var> is {{DOMMatrixReadOnly/a}} attribute, <var ignore>b</var> is
-    {{DOMMatrixReadOnly/b}} attribute, <var ignore>c</var> is {{DOMMatrixReadOnly/c}} attribute,
-    <var ignore>d</var> is {{DOMMatrixReadOnly/d}} attribute, <var ignore>e</var> is
-    {{DOMMatrixReadOnly/e}} attribute, <var ignore>f</var> is {{DOMMatrixReadOnly/f}} attribute.
-    [[!CSS3-TRANSFORMS]]
-
-    <dt>Otherwise
-    <dd><p>Return a DOMString in the form of a CSS Transforms <<matrix3d()>> function where <var
-    ignore>m11</var> to <var ignore>m44</var> are set to {{DOMMatrixReadOnly/m11}} to
-    {{DOMMatrixReadOnly/m44}} attributes. [[!CSS3-TRANSFORMS]]
-  </dl>
+  <ol>
+   <li>
+    <p>If one or more of <a for=matrix>m11 element</a> through <a for=matrix>m44 element</a> are a
+    non-finite value, then throw an "{{InvalidStateError}}" {{DOMException}}.
+
+    <p class=note>The CSS syntax cannot represent ''NaN'' or ''Infinity'' values.
+
+   <li><p>Let <var>string</var> be the empty string.
+
+   <li>
+    <p>If <a for=matrix>is 2D</a> is <code>true</code>, then:
+
+    <ol>
+     <li><p>Append "<code nohighlight>matrix(</code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m11 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m12 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m21 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m22 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m41 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m42 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>)</code>" to <var>string</var>.
+    </ol>
+
+    <p class=note>The string will be in the form of a a CSS Transforms <<matrix()>> function.
+    [[CSS3-TRANSFORMS]]
+
+   <li>
+    <p>Otherwise:
+    <ol>
+     <li><p>Append "<code nohighlight>matrix3d(</code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m11 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m12 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m13 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m14 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m21 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m22 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m23 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m24 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m41 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m42 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m43 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>, </code>" to <var>string</var>.
+
+     <li><p>Append [=!=] [=ToString=](<a for=matrix>m44 element</a>) to <var>string</var>.
+
+     <li><p>Append "<code nohighlight>)</code>" to <var>string</var>.
+    </ol>
+
+    <p class=note>The string will be in the form of a a CSS Transforms <<matrix3d()>> function.
+    [[CSS3-TRANSFORMS]]
+
+   <li><p>Return <var>string</var>.
+  </ol>
+</dl>
 
   <div class=example>
    <p>In this example, a matrix is created and several 2D transformation methods are called:
@@ -1436,7 +1529,9 @@ export>is 2D</dfn>. This flag indicates that:
    <pre><code>
    "matrix(2, 0, 0, 2, 20, 20)"
    </code></pre>
+  </div>
 
+  <div class=example>
    <p>In the following example, a matrix is created and several 3D transformation methods are called:
 
    <pre><code>
@@ -1452,6 +1547,15 @@ export>is 2D</dfn>. This flag indicates that:
    "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)"
    </code></pre>
   </div>
+
+  <div class=example>
+   <p>This example will throw an exception because there are non-finite values in the matrix.
+
+   <pre><code>
+   var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]);
+   var string = matrix + " Batman!";
+   </code></pre>
+  </div>
 </dl>
 
 
@@ -1668,16 +1772,16 @@ 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>matrix(1, 0,
+   <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}}
-   exception. [[!CSS3-TRANSFORMS]]
+   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