Add CSSTransformComponent.is2D (#614)

* Add CSSTransformComponent.is2D

* Simplify is2D handling.

Author: darrnshn

css-typed-om/Overview.bs

@@ -2010,27 +2010,18 @@ is a [=list=] of {{CSSTransformComponent}}s.
     when called,
     perform the following steps:
 
-    1. Let |matrix| be a 4x4 matrix,
-        initially set to the identity matrix.
-        Let |is2D| be a boolean initially set to `true`.
+    1. Let |matrix| be a new {{DOMMatrix}},
+        initialized to the identity matrix,
+        with its {{DOMMatrix/is2D}} internal slot set to `true`.
 
     2. [=list/For each=] |func| in |this|’s [=values to iterate over=]:
 
-        1. Let |funcMatrix| be |func|’s equivalent 4x4 transform matrix,
-            as defined in [[css-transforms-1#mathematical-description]].
-
-            As the entries of such a matrix are defined relative to the ''px'' unit,
-            if any <<length>>s in |func| involved in generating the matrix
-            are not [=compatible units=] with ''px'',
-            [=throw=] a {{TypeError}}.
+        1. Let |funcMatrix| be the {{DOMMatrix}} returned by
+            calling {{CSSTransformComponent/toMatrix()}} on |func|.
         2. Set |matrix| to the result of multiplying |matrix|
-            and |funcMatrix|.
-        3. If |func|’s {{CSSTransformComponent/is2D}} internal slot is `false`,
-            set |is2D| to `false`.
+            and the matrix represented by |funcMatrix|.
 
-    3. Return a new {{DOMMatrix}}
-        representing |matrix|,
-        and with its internal [=matrix/is 2D=] flag set to |is2D|.
+    3. Return |matrix|.
 </div>
 
 The <dfn attribute for=CSSTransformValue>length</dfn> attribute indicates how many transform components are contained within the {{CSSTransformValue}}.
@@ -2041,6 +2032,7 @@ The <dfn for=CSSTransformValue>indexed getter</dfn> retrieves the transform comp
     interface CSSTransformComponent {
         stringifier;
         attribute boolean is2D;
+        DOMMatrix toMatrix();
     };
 
     [Constructor(CSSNumericValue x, CSSNumericValue y, optional CSSNumericValue z)]
@@ -2121,6 +2113,32 @@ The <dfn for=CSSTransformValue>indexed getter</dfn> retrieves the transform comp
     but also prevents "accidentally" flipping a 2D transform into becoming 3D.
 </details>
 
+<div algorithm="CSSTransformComponent.toMatrix()">
+    The <dfn method for=CSSTransformComponent>toMatrix()</dfn> method of a {{CSSTransformComponent}} |this| must,
+    when called,
+    perform the following steps:
+
+    1. Let |matrix| be a new {{DOMMatrix}} object,
+        initialized to |this|’s equivalent 4x4 transform matrix,
+        as defined in [[css-transforms-1#mathematical-description]],
+        and with its {{DOMMatrixReadOnly/is2D}} internal slot
+        set to the same value as |this|'s {{CSSTransformComponent/is2D}} internal slot.
+        
+        Note: Recall that the {{CSSTransformComponent/is2D}} flag
+        affects what transform,
+        and thus what equivalent matrix,
+        a {{CSSTransformComponent}} represents.
+
+        As the entries of such a matrix are defined relative to the ''px'' unit,
+        if any <<length>>s in |this| involved in generating the matrix
+        are not [=compatible units=] with ''px''
+        (such as [=relative lengths=] or [=percentages=]),
+        [=throw=] a {{TypeError}}.
+
+    2. Return |matrix|.
+</div>
+
+
 <div algorithm="CSSTranslate()">
     The <dfn constructor for=CSSTranslate>CSSTranslate(|x|, |y|, |z|)</dfn> constructor must,
     when invoked,