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

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: Fix mistake in rebase 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 | « no previous file | third_party/WebKit/Source/core/animation/EffectInput.h » ('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');
23 var e2 = document.getElementById('e2');
24 var e3 = document.getElementById('e3');
25
26 var e1Style = getComputedStyle(e1);
27 var e2Style = getComputedStyle(e2);
28 var e3Style = getComputedStyle(e3);
29
30 var durationValue = 1; 19 var durationValue = 1;
31 20
21 var addAnimDiv = function() {
22 var element = document.createElement('div');
23 element.className = 'anim';
24 document.body.appendChild(element);
25 return element;
26 };
27
28 var assertEquivalentFramesSyntax = function(testParams) {
29 var e1 = addAnimDiv();
30 var e2 = addAnimDiv();
31 var e1Style = getComputedStyle(e1);
32 var e2Style = getComputedStyle(e2);
33 var options = { duration: testParams.duration, fill: "forwards" };
34 var player1 = e1.animate(testParams.listOfKeyframes, options);
35 var player2 = e2.animate(testParams.keyframeWithListOfValues, options);
36 player1.pause();
37 player2.pause();
38 for (var i = 0; i < testParams.expectationList.length; i++) {
39 var expected = testParams.expectationList[i];
40 player1.currentTime = expected.at;
41 player2.currentTime = expected.at;
42 for (var property in expected.is) {
43 assert_equals(e1Style.getPropertyValue(property), expected.is[proper ty]);
44 assert_equals(e2Style.getPropertyValue(property), expected.is[proper ty]);
45 }
46 }
47 };
48
32 test(function() { 49 test(function() {
33 var player = e1.animate([ 50 var element = addAnimDiv();
51 var elementStyle = getComputedStyle(element);
52 var player = element.animate([
34 {left: '10px', opacity: '1', offset: 0}, 53 {left: '10px', opacity: '1', offset: 0},
35 {left: '100px', opacity: '0', offset: 1} 54 {left: '100px', opacity: '0', offset: 1}
36 ], durationValue); 55 ], durationValue);
37 player.pause(); 56 player.pause();
38 player.currentTime = durationValue / 2; 57 player.currentTime = durationValue / 2;
39 assert_equals(e1Style.left, '55px'); 58 assert_equals(elementStyle.left, '55px');
40 assert_equals(e1Style.opacity, '0.5'); 59 assert_equals(elementStyle.opacity, '0.5');
41 }, 'Calling animate() should start an animation.'); 60 }, 'Calling animate() should start an animation.');
42 61
43 test(function() { 62 test(function() {
44 var player = e2.animate([ 63 assertEquivalentFramesSyntax({
64 listOfKeyframes: [
65 { left: '10px', opacity: '1' },
66 { left: '100px', opacity: '0' }
67 ],
68 keyframeWithListOfValues: {
69 left: ['10px', '100px'],
70 opacity: ['1', '0']
71 },
72 duration: durationValue,
73 expectationList: [
74 { at: 0, is: { left: '10px', opacity: '1' } },
75 { at: durationValue / 2, is: { left: '55px', opacity: '0.5' } },
76 { at: durationValue, is: { left: '100px', opacity: '0' } }
77 ]
78 });
79 }, 'Calling animate() with alternative list syntax should give same result.');
80
81 test(function() {
82 var element = addAnimDiv();
83 var elementStyle = getComputedStyle(element);
84 var player = element.animate([
45 {backgroundColor: 'green', offset: 0}, 85 {backgroundColor: 'green', offset: 0},
46 {backgroundColor: 'purple', offset: 1} 86 {backgroundColor: 'purple', offset: 1}
47 ], durationValue); 87 ], durationValue);
48 player.pause(); 88 player.pause();
49 player.currentTime = durationValue / 2; 89 player.currentTime = durationValue / 2;
50 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)'); 90 assert_equals(elementStyle.backgroundColor, 'rgb(64, 64, 64)');
51 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.'); 91 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');
52 92
53 test(function() { 93 test(function() {
54 var player = e1.animate([ 94 var element = addAnimDiv();
95 var elementStyle = getComputedStyle(element);
96 var player = element.animate([
55 {left: '10px', offset: '0'}, 97 {left: '10px', offset: '0'},
56 {left: '100px', offset: '1'} 98 {left: '100px', offset: '1'}
57 ], durationValue); 99 ], durationValue);
58 player.pause(); 100 player.pause();
59 player.currentTime = durationValue / 2; 101 player.currentTime = durationValue / 2;
60 assert_equals(e1Style.left, '55px'); 102 assert_equals(elementStyle.left, '55px');
61 }, 'Offsets may be specified as strings.'); 103 }, 'Offsets may be specified as strings.');
62 104
63 test(function() { 105 test(function() {
106 assertEquivalentFramesSyntax({
107 listOfKeyframes: [
108 { left: '0px', easing: 'steps(2, start)' },
109 { left: '100px', easing: 'steps(2, start)' },
110 { left: '300px' }
111 ],
112 keyframeWithListOfValues: {
113 left: [ '0px', '100px', '300px' ],
114 easing: 'steps(2, start)'
115 },
116 duration: durationValue,
117 expectationList: [
118 { at: 0, is: { left: '50px' } },
119 { at: durationValue / 4, is: { left: '100px' } },
120 { at: durationValue / 2, is: { left: '200px' } },
121 { at: 3 * durationValue / 4, is: { left: '300px' } }
122 ]
123 });
124 }, 'When using the alternative list syntax, all keyframes have the same timing f unction.');
125
126 test(function() {
127 assertEquivalentFramesSyntax({
128 listOfKeyframes: [
129 { left: '100px' }
130 ],
131 keyframeWithListOfValues: {
132 left: ['100px']
133 },
134 duration: durationValue,
135 expectationList: [
136 { at: 0, is: { left: '10px' } },
137 { at: durationValue / 2, is: { left: '55px' } },
138 { at: durationValue, is: { left: '100px' } }
139 ]
140 });
141 assertEquivalentFramesSyntax({
142 listOfKeyframes: [
143 { left: '100px' }
144 ],
145 keyframeWithListOfValues: {
146 left: '100px'
147 },
148 duration: durationValue,
149 expectationList: [
150 { at: 0, is: { left: '10px' } },
151 { at: durationValue / 2, is: { left: '55px' } },
152 { at: durationValue, is: { left: '100px' } }
153 ]
154 });
155 }, 'The list of keyframes can have one element.');
156
157 test(function() {
158 var element = addAnimDiv();
159 var keyframes = [
160 { left: ['10px', '100px'] },
161 { left: ['5px', '50px'] }
162 ];
163 assert_throws('InvalidModificationError', function() {element.animate(keyfra mes, durationValue); });
164 }, 'Should throw when mixing two different list syntaxes.');
165
166 test(function() {
167 var e1 = addAnimDiv();
168 var keyframe = {
169 left: ['10px', '100px'],
170 offset: '1'
171 };
172 assert_throws('InvalidModificationError', function() {e1.animate(keyframe, d urationValue); });
173
174 var e2 = addAnimDiv();
175 var keyframe = {
176 left: ['10px', '100px'],
177 composite: 'add'
178 };
179 assert_throws('InvalidModificationError', function() {e2.animate(keyframe, d urationValue); });
180 }, 'Should throw when offset or composite specified in the alternative list synt ax.');
181
182 test(function() {
183 var element = addAnimDiv();
64 var keyframes = [ 184 var keyframes = [
65 {opacity: '0.5', offset: 0.5}, 185 {opacity: '0.5', offset: 0.5},
66 {opacity: '0.9', offset: 1}, 186 {opacity: '0.9', offset: 1},
67 {opacity: '0', offset: 0} 187 {opacity: '0', offset: 0}
68 ]; 188 ];
69 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 189 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
70 }, 'Should throw when keyframes have unsorted offsets.'); 190 }, 'Should throw when keyframes have unsorted offsets.');
71 191
72 test(function() { 192 test(function() {
193 var element = addAnimDiv();
73 var keyframes = [ 194 var keyframes = [
74 {opacity: '1', offset: -1}, 195 {opacity: '1', offset: -1},
75 {opacity: '1', offset: NaN}, 196 {opacity: '1', offset: NaN},
76 {opacity: '1', offset: 2}, 197 {opacity: '1', offset: 2},
77 {opacity: '0.5', offset: 1}, 198 {opacity: '0.5', offset: 1},
78 {opacity: '0', offset: 0} 199 {opacity: '0', offset: 0}
79 ]; 200 ];
80 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 201 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
81 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].'); 202 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].');
82 203
83 test(function() { 204 test(function() {
205 var element = addAnimDiv();
84 var keyframes = [ 206 var keyframes = [
85 {opacity: '0.5'}, 207 {opacity: '0.5'},
86 {opacity: '1', offset: 1}, 208 {opacity: '1', offset: 1},
87 {opacity: '0', offset: 0} 209 {opacity: '0', offset: 0}
88 ]; 210 ];
89 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 211 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
90 }, 'Should throw when keyframes are not loosely sorted and any have no offset.') ; 212 }, 'Should throw when keyframes are not loosely sorted and any have no offset.') ;
91 213
92 test(function() { 214 test(function() {
215 var element = addAnimDiv();
93 var keyframes = [ 216 var keyframes = [
94 {opacity: '0.5', offset: null}, 217 {opacity: '0.5', offset: null},
95 {opacity: '1', offset: 1}, 218 {opacity: '1', offset: 1},
96 {opacity: '0', offset: 0} 219 {opacity: '0', offset: 0}
97 ]; 220 ];
98 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 221 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
99 }, 'Should throw when keyframes are not loosely sorted and any have null offset. '); 222 }, 'Should throw when keyframes are not loosely sorted and any have null offset. ');
100 223
101 var keyframesWithInvalid = [ 224 var keyframesWithInvalid = [
102 {width: '0px', backgroundColor: 'octarine', offset: 0}, 225 {width: '0px', backgroundColor: 'octarine', offset: 0},
103 {width: '1000px', foo: 'bar', offset: 1}]; 226 {width: '1000px', foo: 'bar', offset: 1}];
104 227
105 test(function() { 228 test(function() {
106 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill : 'forwards'}); 229 var element = addAnimDiv();
230 var elementStyle = getComputedStyle(element);
231 var player = element.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'});
107 player.pause(); 232 player.pause();
108 player.currentTime = durationValue; 233 player.currentTime = durationValue;
109 assert_equals(e3Style.width, '1000px'); 234 assert_equals(elementStyle.width, '1000px');
110 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); 235 assert_equals(elementStyle.backgroundColor, 'rgb(0, 0, 0)');
111 assert_equals(e3Style.foo, undefined); 236 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.'); 237 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');
238
113 </script> 239 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/animation/EffectInput.h » ('j') | third_party/WebKit/Source/core/animation/EffectInput.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698