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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: ManualTests/animation/compositor-animation-steps.html

Issue 800133004: Animation: Allow CC per-curve timing functions to be steps timing functions (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@0
Patch Set: Rebase Created 5 years, 11 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 | « ManualTests/animation/compositor-animation-cubic.html ('k') | Source/core/animation/CompositorAnimations.cpp » ('j') | public/platform/WebFilterAnimationCurve.h » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <style> 2 <style>
3 div { 3 div {
4 position: relative; 4 position: relative;
5 height: 100px; 5 height: 100px;
6 width: 100px; 6 width: 100px;
7 background: blue; 7 background: blue;
8 } 8 }
9 </style> 9 </style>
10 <body> 10 <body>
(...skipping 10 matching lines...) Expand all
21 <br> 21 <br>
22 <div id="test1a">MT</div> 22 <div id="test1a">MT</div>
23 <div id="test1b">CT</div> 23 <div id="test1b">CT</div>
24 <hr> 24 <hr>
25 25
26 Per-keyframe steps easing function 26 Per-keyframe steps easing function
27 <br> 27 <br>
28 <div id="test2a">MT</div> 28 <div id="test2a">MT</div>
29 <div id="test2b">CT</div> 29 <div id="test2b">CT</div>
30 30
31 Steps easing function combined with a cubic-bezier keyframe 31 Cubic-bezier easing function combined with a step keyframe
32 (FIXME: the combining of timing functions is not fully supported in CT) 32 (FIXME: the combining of timing functions is not fully supported in CT)
33 <br> 33 <br>
34 <div id="test3a">MT</div> 34 <div id="test3a">MT</div>
35 <div id="test3b">CT</div> 35 <div id="test3b">CT</div>
36 36
37 Steps easing function combined with a cubic-bezier keyframe
38 <br>
39 <div id="test4a">MT</div>
40 <div id="test4b">CT</div>
41
37 <script> 42 <script>
38 var transformKeyframes = [ 43 var transformKeyframes = [
39 {transform: 'translateX(0px)'}, 44 {transform: 'translateX(0px)'},
40 {transform: 'translateX(500px)'} 45 {transform: 'translateX(500px)'}
41 ]; 46 ];
42 var leftKeyframes = [ 47 var leftKeyframes = [
43 {left: '0'}, 48 {left: '0'},
44 {left: '500px'} 49 {left: '500px'}
45 ]; 50 ];
46 var player1a = test1a.animate(leftKeyframes, { 51 var player1a = test1a.animate(leftKeyframes, {
(...skipping 19 matching lines...) Expand all
66 ]; 71 ];
67 var player2a = test2a.animate(leftKeyframesEasing, { 72 var player2a = test2a.animate(leftKeyframesEasing, {
68 duration: 6000, 73 duration: 6000,
69 iterations: Infinity 74 iterations: Infinity
70 }); 75 });
71 var player2b = test2b.animate(transformKeyframesEasing, { 76 var player2b = test2b.animate(transformKeyframesEasing, {
72 duration: 6000, 77 duration: 6000,
73 iterations: Infinity 78 iterations: Infinity
74 }); 79 });
75 80
76 var transformKeyframesCombinedEasing = [ 81 var transformKeyframesWithStepsKeyframe = [
82 {transform: 'translateX(0px)', easing: 'steps(9)'},
83 {transform: 'translateX(500px)'}
84 ];
85 var leftKeyframesWithStepsKeyframe = [
86 {left: '0', easing: 'steps(9)'},
87 {left: '500px'}
88 ];
89 var player3a = test3a.animate(leftKeyframesWithStepsKeyframe, {
90 duration: 6000,
91 iterations: Infinity,
92 easing: 'cubic-bezier(.5, -1, .5, 2)'
93 });
94 var player3b = test3b.animate(transformKeyframesWithStepsKeyframe, {
95 duration: 6000,
96 iterations: Infinity,
97 easing: 'cubic-bezier(.5, -1, .5, 2)'
98 });
99
100 var transformKeyframesWithCubicKeyframe = [
77 {transform: 'translateX(0px)', easing: 'cubic-bezier(.5, -1, .5, 2)'}, 101 {transform: 'translateX(0px)', easing: 'cubic-bezier(.5, -1, .5, 2)'},
78 {transform: 'translateX(500px)'} 102 {transform: 'translateX(500px)'}
79 ]; 103 ];
80 var leftKeyframesCombinedEasing = [ 104 var leftKeyframesWithCubicKeyframe = [
81 {left: '0', easing: 'cubic-bezier(.5, -1, .5, 2)'}, 105 {left: '0', easing: 'cubic-bezier(.5, -1, .5, 2)'},
82 {left: '500px'} 106 {left: '500px'}
83 ]; 107 ];
84 var player3a = test3a.animate(leftKeyframesCombinedEasing, { 108 var player4a = test4a.animate(leftKeyframesWithCubicKeyframe, {
85 duration: 6000, 109 duration: 6000,
86 iterations: Infinity, 110 iterations: Infinity,
87 easing: 'steps(9)' 111 easing: 'steps(9)'
88 }); 112 });
89 var player3b = test3b.animate(transformKeyframesCombinedEasing, { 113 var player4b = test4b.animate(transformKeyframesWithCubicKeyframe, {
90 duration: 6000, 114 duration: 6000,
91 iterations: Infinity, 115 iterations: Infinity,
92 easing: 'steps(9)' 116 easing: 'steps(9)'
93 }); 117 });
94 </script> 118 </script>
95 </body> 119 </body>
96 </html> 120 </html>
OLDNEW
« no previous file with comments | « ManualTests/animation/compositor-animation-cubic.html ('k') | Source/core/animation/CompositorAnimations.cpp » ('j') | public/platform/WebFilterAnimationCurve.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698