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

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: Fill in error message strings 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.h » ('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;
alancutter (OOO until 2018) 2016/02/24 08:50:02 Why not inline this if it never changes? It's comm
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 This was in the original code. I'd prefer to err o
alancutter (OOO until 2018) 2016/02/25 06:52:27 Looking back at when it was added it was because t
suzyh_UTC10 (ex-contributor) 2016/02/26 04:35:30 Oh, I see. Removed.
31 20
21 var addAnimDiv = function() {
22 var target = document.createElement('div');
23 target.className = 'anim';
24 document.body.appendChild(target);
25 return target;
alancutter (OOO until 2018) 2016/02/24 08:50:02 It's strange to see the name target used here and
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 Done.
26 };
27
28 var assertEquivalentFramesSyntax = function(listOfKeyframes, keyframeWithListOfV alues, durationArg, expectationList) {
alancutter (OOO until 2018) 2016/02/24 08:50:02 Javascript style nit: Consider using destructuring
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 Done. I get a syntax error when trying to use var
alancutter (OOO until 2018) 2016/02/25 06:52:27 Strange, I don't get a syntax error when I change
29 var e1 = addAnimDiv();
30 var e2 = addAnimDiv();
31 var e1Style = getComputedStyle(e1);
32 var e2Style = getComputedStyle(e2);
33 var options = { duration: durationArg, fill: "forwards" };
alancutter (OOO until 2018) 2016/02/24 08:50:02 No need for fill forwards if you never seek past 1
suzyh_UTC10 (ex-contributor) 2016/02/25 02:42:35 The tests fail if I seek to 1, not just past 1. Do
alancutter (OOO until 2018) 2016/02/25 06:52:27 Ah my bad, fill forwards is needed for t=1 you're
34 var player1 = e1.animate(listOfKeyframes, options);
35 var player2 = e2.animate(keyframeWithListOfValues, options);
36 player1.pause();
37 player2.pause();
38 for (var i = 0; i < expectationList.length; i++) {
39 var expected = 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 var listOfKeyframes = [
64 { left: '10px', opacity: '1' },
65 { left: '100px', opacity: '0' }
66 ];
67 var keyframeWithListOfValues = {
68 left: ['10px', '100px'],
69 opacity: ['1', '0']
70 };
71 assertEquivalentFramesSyntax(
72 listOfKeyframes,
73 keyframeWithListOfValues,
74 durationValue,
75 [ { at: 0, is: { left: '10px', opacity: '1' } },
76 { at: durationValue / 2, is: { left: '55px', opacity: '0.5' } },
77 { at: durationValue, is: { left: '100px', opacity: '0' } } ]
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 var listOfKeyframes = [
107 { left: '0px', easing: 'steps(2, start)' },
108 { left: '100px', easing: 'steps(2, start)' },
109 { left: '300px' }
110 ];
111 var keyframeWithListOfValues = {
112 left: [ '0px', '100px', '300px' ],
113 easing: 'steps(2, start)'
114 };
115 assertEquivalentFramesSyntax(
116 listOfKeyframes,
117 keyframeWithListOfValues,
118 durationValue,
119 [ { at: 0, is: { left: '50px' } },
120 { at: durationValue / 4, is: { left: '100px' } },
121 { at: durationValue / 2, is: { left: '200px' } },
122 { at: 3 * durationValue / 4, is: { left: '300px' } } ]
123 );
124 }, 'When using the alternative list syntax, all keyframes have the same timing f unction.');
125
126 test(function() {
127 var listOfKeyframes = [
128 { left: '100px' }
129 ];
130 var keyframeWithListOfValues = {
131 left: ['100px']
132 };
133 var keyframeWithOneValue = {
134 left: '100px'
135 };
136 assertEquivalentFramesSyntax(
137 listOfKeyframes,
138 keyframeWithListOfValues,
139 durationValue,
140 [ { at: 0, is: { left: '10px' } },
141 { at: durationValue / 2, is: { left: '55px' } },
142 { at: durationValue, is: { left: '100px' } } ]
143 );
144 assertEquivalentFramesSyntax(
145 listOfKeyframes,
146 keyframeWithOneValue,
147 durationValue,
148 [ { at: 0, is: { left: '10px' } },
149 { at: durationValue / 2, is: { left: '55px' } },
150 { at: durationValue, is: { left: '100px' } } ]
151 );
152 }, 'The list of keyframes can have one element.');
153
154 test(function() {
155 var element = addAnimDiv();
156 var keyframes = [
157 { left: ['10px', '100px'] },
158 { left: ['5px', '50px'] }
159 ];
160 assert_throws('InvalidModificationError', function() {element.animate(keyfra mes, durationValue); });
161 }, 'Should throw when mixing two different list syntaxes.');
162
163 test(function() {
164 var element = addAnimDiv();
64 var keyframes = [ 165 var keyframes = [
65 {opacity: '0.5', offset: 0.5}, 166 {opacity: '0.5', offset: 0.5},
66 {opacity: '0.9', offset: 1}, 167 {opacity: '0.9', offset: 1},
67 {opacity: '0', offset: 0} 168 {opacity: '0', offset: 0}
68 ]; 169 ];
69 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 170 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
70 }, 'Should throw when keyframes have unsorted offsets.'); 171 }, 'Should throw when keyframes have unsorted offsets.');
71 172
72 test(function() { 173 test(function() {
174 var element = addAnimDiv();
73 var keyframes = [ 175 var keyframes = [
74 {opacity: '1', offset: -1}, 176 {opacity: '1', offset: -1},
75 {opacity: '1', offset: NaN}, 177 {opacity: '1', offset: NaN},
76 {opacity: '1', offset: 2}, 178 {opacity: '1', offset: 2},
77 {opacity: '0.5', offset: 1}, 179 {opacity: '0.5', offset: 1},
78 {opacity: '0', offset: 0} 180 {opacity: '0', offset: 0}
79 ]; 181 ];
80 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 182 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
81 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].'); 183 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].');
82 184
83 test(function() { 185 test(function() {
186 var element = addAnimDiv();
84 var keyframes = [ 187 var keyframes = [
85 {opacity: '0.5'}, 188 {opacity: '0.5'},
86 {opacity: '1', offset: 1}, 189 {opacity: '1', offset: 1},
87 {opacity: '0', offset: 0} 190 {opacity: '0', offset: 0}
88 ]; 191 ];
89 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 192 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
90 }, 'Should throw when keyframes are not loosely sorted and any have no offset.') ; 193 }, 'Should throw when keyframes are not loosely sorted and any have no offset.') ;
91 194
92 test(function() { 195 test(function() {
196 var element = addAnimDiv();
93 var keyframes = [ 197 var keyframes = [
94 {opacity: '0.5', offset: null}, 198 {opacity: '0.5', offset: null},
95 {opacity: '1', offset: 1}, 199 {opacity: '1', offset: 1},
96 {opacity: '0', offset: 0} 200 {opacity: '0', offset: 0}
97 ]; 201 ];
98 assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); }); 202 assert_throws('InvalidModificationError', function() { element.animate(keyfr ames, durationValue); });
99 }, 'Should throw when keyframes are not loosely sorted and any have null offset. '); 203 }, 'Should throw when keyframes are not loosely sorted and any have null offset. ');
100 204
101 var keyframesWithInvalid = [ 205 var keyframesWithInvalid = [
102 {width: '0px', backgroundColor: 'octarine', offset: 0}, 206 {width: '0px', backgroundColor: 'octarine', offset: 0},
103 {width: '1000px', foo: 'bar', offset: 1}]; 207 {width: '1000px', foo: 'bar', offset: 1}];
104 208
105 test(function() { 209 test(function() {
106 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill : 'forwards'}); 210 var element = addAnimDiv();
211 var elementStyle = getComputedStyle(element);
212 var player = element.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'});
107 player.pause(); 213 player.pause();
108 player.currentTime = durationValue; 214 player.currentTime = durationValue;
109 assert_equals(e3Style.width, '1000px'); 215 assert_equals(elementStyle.width, '1000px');
110 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); 216 assert_equals(elementStyle.backgroundColor, 'rgb(0, 0, 0)');
111 assert_equals(e3Style.foo, undefined); 217 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.'); 218 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');
113 </script> 219 </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.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698