[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])),
]),
}
],