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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/animations/composition/transform-composition.html

Issue 1866333002: Support additive animations on CSS property transform (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Review changes Created 4 years, 8 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/animations/interpolation/resources/interpolation-test.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/animations/composition/transform-composition.html
diff --git a/third_party/WebKit/LayoutTests/animations/composition/transform-composition.html b/third_party/WebKit/LayoutTests/animations/composition/transform-composition.html
new file mode 100644
index 0000000000000000000000000000000000000000..008c077b48b1888dcaf64ba4359c9367c7c4c1c8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/composition/transform-composition.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<body>
+<script src="../interpolation/resources/interpolation-test.js"></script>
+<script>
+assertComposition({
+ property: 'transform',
+ underlying: 'translate(10px, 20px)',
+ addFrom: 'translate(100px, 200px)',
+ addTo: 'translate(200px, 400px)',
+}, [
+ {at: -0.5, is: 'translate(60px, 120px)'},
+ {at: 0, is: 'translate(110px, 220px)'},
+ {at: 0.25, is: 'translate(135px, 270px)'},
+ {at: 0.5, is: 'translate(160px, 320px)'},
+ {at: 0.75, is: 'translate(185px, 370px)'},
+ {at: 1, is: 'translate(210px, 420px)'},
+ {at: 1.5, is: 'translate(260px, 520px)'},
+]);
+
+assertComposition({
+ property: 'transform',
+ underlying: 'translate(10px, 20px)',
+ addFrom: 'translate(100px, 200px)',
+ replaceTo: 'translate(210px, 420px)',
+}, [
+ {at: -0.5, is: 'translate(60px, 120px)'},
+ {at: 0, is: 'translate(110px, 220px)'},
+ {at: 0.25, is: 'translate(135px, 270px)'},
+ {at: 0.5, is: 'translate(160px, 320px)'},
+ {at: 0.75, is: 'translate(185px, 370px)'},
+ {at: 1, is: 'translate(210px, 420px)'},
+ {at: 1.5, is: 'translate(260px, 520px)'},
+]);
+
+assertComposition({
+ property: 'transform',
+ underlying: 'rotateX(45deg)',
+ addFrom: 'rotateY(-100deg)',
+ addTo: 'rotateY(100deg)',
+}, [
+ {at: -0.5, is: 'rotateX(45deg) rotateY(-200deg)'},
+ {at: 0, is: 'rotateX(45deg) rotateY(-100deg)'},
+ {at: 0.25, is: 'rotateX(45deg) rotateY(-50deg)'},
+ {at: 0.5, is: 'rotateX(45deg) rotateY(0deg)'},
+ {at: 0.75, is: 'rotateX(45deg) rotateY(50deg)'},
+ {at: 1, is: 'rotateX(45deg) rotateY(100deg)'},
+ {at: 1.5, is: 'rotateX(45deg) rotateY(200deg)'},
+]);
+
+assertComposition({
+ property: 'transform',
+ underlying: 'rotateX(100deg) rotateY(100deg)',
+ addFrom: 'translate(10px, 20px)',
+ replaceTo: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)',
+}, [
+ {at: -0.5, is: 'rotateX(50deg) rotateY(50deg) translate(-40px, -80px)'},
+ {at: 0, is: 'rotateX(100deg) rotateY(100deg) translate(10px, 20px)'},
+ {at: 0.25, is: 'rotateX(125deg) rotateY(125deg) translate(35px, 70px)'},
+ {at: 0.5, is: 'rotateX(150deg) rotateY(150deg) translate(60px, 120px)'},
+ {at: 0.75, is: 'rotateX(175deg) rotateY(175deg) translate(85px, 170px)'},
+ {at: 1, is: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)'},
+ {at: 1.5, is: 'rotateX(250deg) rotateY(250deg) translate(160px, 320px)'},
+]);
+
+assertComposition({
+ property: 'transform',
+ underlying: 'rotateX(45deg)',
+ addFrom: 'rotateY(0deg)',
+ addTo: 'rotateY(360deg)',
+}, [
+ {at: -0.5, is: 'rotateX(45deg) rotateY(-180deg)'},
+ {at: 0, is: 'rotateX(45deg) rotateY(0deg)'},
+ {at: 0.25, is: 'rotateX(45deg) rotateY(90deg)'},
+ {at: 0.5, is: 'rotateX(45deg) rotateY(180deg)'},
+ {at: 0.75, is: 'rotateX(45deg) rotateY(270deg)'},
+ {at: 1, is: 'rotateX(45deg) rotateY(360deg)'},
+ {at: 1.5, is: 'rotateX(45deg) rotateY(540deg)'},
+]);
+
+// Matrix decomposition cases
+assertComposition({
+ property: 'transform',
+ underlying: 'rotateX(90deg)',
+ addFrom: 'translate(100px, 100px)',
+ addTo: 'scale(2)',
+}, [
+ {at: -0.5, is: 'matrix3d(0.5, 0, 0, 0, 0, 1.11022e-16, 0.5, 0, 0, -1, 2.22045e-16, 0, 150, 9.18485e-15, 150, 1)'},
+ {at: 0, is: 'matrix3d(1, 0, 0, 0, 0, 6.12323e-17, 1, 0, 0, -1, 6.12323e-17, 0, 100, 6.12323e-15, 100, 1)'},
+ {at: 0.25, is: 'matrix3d(1.25, 0, 0, 0, 0, 2.77556e-16, 1.25, 0, 0, -1, 2.22045e-16, 0, 75, 4.59243e-15, 75, 1)'},
+ {at: 0.5, is: 'matrix3d(1.5, 0, 0, 0, 0, 3.33067e-16, 1.5, 0, 0, -1, 2.22045e-16, 0, 50, 3.06162e-15, 50, 1)'},
+ {at: 0.75, is: 'matrix3d(1.75, 0, 0, 0, 0, 3.88578e-16, 1.75, 0, 0, -1, 2.22045e-16, 0, 25, 1.53081e-15, 25, 1)'},
+ {at: 1, is: 'matrix3d(2, 0, 0, 0, 0, 1.22465e-16, 2, 0, 0, -1, 6.12323e-17, 0, 0, 0, 0, 1)'},
+ {at: 1.5, is: 'matrix3d(2.5, 0, 0, 0, 0, 5.55112e-16, 2.5, 0, 0, -1, 2.22045e-16, 0, -50, -3.06162e-15, -50, 1)'},
+]);
+
+assertComposition({
+ property: 'transform',
+ underlying: 'rotateX(45deg)',
+ addFrom: 'none',
+ addTo: 'rotateY(360deg)',
+}, [
+ {at: -0.5, is: 'rotateX(45deg)'},
+ {at: 0, is: 'rotateX(45deg)'},
+ {at: 0.25, is: 'rotateX(45deg)'},
+ {at: 0.5, is: 'rotateX(45deg)'},
+ {at: 0.75, is: 'rotateX(45deg)'},
+ {at: 1, is: 'rotateX(45deg)'},
+ {at: 1.5, is: 'rotateX(45deg)'},
+]);
+</script>
+</body>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/animations/interpolation/resources/interpolation-test.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698