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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html

Issue 1720403002: Alternative syntax for element.animate list of keyframes (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@animations-keyframeeffect-api
Patch Set: Change to error types and how offset/composite are handled, plus minor fixes Created 4 years, 10 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 | « third_party/WebKit/LayoutTests/animations/keyword-composition-crash.html ('k') | third_party/WebKit/LayoutTests/web-animations-api/keyframe-exceptions.html » ('j') | third_party/WebKit/Source/core/animation/EffectInput.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../resources/testharness.js"></script> 2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script> 3 <script src="../resources/testharnessreport.js"></script>
4 4
5 <style> 5 <style>
6 .anim { 6 .anim {
7 position: absolute; 7 position: absolute;
8 left: 10px; 8 left: 10px;
9 height: 90px; 9 height: 90px;
10 width: 100px; 10 width: 100px;
11 background-color: black; 11 background-color: black;
12 } 12 }
13 </style> 13 </style>
14 14
15 <body> 15 <body>
16 <div id='e1' class='anim'></div>
17 <div id='e2' class='anim'></div>
18 <div id='e3' class='anim'></div>
19 </body> 16 </body>
20 17
21 <script> 18 <script>
22 var e1 = document.getElementById('e1'); 19 var addAnimDiv = function() {
23 var e2 = document.getElementById('e2'); 20 var element = document.createElement('div');
24 var e3 = document.getElementById('e3'); 21 element.className = 'anim';
22 document.body.appendChild(element);
23 return element;
24 };
25 25
26 var e1Style = getComputedStyle(e1); 26 var assertEquivalentFramesSyntax = function(testParams) {
27 var e2Style = getComputedStyle(e2); 27 var e1 = addAnimDiv();
28 var e3Style = getComputedStyle(e3); 28 var e2 = addAnimDiv();
29 29 var e1Style = getComputedStyle(e1);
30 var durationValue = 1; 30 var e2Style = getComputedStyle(e2);
31 var options = { duration: testParams.duration, fill: "forwards" };
32 var player1 = e1.animate(testParams.listOfKeyframes, options);
33 var player2 = e2.animate(testParams.keyframeWithListOfValues, options);
34 player1.pause();
35 player2.pause();
36 for (var i = 0; i < testParams.expectationList.length; i++) {
37 var expected = testParams.expectationList[i];
38 player1.currentTime = expected.at;
39 player2.currentTime = expected.at;
40 for (var property in expected.is) {
41 assert_equals(e1Style.getPropertyValue(property), expected.is[proper ty]);
42 assert_equals(e2Style.getPropertyValue(property), expected.is[proper ty]);
43 }
44 }
45 };
31 46
32 test(function() { 47 test(function() {
33 var player = e1.animate([ 48 var element = addAnimDiv();
49 var elementStyle = getComputedStyle(element);
50 var player = element.animate([
34 {left: '10px', opacity: '1', offset: 0}, 51 {left: '10px', opacity: '1', offset: 0},
35 {left: '100px', opacity: '0', offset: 1} 52 {left: '100px', opacity: '0', offset: 1}
36 ], durationValue); 53 ], 1);
37 player.pause(); 54 player.pause();
38 player.currentTime = durationValue / 2; 55 player.currentTime = 0.5;
39 assert_equals(e1Style.left, '55px'); 56 assert_equals(elementStyle.left, '55px');
40 assert_equals(e1Style.opacity, '0.5'); 57 assert_equals(elementStyle.opacity, '0.5');
41 }, 'Calling animate() should start an animation.'); 58 }, 'Calling animate() should start an animation.');
42 59
43 test(function() { 60 test(function() {
44 var player = e2.animate([ 61 assertEquivalentFramesSyntax({
62 listOfKeyframes: [
63 { left: '10px', opacity: '1' },
64 { left: '100px', opacity: '0' },
65 { left: '150px', opacity: '1' }
66 ],
67 keyframeWithListOfValues: {
68 left: ['10px', '100px', '150px'],
69 opacity: ['1', '0', '1']
70 },
71 duration: 1,
72 expectationList: [
73 { at: 0, is: { left: '10px', opacity: '1' } },
74 { at: 0.25, is: { left: '55px', opacity: '0.5' } },
75 { at: 0.5, is: { left: '100px', opacity: '0' } },
76 { at: 0.75, is: { left: '125px', opacity: '0.5' } },
77 { at: 1, is: { left: '150px', opacity: '1' } }
alancutter (OOO until 2018) 2016/02/28 22:47:35 We should maintain a consistent style within the s
suzyh_UTC10 (ex-contributor) 2016/02/29 00:59:46 Done.
78 ]
79 });
80 }, 'Calling animate() with alternative list syntax should give same result.');
81
82 test(function() {
83 var element = addAnimDiv();
84 var elementStyle = getComputedStyle(element);
85 var player = element.animate([
45 {backgroundColor: 'green', offset: 0}, 86 {backgroundColor: 'green', offset: 0},
46 {backgroundColor: 'purple', offset: 1} 87 {backgroundColor: 'purple', offset: 1}
47 ], durationValue); 88 ], 1);
48 player.pause(); 89 player.pause();
49 player.currentTime = durationValue / 2; 90 player.currentTime = 0.5;
50 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)'); 91 assert_equals(elementStyle.backgroundColor, 'rgb(64, 64, 64)');
51 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.'); 92 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');
52 93
53 test(function() { 94 test(function() {
54 var player = e1.animate([ 95 var element = addAnimDiv();
96 var elementStyle = getComputedStyle(element);
97 var player = element.animate([
55 {left: '10px', offset: '0'}, 98 {left: '10px', offset: '0'},
56 {left: '100px', offset: '1'} 99 {left: '100px', offset: '1'}
57 ], durationValue); 100 ], 1);
58 player.pause(); 101 player.pause();
59 player.currentTime = durationValue / 2; 102 player.currentTime = 0.5;
60 assert_equals(e1Style.left, '55px'); 103 assert_equals(elementStyle.left, '55px');
61 }, 'Offsets may be specified as strings.'); 104 }, 'Offsets may be specified as strings.');
62 105
63 test(function() { 106 test(function() {
107 assertEquivalentFramesSyntax({
108 listOfKeyframes: [
109 { left: '0px', easing: 'steps(2, start)' },
110 { left: '100px', easing: 'steps(2, start)' },
111 { left: '300px' }
112 ],
113 keyframeWithListOfValues: {
114 left: [ '0px', '100px', '300px' ],
115 easing: 'steps(2, start)'
116 },
117 duration: 1,
118 expectationList: [
119 { at: 0, is: { left: '50px' } },
120 { at: 0.25, is: { left: '100px' } },
121 { at: 0.5, is: { left: '200px' } },
122 { at: 0.75, is: { left: '300px' } }
123 ]
124 });
125 }, 'When using the alternative list syntax, all keyframes have the same timing f unction.');
126
127 test(function() {
128 assertEquivalentFramesSyntax({
129 listOfKeyframes: [
130 { left: '100px' }
131 ],
132 keyframeWithListOfValues: {
133 left: ['100px']
134 },
135 duration: 1,
136 expectationList: [
137 { at: 0, is: { left: '10px' } },
138 { at: 0.5, is: { left: '55px' } },
139 { at: 1, is: { left: '100px' } }
140 ]
141 });
142 assertEquivalentFramesSyntax({
143 listOfKeyframes: [
144 { left: '100px' }
145 ],
146 keyframeWithListOfValues: {
147 left: '100px'
148 },
149 duration: 1,
150 expectationList: [
151 { at: 0, is: { left: '10px' } },
152 { at: 0.5, is: { left: '55px' } },
153 { at: 1, is: { left: '100px' } }
154 ]
155 });
156 }, 'The list of keyframes can have one element.');
157
158 test(function() {
159 var element = addAnimDiv();
160 var keyframes = [
161 { left: ['10px', '100px'] },
162 { left: ['5px', '50px'] }
163 ];
164 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1 ); });
165 }, 'Should throw when mixing two different list syntaxes.');
166
167 test(function() {
168 var element = addAnimDiv();
64 var keyframes = [ 169 var keyframes = [
65 {opacity: '0.5', offset: 0.5}, 170 {opacity: '0.5', offset: 0.5},
66 {opacity: '0.9', offset: 1}, 171 {opacity: '0.9', offset: 1},
67 {opacity: '0', offset: 0} 172 {opacity: '0', offset: 0}
68 ]; 173 ];
69 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 174 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1 ); });
70 }, 'Should throw when keyframes have unsorted offsets.'); 175 }, 'Should throw when keyframes have unsorted offsets.');
71 176
72 test(function() { 177 test(function() {
178 var element = addAnimDiv();
73 var keyframes = [ 179 var keyframes = [
74 {opacity: '1', offset: -1}, 180 {opacity: '1', offset: -1},
75 {opacity: '1', offset: NaN}, 181 {opacity: '1', offset: NaN},
76 {opacity: '1', offset: 2}, 182 {opacity: '1', offset: 2},
77 {opacity: '0.5', offset: 1}, 183 {opacity: '0.5', offset: 1},
78 {opacity: '0', offset: 0} 184 {opacity: '0', offset: 0}
79 ]; 185 ];
80 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 186 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1 ); });
81 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].'); 187 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].');
82 188
83 test(function() { 189 test(function() {
190 var element = addAnimDiv();
84 var keyframes = [ 191 var keyframes = [
85 {opacity: '0.5'}, 192 {opacity: '0.5'},
86 {opacity: '1', offset: 1}, 193 {opacity: '1', offset: 1},
87 {opacity: '0', offset: 0} 194 {opacity: '0', offset: 0}
88 ]; 195 ];
89 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 196 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1 ); });
90 }, 'Should throw when keyframes are not loosely sorted and any have no offset.') ; 197 }, 'Should throw when keyframes are not loosely sorted and any have no offset.') ;
91 198
92 test(function() { 199 test(function() {
200 var element = addAnimDiv();
93 var keyframes = [ 201 var keyframes = [
94 {opacity: '0.5', offset: null}, 202 {opacity: '0.5', offset: null},
95 {opacity: '1', offset: 1}, 203 {opacity: '1', offset: 1},
96 {opacity: '0', offset: 0} 204 {opacity: '0', offset: 0}
97 ]; 205 ];
98 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 206 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1 ); });
99 }, 'Should throw when keyframes are not loosely sorted and any have null offset. '); 207 }, 'Should throw when keyframes are not loosely sorted and any have null offset. ');
100 208
101 var keyframesWithInvalid = [ 209 var keyframesWithInvalid = [
102 {width: '0px', backgroundColor: 'octarine', offset: 0}, 210 {width: '0px', backgroundColor: 'octarine', offset: 0},
103 {width: '1000px', foo: 'bar', offset: 1}]; 211 {width: '1000px', foo: 'bar', offset: 1}];
104 212
105 test(function() { 213 test(function() {
106 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill : 'forwards'}); 214 var element = addAnimDiv();
215 var elementStyle = getComputedStyle(element);
216 var player = element.animate(keyframesWithInvalid, {duration: 1, fill: 'forw ards'});
107 player.pause(); 217 player.pause();
108 player.currentTime = durationValue; 218 player.currentTime = 1;
109 assert_equals(e3Style.width, '1000px'); 219 assert_equals(elementStyle.width, '1000px');
110 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); 220 assert_equals(elementStyle.backgroundColor, 'rgb(0, 0, 0)');
111 assert_equals(e3Style.foo, undefined); 221 assert_equals(elementStyle.foo, undefined);
112 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.'); 222 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');
223
113 </script> 224 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/keyword-composition-crash.html ('k') | third_party/WebKit/LayoutTests/web-animations-api/keyframe-exceptions.html » ('j') | third_party/WebKit/Source/core/animation/EffectInput.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698