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

Unified Diff: polymer_0.5.0/bower_components/web-animations-js/test/js/transform-handler.js

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 12 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
Index: polymer_0.5.0/bower_components/web-animations-js/test/js/transform-handler.js
diff --git a/polymer_0.5.0/bower_components/web-animations-js/test/js/transform-handler.js b/polymer_0.5.0/bower_components/web-animations-js/test/js/transform-handler.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69dbe2a8f7c6962d48612925b02dba20b4e9572
--- /dev/null
+++ b/polymer_0.5.0/bower_components/web-animations-js/test/js/transform-handler.js
@@ -0,0 +1,171 @@
+suite('transform-handler parsing', function() {
+ test('parse skew values', function() {
+ assert.deepEqual(parseTransform('skew(10deg) skew(12deg,45deg) skewX(0) skewY(1.5rad)'), [
+ {t: 'skew', d: [{deg: 10}, {deg: 0}]},
+ {t: 'skew', d: [{deg: 12}, {deg: 45}]},
+ {t: 'skewx', d: [{deg: 0}]},
+ {t: 'skewy', d: [{rad: 1.5}]}
+ ]);
+ });
+
+ test('parse scale values', function() {
+ assert.deepEqual(parseTransform('scale(-2) scale(3,-4) scaleX(5) scaleY(-1) scaleZ(-3)'), [
+ {t: 'scale', d: [-2, -2]},
+ {t: 'scale', d: [3, -4]},
+ {t: 'scalex', d: [5]},
+ {t: 'scaley', d: [-1]},
+ {t: 'scalez', d: [-3]}
+ ]);
+ assert.deepEqual(parseTransform('scale3d(-2, 0, 7)'),
+ [{t: 'scale3d', d: [-2, 0, 7]}]);
+ });
+
+ test('parse rotate values', function() {
+ assert.deepEqual(parseTransform('rotate(10deg) rotateX(0) rotateY(1.5rad) rotateZ(50grad)'), [
+ {t: 'rotate', d: [{deg: 10}]},
+ {t: 'rotatex', d: [{deg: 0}]},
+ {t: 'rotatey', d: [{rad: 1.5}]},
+ {t: 'rotatez', d: [{grad: 50}]}
+ ]);
+ });
+
+ test('parse translate values', function() {
+ assert.deepEqual(parseTransform('translate(20%, 30px) translate(30em, 40%) translate(50vw) translate(0)'), [
+ {t: 'translate', d: [{'%': 20}, {px: 30}]},
+ {t: 'translate', d: [{em: 30}, {'%': 40}]},
+ {t: 'translate', d: [{vw: 50}, {px: 0}]},
+ {t: 'translate', d: [{px: 0}, {px: 0}]}
+ ]);
+ assert.deepEqual(parseTransform('translateX(10px) translateX(20%) translateX(0)'), [
+ {t: 'translatex', d: [{px: 10}]},
+ {t: 'translatex', d: [{'%': 20}]},
+ {t: 'translatex', d: [{px: 0}]}
+ ]);
+ assert.deepEqual(parseTransform('translateY(10px) translateY(20%) translateY(0)'), [
+ {t: 'translatey', d: [{px: 10}]},
+ {t: 'translatey', d: [{'%': 20}]},
+ {t: 'translatey', d: [{px: 0}]}
+ ]);
+ assert.deepEqual(parseTransform('translateZ(10px) translateZ(0)'), [
+ {t: 'translatez', d: [{px: 10}]},
+ {t: 'translatez', d: [{px: 0}]}
+ ]);
+ assert.deepEqual(parseTransform('translate3d(10px, 20px, 30px) translate3d(0, 40%, 0) translate3d(50%, 0, 60px)'), [
+ {t: 'translate3d', d: [{px: 10}, {px: 20}, {px: 30}]},
+ {t: 'translate3d', d: [{px: 0}, {'%': 40}, {px: 0}]},
+ {t: 'translate3d', d: [{'%': 50}, {px: 0}, {px: 60}]}
+ ]);
+ });
+
+ test('invalid transforms fail to parse', function() {
+ assert.isUndefined(parseTransform('translate(10px'));
+ assert.isUndefined(parseTransform('translate()'));
+ assert.isUndefined(parseTransform('translatex()'));
+ assert.isUndefined(parseTransform('translatex(5)'));
+ assert.isUndefined(parseTransform('rotate(5)'));
+ assert.isUndefined(parseTransform('skew(5)'));
+ assert.isUndefined(parseTransform('scale(5px)'));
+ assert.isUndefined(parseTransform('rotatex(5px)'));
+ });
+});
+
+suite('transform-handler interpolation', function() {
+ test('simple transform interpolations', function() {
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'translateX(10px)',
+ 'translateX(20px)')(0.2),
+ 'translatex(12px)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'translate(10px, 10px) rotate(20deg)',
+ 'translate(20px, 20px) rotate(90deg)')(0.2),
+ 'translate(12px,12px) rotate(34deg)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'translate(10px, 10em) rotate(20deg)',
+ 'translate(20em, 20px) rotate(90deg)')(0.5),
+ 'translate(calc(5px + 10em),calc(5em + 10px)) rotate(55deg)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'rotateY(1000deg)',
+ 'rotateY(3000deg)')(0.4),
+ 'rotatey(1800deg)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'scale(6)',
+ 'scale(1,-4)')(0.2),
+ 'scale(5,4)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'skewX(5deg) translateY(5px)',
+ 'skewX(-35deg) translateY(45px)')(0.25),
+ 'skewx(-5deg) translatey(15px)');
+ });
+
+ test('transform interpolations with conversion to primitives', function() {
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'translateX(10px)',
+ 'translate(20px, 10px)')(0.2),
+ 'translate(12px,2px)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'translateX(10px)',
+ 'translateY(10px)')(0.2),
+ 'translate(8px,2px)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'translateX(10px)',
+ 'translateZ(10px)')(0.2),
+ 'translate3d(8px,0px,2px)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'scaleX(6)',
+ 'scale(1,6)')(0.2),
+ 'scale(5,2)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'skew(10deg)',
+ 'skewY(30deg)')(0.2),
+ 'skew(8deg,6deg)');
+ });
+
+ test('transform interpolations with none', function() {
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'none',
+ 'scale(5) translateX(100px) rotate(1000deg)')(0.25),
+ 'scale(2,2) translatex(25px) rotate(250deg)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'scale(5) translateX(100px) rotate(1000deg)',
+ 'none')(0.75),
+ 'scale(2,2) translatex(25px) rotate(250deg)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'none',
+ 'scaleX(5) skewY(100grad)')(0.25),
+ 'scalex(2) skewy(25grad)');
+ assert.equal(
+ webAnimationsMinifill.propertyInterpolation(
+ 'transform',
+ 'none',
+ 'none')(0.4),
+ 'none');
+ });
+});

Powered by Google App Engine
This is Rietveld 408576698