[css-typed-om] Return transform components for computed transform.

ComputedStylePropertyMap should return computed values. For 'transform',
that's "as specified, but relative lengths converted to absolute" [1].
This means we need to return the individual transform components like
'translate3d'.

Currently there's no code to do this, so we have to roll our own.

[1] https://drafts.csswg.org/css-transforms-1/#propdef-transform

Bug: 816803
Change-Id: I64305512fa0d0ce32ba86ea2b14595b551ff1c8d
Reviewed-on: https://chromium-review.googlesource.com/938885
Reviewed-by: Kentaro Hara <haraken@chromium.org>
Commit-Queue: Darren Shen <shend@chromium.org>
Cr-Commit-Position: refs/heads/master@{#539783}
diff --git a/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js b/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
index b4ed1e7..8d4f2ce 100644
--- a/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
+++ b/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
@@ -149,13 +149,52 @@
     description: 'a transform',
     examples: [
       {
-        description: 'a transform containing only a translate',
+        description: 'a transform containing percents',
+        input: new CSSTransformValue([
+          new CSSTranslate(
+            new CSSUnitValue(50, 'percent'),
+            new CSSUnitValue(50, 'percent'),
+          )
+        ]),
+      },
+      {
+        description: 'a transform containing relative values',
+        input: new CSSTransformValue([
+          new CSSPerspective(new CSSUnitValue(10, 'em'))
+        ]),
+        defaultComputed: (_, result) => {
+          // Relative units compute to absolute.
+          assert_class_string(result, 'CSSTransformValue',
+            'Result must be a CSSTransformValue');
+          assert_class_string(result[0], 'CSSPerspective',
+            'First component must be a CSSTransformValue');
+          assert_is_unit('px', result[0].length);
+        }
+      },
+      {
+        description: 'a transform containing all the transform components',
         input: new CSSTransformValue([
           new CSSTranslate(
             new CSSUnitValue(0, 'px'),
             new CSSUnitValue(1, 'px'),
             new CSSUnitValue(2, 'px'),
-          )
+          ),
+          new CSSTranslate(
+            new CSSUnitValue(0, 'px'),
+            new CSSUnitValue(1, 'px'),
+          ),
+          new CSSRotate(1, 2, 3, new CSSUnitValue(45, 'deg')),
+          new CSSRotate(new CSSUnitValue(45, 'deg')),
+          new CSSScale(1, 2, 3),
+          new CSSScale(1, 2),
+          new CSSSkew(new CSSUnitValue(1, 'deg'), new CSSUnitValue(1, 'deg')),
+          new CSSSkewX(new CSSUnitValue(1, 'deg')),
+          new CSSSkewY(new CSSUnitValue(45, 'deg')),
+          new CSSPerspective(new CSSUnitValue(1, 'px')),
+          new CSSMatrixComponent(new DOMMatrixReadOnly(
+            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16])
+          ),
+          new CSSMatrixComponent(new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6])),
         ]),
       }
     ],