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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <meta charset="UTF-8">
3 <body>
4 <script src="../interpolation/resources/interpolation-test.js"></script>
5 <script>
6 assertComposition({
7 property: 'transform',
8 underlying: 'translate(10px, 20px)',
9 addFrom: 'translate(100px, 200px)',
10 addTo: 'translate(200px, 400px)',
11 }, [
12 {at: -0.5, is: 'translate(60px, 120px)'},
13 {at: 0, is: 'translate(110px, 220px)'},
14 {at: 0.25, is: 'translate(135px, 270px)'},
15 {at: 0.5, is: 'translate(160px, 320px)'},
16 {at: 0.75, is: 'translate(185px, 370px)'},
17 {at: 1, is: 'translate(210px, 420px)'},
18 {at: 1.5, is: 'translate(260px, 520px)'},
19 ]);
20
21 assertComposition({
22 property: 'transform',
23 underlying: 'translate(10px, 20px)',
24 addFrom: 'translate(100px, 200px)',
25 replaceTo: 'translate(210px, 420px)',
26 }, [
27 {at: -0.5, is: 'translate(60px, 120px)'},
28 {at: 0, is: 'translate(110px, 220px)'},
29 {at: 0.25, is: 'translate(135px, 270px)'},
30 {at: 0.5, is: 'translate(160px, 320px)'},
31 {at: 0.75, is: 'translate(185px, 370px)'},
32 {at: 1, is: 'translate(210px, 420px)'},
33 {at: 1.5, is: 'translate(260px, 520px)'},
34 ]);
35
36 assertComposition({
37 property: 'transform',
38 underlying: 'rotateX(45deg)',
39 addFrom: 'rotateY(-100deg)',
40 addTo: 'rotateY(100deg)',
41 }, [
42 {at: -0.5, is: 'rotateX(45deg) rotateY(-200deg)'},
43 {at: 0, is: 'rotateX(45deg) rotateY(-100deg)'},
44 {at: 0.25, is: 'rotateX(45deg) rotateY(-50deg)'},
45 {at: 0.5, is: 'rotateX(45deg) rotateY(0deg)'},
46 {at: 0.75, is: 'rotateX(45deg) rotateY(50deg)'},
47 {at: 1, is: 'rotateX(45deg) rotateY(100deg)'},
48 {at: 1.5, is: 'rotateX(45deg) rotateY(200deg)'},
49 ]);
50
51 assertComposition({
52 property: 'transform',
53 underlying: 'rotateX(100deg) rotateY(100deg)',
54 addFrom: 'translate(10px, 20px)',
55 replaceTo: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)',
56 }, [
57 {at: -0.5, is: 'rotateX(50deg) rotateY(50deg) translate(-40px, -80px)'},
58 {at: 0, is: 'rotateX(100deg) rotateY(100deg) translate(10px, 20px)'},
59 {at: 0.25, is: 'rotateX(125deg) rotateY(125deg) translate(35px, 70px)'},
60 {at: 0.5, is: 'rotateX(150deg) rotateY(150deg) translate(60px, 120px)'},
61 {at: 0.75, is: 'rotateX(175deg) rotateY(175deg) translate(85px, 170px)'},
62 {at: 1, is: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)'},
63 {at: 1.5, is: 'rotateX(250deg) rotateY(250deg) translate(160px, 320px)'},
64 ]);
65
66 assertComposition({
67 property: 'transform',
68 underlying: 'rotateX(45deg)',
69 addFrom: 'rotateY(0deg)',
70 addTo: 'rotateY(360deg)',
71 }, [
72 {at: -0.5, is: 'rotateX(45deg) rotateY(-180deg)'},
73 {at: 0, is: 'rotateX(45deg) rotateY(0deg)'},
74 {at: 0.25, is: 'rotateX(45deg) rotateY(90deg)'},
75 {at: 0.5, is: 'rotateX(45deg) rotateY(180deg)'},
76 {at: 0.75, is: 'rotateX(45deg) rotateY(270deg)'},
77 {at: 1, is: 'rotateX(45deg) rotateY(360deg)'},
78 {at: 1.5, is: 'rotateX(45deg) rotateY(540deg)'},
79 ]);
80
81 // Matrix decomposition cases
82 assertComposition({
83 property: 'transform',
84 underlying: 'rotateX(90deg)',
85 addFrom: 'translate(100px, 100px)',
86 addTo: 'scale(2)',
87 }, [
88 {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)'},
89 {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)'},
90 {at: 0.25, is: 'matrix3d(1.25, 0, 0, 0, 0, 2.77556e-16, 1.25, 0, 0, -1, 2.2204 5e-16, 0, 75, 4.59243e-15, 75, 1)'},
91 {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)'},
92 {at: 0.75, is: 'matrix3d(1.75, 0, 0, 0, 0, 3.88578e-16, 1.75, 0, 0, -1, 2.2204 5e-16, 0, 25, 1.53081e-15, 25, 1)'},
93 {at: 1, is: 'matrix3d(2, 0, 0, 0, 0, 1.22465e-16, 2, 0, 0, -1, 6.12323e-17, 0, 0, 0, 0, 1)'},
94 {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)'},
95 ]);
96
97 assertComposition({
98 property: 'transform',
99 underlying: 'rotateX(45deg)',
100 addFrom: 'none',
101 addTo: 'rotateY(360deg)',
102 }, [
103 {at: -0.5, is: 'rotateX(45deg)'},
104 {at: 0, is: 'rotateX(45deg)'},
105 {at: 0.25, is: 'rotateX(45deg)'},
106 {at: 0.5, is: 'rotateX(45deg)'},
107 {at: 0.75, is: 'rotateX(45deg)'},
108 {at: 1, is: 'rotateX(45deg)'},
109 {at: 1.5, is: 'rotateX(45deg)'},
110 ]);
111 </script>
112 </body>
OLDNEW
« 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