Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(843)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/typedcssom/cssTranslation.html

Issue 2961243002: [CSS Typed OM] Implement FromCSSValue and AsMatrix for CSSTranslation (Closed)
Patch Set: fix test Created 3 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/transform.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/typedcssom/cssTranslation.html
diff --git a/third_party/WebKit/LayoutTests/typedcssom/cssTranslation.html b/third_party/WebKit/LayoutTests/typedcssom/cssTranslation.html
index 5d8fe067c998c1a8115e0003f1e9eda0e2d0ab38..3148b2561d881ea96bfe950a11fabbd0762f9f3a 100644
--- a/third_party/WebKit/LayoutTests/typedcssom/cssTranslation.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/cssTranslation.html
@@ -1,50 +1,47 @@
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
+<script src="resources/comparisons.js"></script>
<script>
-
-var zeroLength = new CSSUnitValue(0, "px");
-var decimalLength = new CSSUnitValue(1.1, "px");
-var negativeLength = new CSSUnitValue(-2.2, "em");
-var tenPercent = new CSSUnitValue(10, "percent");
+let EPSILON = 1e-6;
var testParams = [
// 2D translations
{
- input: new CSSTranslation(zeroLength, zeroLength),
- x: zeroLength, y: zeroLength,
+ input: new CSSTranslation(CSS.px(0), CSS.px(0)),
+ x: CSS.px(0), y: CSS.px(0),
is2D: true,
cssText: "translate(0px, 0px)"
},
{
- input: new CSSTranslation(decimalLength, negativeLength),
- x: decimalLength, y: negativeLength,
+ input: new CSSTranslation(CSS.px(1.1), CSS.em(-2.2)),
+ x: CSS.px(1.1), y: CSS.em(-2.2),
is2D: true,
cssText: "translate(1.1px, -2.2em)"
},
{
- input: new CSSTranslation(tenPercent, zeroLength),
- x: tenPercent, y: zeroLength,
+ input: new CSSTranslation(CSS.percent(10), CSS.px(0)),
+ x: CSS.percent(10), y: CSS.px(0),
is2D: true,
cssText: "translate(10%, 0px)"
},
// 3D translations
{
- input: new CSSTranslation(zeroLength, zeroLength, zeroLength),
- x: zeroLength, y: zeroLength, z: zeroLength,
+ input: new CSSTranslation(CSS.px(0), CSS.px(0), CSS.px(0)),
+ x: CSS.px(0), y: CSS.px(0), z: CSS.px(0),
is2D: false,
cssText: "translate3d(0px, 0px, 0px)"
},
{
- input: new CSSTranslation(zeroLength, decimalLength, negativeLength),
- x: zeroLength, y: decimalLength, z: negativeLength,
+ input: new CSSTranslation(CSS.px(0), CSS.px(1.1), CSS.em(-2.2)),
+ x: CSS.px(0), y: CSS.px(1.1), z: CSS.em(-2.2),
is2D: false,
cssText: "translate3d(0px, 1.1px, -2.2em)"
},
{
- input: new CSSTranslation(tenPercent, decimalLength, zeroLength),
- x: tenPercent, y: decimalLength, z: zeroLength,
+ input: new CSSTranslation(CSS.percent(10), CSS.px(1.1), CSS.px(0)),
+ x: CSS.percent(10), y: CSS.px(1.1), z: CSS.px(0),
is2D: false,
cssText: "translate3d(10%, 1.1px, 0px)"
},
@@ -52,12 +49,15 @@ var testParams = [
for (let params of testParams) {
test(() => {
- assert_equals(params.input.x, params.x);
- assert_equals(params.input.y, params.y);
+ assert_equals(params.input.x.value, params.x.value);
+ assert_equals(params.input.x.unit, params.x.unit);
+ assert_equals(params.input.y.value, params.y.value);
+ assert_equals(params.input.y.unit, params.y.unit);
if (params.is2D) {
assert_equals(params.input.z.value, 0);
} else {
- assert_equals(params.input.z, params.z);
+ assert_equals(params.input.z.value, params.z.value);
+ assert_equals(params.input.z.unit, params.z.unit);
}
}, "x, y, and z values are correct for " + params.cssText);
@@ -83,7 +83,7 @@ test(() => {
let translation3d = new CSSTranslation(
new CSSUnitValue(30, 'percent'),
new CSSUnitValue(40, 'percent'),
- zeroLength);
+ CSS.px(0));
assert_equals(translation3d.x.value, 30);
assert_equals(translation3d.x.unit, 'percent');
assert_equals(translation3d.y.value, 40);
@@ -93,34 +93,34 @@ test(() => {
test(() => {
assert_throws(new TypeError(), () => {
- new CSSTranslation(new CSSUnitValue(10, 'deg'), zeroLength);
+ new CSSTranslation(new CSSUnitValue(10, 'deg'), CSS.px(0));
});
assert_throws(new TypeError(), () => {
- new CSSTranslation(zeroLength, new CSSUnitValue(10, 'deg'));
+ new CSSTranslation(CSS.px(0), new CSSUnitValue(10, 'deg'));
});
assert_throws(new TypeError(), () => {
- new CSSTranslation(new CSSUnitValue(10, 'deg'), zeroLength, zeroLength);
+ new CSSTranslation(new CSSUnitValue(10, 'deg'), CSS.px(0), CSS.px(0));
});
assert_throws(new TypeError(), () => {
- new CSSTranslation(zeroLength, new CSSUnitValue(10, 'deg'), zeroLength);
+ new CSSTranslation(CSS.px(0), new CSSUnitValue(10, 'deg'), CSS.px(0));
});
assert_throws(new TypeError(), () => {
- new CSSTranslation(zeroLength, zeroLength, new CSSUnitValue(10, 'deg'));
+ new CSSTranslation(CSS.px(0), CSS.px(0), new CSSUnitValue(10, 'deg'));
});
}, "Constructor throws when invalid numeric values are given to each argument");
test(() => {
assert_throws(new TypeError(), () => {
- new CSSTranslation(zeroLength, zeroLength, tenPercent);
+ new CSSTranslation(CSS.px(0), CSS.px(0), CSS.percent(10));
});
assert_throws(new TypeError(), () => {
- new CSSTranslation(tenPercent, tenPercent, tenPercent);
+ new CSSTranslation(CSS.percent(10), CSS.percent(10), CSS.percent(10));
});
}, "Constructor throws when z argument contains percent.");
test(() => {
assert_throws(new TypeError(), () => { new CSSTranslation(); });
- assert_throws(new TypeError(), () => { new CSSTranslation(zeroLength); });
+ assert_throws(new TypeError(), () => { new CSSTranslation(CSS.px(0)); });
}, "Invalid number of arguments to constructor throws an exception.");
for (let attribute of ["x", "y"]) {
@@ -160,20 +160,27 @@ for (let attribute of ["x", "y", "z"]) {
}
test(() => {
- let validLength = new CSSUnitValue(5, 'px');
- let translation = new CSSTranslation(validLength, validLength, validLength);
-
- assert_equals(translation.z.value, 5);
- assert_equals(translation.z.unit, 'px');
- translation.z = null;
- assert_equals(translation.z, null);
-}, "z can be set to null");
-
-test(() => {
- let translation = new CSSTranslation(zeroLength, zeroLength);
+ let translation = new CSSTranslation(CSS.px(0), CSS.px(0));
assert_throws(new TypeError(), () => {
translation.z = new CSSUnitValue(30, 'percent');
});
}, "Setting z throws for length containing percentage");
+test(() => {
+ let expectedMatrix = (new DOMMatrixReadOnly()).translate(1, 2, 3);
+ let transformValue = new CSSTransformValue(
+ [new CSSTranslation(CSS.px(1), CSS.px(2), CSS.px(3))]);
+ assert_matrix_approx_equals(
+ transformValue.toMatrix(), expectedMatrix, EPSILON);
+}, "toMatrix when used in a CSSTransformValue produces correct matrix");
+
+test(() => {
+ let expectedMatrix = new DOMMatrixReadOnly();
+ let transformValue = new CSSTransformValue(
+ [new CSSTranslation(CSS.em(1), CSS.px(2), CSS.px(3))]);
+ assert_matrix_approx_equals(
+ transformValue.toMatrix(), expectedMatrix, EPSILON);
+}, "toMatrix is the identity (instead of crashing) when relative lengths " +
+ "are used");
+
</script>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/transform.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698