Skip to content

GitLab

T
tangled
Commit 32264d85 authored by Darren Shen's avatar Darren Shen Committed by Commit Bot
Browse files
Options

[css-typed-om] Add transform normalization tests. 

Spec: https://drafts.css-houdini.org/css-typed-om-1/#transformvalue-normalization

We currently fail tests because we haven't implement normalization of
'matrix()' and 'matrix3d()' yet.

Bug: 788570
Change-Id: I0a8b02db6ecbdc863c117663e519548a8aa9957e
Reviewed-on: https://chromium-review.googlesource.com/833427
Commit-Queue: Darren Shen <shend@chromium.org>
Reviewed-by: default avatarnainar <nainar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#525233}
parent 3f500118
Hide whitespace changes
Inline Side-by-side
Showing with 226 additions and 0 deletions
third_party/WebKit/LayoutTests/typedcssom/resources/testhelper.js
View file @ 32264d85
......@@ -33,6 +33,29 @@ function assert_style_value_equals(a, b) {
assert_equals(a.variable, b.variable);
assert_style_value_equals(a.fallback, b.fallback);
break;
case 'CSSTransformValue':
assert_style_value_array_equals(a, b);
break;
case 'CSSRotation':
assert_style_value_equals(a.angle, b.angle);
// fallthrough
case 'CSSTranslation':
case 'CSSScale':
assert_style_value_equals(a.x, b.x);
assert_style_value_equals(a.y, b.y);
assert_style_value_equals(a.z, b.z);
assert_style_value_equals(a.is2D, b.is2D);
break;
case 'CSSSkew':
assert_style_value_equals(a.ax, b.ax);
assert_style_value_equals(a.ay, b.ay);
break;
case 'CSSPerspective':
assert_style_value_equals(a.length, b.length);
break;
case 'CSSMatrixComponent':
assert_matrix_approx_equals(a.matrix, b.matrix, 1e-6);
break;
default:
assert_equals(a, b);
break;
......
third_party/WebKit/LayoutTests/typedcssom/stylevalue-normalization/transformvalue-normalization-expected.txt 0 → 100644
View file @ 32264d85
This is a testharness.js-based test.
FAIL Normalizing a matrix() returns a CSSMatrixComponent assert_equals: expected "CSSTransformValue" but got "CSSStyleValue"
FAIL Normalizing a matrix3d() returns a CSSMatrixComponent assert_equals: expected "CSSTransformValue" but got "CSSStyleValue"
PASS Normalizing a translate() with X returns a CSSTranslation
PASS Normalizing a translate() with X and Y returns a CSSTranslation
PASS Normalizing a translateX() returns a CSSTranslation
PASS Normalizing a translateY() returns a CSSTranslation
PASS Normalizing a translate3d() returns a CSSTranslation
PASS Normalizing a translateZ() returns a CSSTranslation
PASS Normalizing a scale() with one argument returns a CSSScale
PASS Normalizing a scale() with two arguments returns a CSSScale
PASS Normalizing a scaleX() returns a CSSScale
PASS Normalizing a scaleY() returns a CSSScale
PASS Normalizing a scale3d() returns a CSSScale
PASS Normalizing a scaleZ() returns a CSSScale
PASS Normalizing a rotate() returns a CSSRotation
PASS Normalizing a rotate3d() returns a CSSRotation
PASS Normalizing a rotateX() returns a CSSRotation
PASS Normalizing a rotateY() returns a CSSRotation
PASS Normalizing a rotateZ() returns a CSSRotation
PASS Normalizing a skew() with only X returns a CSSSkew
PASS Normalizing a skew() with X and Y returns a CSSSkew
PASS Normalizing a skewX() returns a CSSSkew
PASS Normalizing a skewY() returns a CSSSkew
PASS Normalizing a perspective() returns a CSSPerspective
PASS Normalizing a <transform-list> returns a CSSTransformValue containing all the transforms
PASS Normalizing transforms with calc values contains CSSMathValues
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/typedcssom/stylevalue-normalization/transformvalue-normalization.html 0 → 100644
View file @ 32264d85
<!doctype html>
<meta charset="utf-8">
<title>Transform normalization tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#transformvalue-normalization">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/comparisons.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';
function test_transform_normalization(cssText, expected) {
assert_style_value_equals(CSSStyleValue.parse('transform', cssText), expected);
assert_style_value_equals(
newDivWithStyle('transform: ' + cssText).attributeStyleMap.get('transform'),
expected);
}
test(() => {
test_transform_normalization('matrix(1, 2, 3, 4, 5, 6)',
new CSSTransformValue([
new CSSMatrixComponent(new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6]))
]));
}, 'Normalizing a matrix() returns a CSSMatrixComponent');
test(() => {
test_transform_normalization(
'matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)',
new CSSTransformValue([
new CSSMatrixComponent(new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]))
]));
}, 'Normalizing a matrix3d() returns a CSSMatrixComponent');
const gTestCases = [
{
cssText: 'translate(1px)',
expected: new CSSTranslation(CSS.px(1), CSS.px(0)),
desc: 'translate() with X'
},
{
cssText: 'translate(1%, 1px)',
expected: new CSSTranslation(CSS.percent(1), CSS.px(1)),
desc: 'translate() with X and Y'
},
{
cssText: 'translateX(1%)',
expected: new CSSTranslation(CSS.percent(1), CSS.px(0)),
desc: 'translateX()'
},
{
cssText: 'translateY(1px)',
expected: new CSSTranslation(CSS.px(0), CSS.px(1)),
desc: 'translateY()'
},
{
cssText: 'translate3d(1px, 2%, 3px)',
expected: new CSSTranslation(CSS.px(1), CSS.percent(2), CSS.px(3)),
desc: 'translate3d()'
},
{
cssText: 'translateZ(1px)',
expected: new CSSTranslation(CSS.px(0), CSS.px(0), CSS.px(1)),
desc: 'translateZ()'
},
{
cssText: 'scale(2)',
expected: new CSSScale(CSS.number(2), CSS.number(2)),
desc: 'scale() with one argument'
},
{
cssText: 'scale(2, 3)',
expected: new CSSScale(CSS.number(2), CSS.number(3)),
desc: 'scale() with two arguments'
},
{
cssText: 'scaleX(2)',
expected: new CSSScale(CSS.number(2), CSS.number(1)),
desc: 'scaleX()'
},
{
cssText: 'scaleY(2)',
expected: new CSSScale(CSS.number(1), CSS.number(2)),
desc: 'scaleY()'
},
{
cssText: 'scale3d(1, 2, 3)',
expected: new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3)),
desc: 'scale3d()'
},
{
cssText: 'scaleZ(2)',
expected: new CSSScale(CSS.number(1), CSS.number(1), CSS.number(2)),
desc: 'scaleZ()'
},
{
cssText: 'rotate(90deg)',
expected: new CSSRotation(CSS.deg(90)),
desc: 'rotate()'
},
{
cssText: 'rotate3d(1, 2, 3, 90deg)',
expected: new CSSRotation(CSS.number(1), CSS.number(2), CSS.number(3), CSS.deg(90)),
desc: 'rotate3d()'
},
{
cssText: 'rotateX(90deg)',
expected: new CSSRotation(CSS.number(1), CSS.number(0), CSS.number(0), CSS.deg(90)),
desc: 'rotateX()'
},
{
cssText: 'rotateY(90deg)',
expected: new CSSRotation(CSS.number(0), CSS.number(1), CSS.number(0), CSS.deg(90)),
desc: 'rotateY()'
},
{
cssText: 'rotateZ(90deg)',
expected: new CSSRotation(CSS.number(0), CSS.number(0), CSS.number(1), CSS.deg(90)),
desc: 'rotateZ()'
},
{
cssText: 'skew(90deg)',
expected: new CSSSkew(CSS.deg(90), CSS.deg(0)),
desc: 'skew() with only X'
},
{
cssText: 'skew(90deg, 45deg)',
expected: new CSSSkew(CSS.deg(90), CSS.deg(45)),
desc: 'skew() with X and Y'
},
{
cssText: 'skewX(90deg)',
expected: new CSSSkew(CSS.deg(90), CSS.deg(0)),
desc: 'skewX()'
},
{
cssText: 'skewY(90deg)',
expected: new CSSSkew(CSS.deg(0), CSS.deg(90)),
desc: 'skewY()'
},
{
cssText: 'perspective(1px)',
expected: new CSSPerspective(CSS.px(1)),
desc: 'perspective()'
},
];
for (const {cssText, expected, desc} of gTestCases) {
test(() => {
test_transform_normalization(cssText, new CSSTransformValue([expected]));
}, 'Normalizing a ' + desc + ' returns a ' + expected.constructor.name);
}
test(() => {
test_transform_normalization(
'translate(1px) rotateX(90deg) perspective(1px) skew(90deg) scale3d(1, 2, 3)',
new CSSTransformValue([
new CSSTranslation(CSS.px(1), CSS.px(0)),
new CSSRotation(CSS.number(1), CSS.number(0), CSS.number(0), CSS.deg(90)),
new CSSPerspective(CSS.px(1)),
new CSSSkew(CSS.deg(90), CSS.deg(0)),
new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3)),
]));
}, 'Normalizing a <transform-list> returns a CSSTransformValue containing all the transforms');
test(() => {
test_transform_normalization(
'translate(calc(1px + 1em)) perspective(calc(1px + 1em))',
new CSSTransformValue([
new CSSTranslation(new CSSMathSum(CSS.px(1), CSS.em(1)), CSS.px(0)),
new CSSPerspective(new CSSMathSum(CSS.px(1), CSS.em(1))),
]));
}, 'Normalizing transforms with calc values contains CSSMathValues');
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment