Index: third_party/WebKit/LayoutTests/animations/composition/translate-composition.html |
diff --git a/third_party/WebKit/LayoutTests/animations/composition/translate-composition.html b/third_party/WebKit/LayoutTests/animations/composition/translate-composition.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..828728019a6e9a685229b473ce1b43e3c9fab6f2 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/animations/composition/translate-composition.html |
@@ -0,0 +1,53 @@ |
+<!DOCTYPE html> |
+<body> |
+<style> |
+.target { |
+ width: 100px; |
+ height: 100px; |
+} |
+</style> |
+<script src="../interpolation/resources/interpolation-test.js"></script> |
+<script> |
+assertComposition({ |
+ property: 'translate', |
+ underlying: '100px 200px 300px', |
+ addFrom: '-50px 50%', |
+ addTo: '100%', |
+}, [ |
+ {at: -1, is: '-100px 300px 300px'}, |
+ {at: 0, is: '50px 250px 300px'}, |
+ {at: 0.25, is: '87.5px 237.5px 300px'}, |
+ {at: 0.75, is: '162.5px 212.5px 300px'}, |
+ {at: 1, is: '200px 200px 300px'}, |
+ {at: 2, is: '350px 150px 300px'}, |
+]); |
+ |
+assertComposition({ |
+ property: 'translate', |
+ underlying: '100px 200px 300px', |
+ addFrom: '50% 100px', |
+ replaceTo: '200px 50% 100px', |
+}, [ |
+ {at: -1, is: '100px 550px 500px'}, |
+ {at: 0, is: '150px 300px 300px'}, |
+ {at: 0.25, is: '162.5px 237.5px 250px'}, |
+ {at: 0.75, is: '187.5px 112.5px 150px'}, |
+ {at: 1, is: '200px 50px 100px'}, |
+ {at: 2, is: '250px -200px -100px'}, |
+]); |
+ |
+assertComposition({ |
+ property: 'translate', |
+ underlying: '100px 200px 300px', |
+ replaceFrom: '50% 100px', |
+ addTo: '200px 50% 100px', |
+}, [ |
+ {at: -1, is: '-200px -50px -400px'}, |
+ {at: 0, is: '50px 100px'}, |
+ {at: 0.25, is: '112.5px 137.5px 100px'}, |
+ {at: 0.75, is: '237.5px 212.5px 300px'}, |
+ {at: 1, is: '300px 250px 400px'}, |
+ {at: 2, is: '550px 400px 800px'}, |
+]); |
+</script> |
+</body> |