| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 Copyright 2013 Google Inc. All Rights Reserved. |
| 3 |
| 4 Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 you may not use this file except in compliance with the License. |
| 6 You may obtain a copy of the License at |
| 7 |
| 8 http://www.apache.org/licenses/LICENSE-2.0 |
| 9 |
| 10 Unless required by applicable law or agreed to in writing, software |
| 11 distributed under the License is distributed on an "AS IS" BASIS, |
| 12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 See the License for the specific language governing permissions and |
| 14 limitations under the License. |
| 15 --> |
| 16 |
| 17 <!DOCTYPE html><meta charset="UTF-8"> |
| 18 <style> |
| 19 div.anim { |
| 20 left: 100px; |
| 21 top: 200px; |
| 22 } |
| 23 </style> |
| 24 |
| 25 <div id="elem"></div> |
| 26 |
| 27 <div id="anim0" class="anim"></div> |
| 28 <div id="anim1" class="anim"></div> |
| 29 <div id="anim2" class="anim"></div> |
| 30 <div id="anim3" class="anim"></div> |
| 31 <div id="anim4" class="anim"></div> |
| 32 <div id="anim5" class="anim"></div> |
| 33 <div id="anim6" class="anim"></div> |
| 34 <div id="anim7" class="anim"></div> |
| 35 <div id="anim8" class="anim"></div> |
| 36 <div id="anim9" class="anim"></div> |
| 37 <div id="anim10" class="anim"></div> |
| 38 <div id="anim11" class="anim"></div> |
| 39 |
| 40 <script src="../bootstrap.js"></script> |
| 41 <script> |
| 42 "use strict"; |
| 43 |
| 44 var keyframes = [{left: "200px"}, {left: "300px"}]; |
| 45 |
| 46 test(function() { |
| 47 assert_true(new Animation(document.getElementById("elem"), keyframes).effect |
| 48 instanceof KeyframeEffect); |
| 49 }, "Animation.effect should be an instance of KeyframeEffect when " + |
| 50 "created with a keyframe dictionary"); |
| 51 |
| 52 test(function() { |
| 53 assert_equals(new KeyframeEffect(keyframes).accumulate, "none"); |
| 54 }, "KeyframeEffect.accumulate should default to 'none'"); |
| 55 |
| 56 test(function() { |
| 57 var effect = new KeyframeEffect(keyframes); |
| 58 effect.accumulate = "foo"; |
| 59 assert_equals(effect.accumulate, "none"); |
| 60 effect.accumulate = 42; |
| 61 assert_equals(effect.accumulate, "none"); |
| 62 effect.accumulate = "sum"; |
| 63 assert_equals(effect.accumulate, "sum"); |
| 64 }, "KeyframeEffect.accumulate should only accept valid values"); |
| 65 |
| 66 timing_test(function() { |
| 67 var animation = new Animation(document.getElementById("anim0"), keyframes, |
| 68 {duration: 1.0, iterations: 2.0}); |
| 69 document.timeline.play(animation); |
| 70 at(1.5, function() { |
| 71 assert_styles("#anim0", {left: "250px"}); |
| 72 animation.effect.accumulate = "sum"; |
| 73 assert_styles("#anim0", {left: "550px"}); |
| 74 }); |
| 75 }, "Setting KeyframeEffect.accumulate should cause immediate update"); |
| 76 |
| 77 test(function() { |
| 78 assert_equals(new KeyframeEffect(keyframes).composite, "replace"); |
| 79 }, "KeyframeEffect.composite should default to 'replace'"); |
| 80 |
| 81 test(function() { |
| 82 var effect = new KeyframeEffect(keyframes); |
| 83 effect.composite = "foo"; |
| 84 assert_equals(effect.composite, "replace"); |
| 85 effect.composite = 42; |
| 86 assert_equals(effect.composite, "replace"); |
| 87 effect.composite = "add"; |
| 88 assert_equals(effect.composite, "add"); |
| 89 }, "KeyframeEffect.composite should only accept valid values"); |
| 90 |
| 91 timing_test(function() { |
| 92 var animation = new Animation(document.getElementById("anim1"), keyframes, 1); |
| 93 document.timeline.play(animation); |
| 94 at(0.5, function() { |
| 95 assert_styles("#anim1", {left: "250px"}); |
| 96 animation.effect.composite = "add"; |
| 97 assert_styles("#anim1", {left: "350px"}); |
| 98 }); |
| 99 }, "Setting KeyframeEffect.composite should cause immediate update"); |
| 100 |
| 101 test(function() { |
| 102 var frames = new KeyframeEffect( |
| 103 [{left: "100px"}, {top: "200px"}]).getFrames(); |
| 104 assert_equals(frames.length, 2); |
| 105 assert_equals(frames[0].left, "100px"); |
| 106 assert_equals(frames[1].top, "200px"); |
| 107 }, "KeyframeEffect.getFrames() should return the specified keyframes"); |
| 108 |
| 109 test(function() { |
| 110 var frames = new KeyframeEffect({left: "100px"}).getFrames(); |
| 111 assert_equals(frames.length, 1); |
| 112 assert_equals(frames[0].left, "100px"); |
| 113 }, "KeyframeEffect should handle a single keyframe"); |
| 114 |
| 115 test(function() { |
| 116 var frames = new KeyframeEffect({}).getFrames(); |
| 117 assert_equals(frames.length, 1); |
| 118 assert_equals(typeof frames[0], "object"); |
| 119 }, "KeyframeEffect should handle an empty keyframe"); |
| 120 |
| 121 test(function() { |
| 122 var frames = new KeyframeEffect().getFrames(); |
| 123 assert_equals(frames.length, 1); |
| 124 assert_equals(typeof frames[0], "object"); |
| 125 }, "KeyframeEffect should handle no input for keyframe dictionary"); |
| 126 |
| 127 test(function() { |
| 128 var frames = new KeyframeEffect(42).getFrames(); |
| 129 assert_equals(frames.length, 1); |
| 130 assert_equals(typeof frames[0], "object"); |
| 131 }, "KeyframeEffect should handle non-objects for keyframe dictionary"); |
| 132 |
| 133 test(function() { |
| 134 assert_false( |
| 135 new KeyframeEffect(keyframes).getFrames() === keyframes); |
| 136 }, "KeyframeEffect.getFrames() should not return the original " + |
| 137 "keyframe dictionary"); |
| 138 |
| 139 test(function() { |
| 140 var effect = new KeyframeEffect({left: "100px"}); |
| 141 effect.getFrames().push({top: "200px"}); |
| 142 var frames = effect.getFrames(); |
| 143 assert_equals(frames.length, 1); |
| 144 assert_equals(frames[0].left, "100px"); |
| 145 assert_equals(frames[0].top, undefined); |
| 146 }, "KeyframeEffect.getFrames() should not allow internal state to " + |
| 147 "be modified"); |
| 148 |
| 149 test(function() { |
| 150 assert_equals(new KeyframeEffect(keyframes).getFrames()[0].offset, |
| 151 null); |
| 152 }, "Default keyframe offset should be null"); |
| 153 |
| 154 test(function() { |
| 155 assert_equals( |
| 156 new KeyframeEffect({offset: "foo"}).getFrames()[0].offset, null); |
| 157 assert_equals(new KeyframeEffect({offset: 42}).getFrames()[0].offset, |
| 158 42); |
| 159 }, "Keyframes should only accept valid values for offset"); |
| 160 |
| 161 test(function() { |
| 162 assert_equals(new KeyframeEffect(keyframes).getFrames()[0].composite, |
| 163 null); |
| 164 }, "Default keyframe composite should be null"); |
| 165 |
| 166 test(function() { |
| 167 assert_equals( |
| 168 new KeyframeEffect({composite: "foo"}).getFrames()[0].composite, |
| 169 null); |
| 170 assert_equals( |
| 171 new KeyframeEffect({composite: 42}).getFrames()[0].composite, |
| 172 null); |
| 173 assert_equals( |
| 174 new KeyframeEffect({composite: "add"}).getFrames()[0].composite, |
| 175 "add"); |
| 176 assert_equals(new KeyframeEffect( |
| 177 {composite: "replace"}).getFrames()[0].composite, |
| 178 "replace"); |
| 179 }, "Keyframes should only accept valid values for composite"); |
| 180 |
| 181 test(function() { |
| 182 assert_equals(new KeyframeEffect({left: null}).getFrames()[0].left, |
| 183 ""); |
| 184 }, "Keyframe should handle null property values"); |
| 185 |
| 186 test(function() { |
| 187 assert_equals( |
| 188 typeof new KeyframeEffect({left: 42}).getFrames()[0].left, |
| 189 "string"); |
| 190 assert_equals(new KeyframeEffect({left: 42}).getFrames()[0].left, |
| 191 "42"); |
| 192 var obj = { toString: function() { return "toString() called"; } }; |
| 193 assert_equals(new KeyframeEffect({left: obj}).getFrames()[0].left, |
| 194 obj.toString()); |
| 195 }, "Keyframe property values should be stringified"); |
| 196 |
| 197 timing_test(function() { |
| 198 document.timeline.play(new Animation( |
| 199 document.getElementById("anim2"), {left: null, top: ''}, 1)); |
| 200 at(1.0, function() { |
| 201 assert_styles("#anim2", {left: "100px"}); |
| 202 assert_styles("#anim2", {top: "200px"}); |
| 203 }); |
| 204 }, "Invalid keyframe property values should be ignored"); |
| 205 |
| 206 test(function() { |
| 207 var effect = new KeyframeEffect(keyframes); |
| 208 effect.setFrames({top: "200px"}); |
| 209 var frames = effect.getFrames(); |
| 210 assert_equals(frames[0].left, undefined); |
| 211 assert_equals(frames[0].top, "200px"); |
| 212 }, "KeyframeEffect.setFrames() should replace exisiting keyframes"); |
| 213 |
| 214 timing_test(function() { |
| 215 var animation = new Animation(document.getElementById("anim3"), keyframes, 1); |
| 216 document.timeline.play(animation); |
| 217 at(0.5, function() { |
| 218 assert_styles("#anim3", {left: "250px"}); |
| 219 animation.effect.setFrames([{left: "300px"}, {left: "400px"}]); |
| 220 assert_styles("#anim3", {left: "350px"}); |
| 221 }); |
| 222 }, "KeyframeEffect.setFrames() should immediately update its target"); |
| 223 |
| 224 timing_test(function() { |
| 225 document.timeline.play(new Animation(document.getElementById("anim4"), |
| 226 new KeyframeEffect(keyframes, 'replace', 'sum'), |
| 227 {duration: 1.0, iterations: 3.0})); |
| 228 at(0.5, function() { |
| 229 assert_styles("#anim4", {left: "250px"}); |
| 230 }); |
| 231 at(1.5, function() { |
| 232 assert_styles("#anim4", {left: "550px"}); |
| 233 }); |
| 234 at(2.5, function() { |
| 235 assert_styles("#anim4", {left: "850px"}); |
| 236 }); |
| 237 }, "Accumulate should work with 'replace' composite keyframes"); |
| 238 |
| 239 timing_test(function() { |
| 240 document.timeline.play(new Animation(document.getElementById("anim5"), |
| 241 new KeyframeEffect(keyframes, 'add', 'sum'), |
| 242 {duration: 1.0, iterations: 3.0})); |
| 243 at(0.5, function() { |
| 244 assert_styles("#anim5", {left: "350px"}); |
| 245 }); |
| 246 at(1.5, function() { |
| 247 assert_styles("#anim5", {left: "650px"}); |
| 248 }); |
| 249 at(2.5, function() { |
| 250 assert_styles("#anim5", {left: "950px"}); |
| 251 }); |
| 252 }, "Accumulate should work with 'add' composite keyframes"); |
| 253 |
| 254 timing_test(function() { |
| 255 document.timeline.play(new Animation(document.getElementById("anim6"), |
| 256 new KeyframeEffect(keyframes, 'add', 'sum'), |
| 257 {duration: 1.0, iterationStart: 1.0, iterations: 3.0})); |
| 258 at(0.5, function() { |
| 259 assert_styles("#anim6", {left: "650px"}); |
| 260 }); |
| 261 at(1.5, function() { |
| 262 assert_styles("#anim6", {left: "950px"}); |
| 263 }); |
| 264 at(2.5, function() { |
| 265 assert_styles("#anim6", {left: "1250px"}); |
| 266 }); |
| 267 }, "Accumulate should be from zero iteration: non-zero iterationStart"); |
| 268 |
| 269 timing_test(function() { |
| 270 document.timeline.play(new Animation(document.getElementById("anim7"), |
| 271 new KeyframeEffect(keyframes, 'add', 'sum'), |
| 272 {duration: 1.0, iterationStart: 1.1, iterations: 3.0})); |
| 273 at(0.4, function() { |
| 274 assert_styles("#anim7", {left: "650px"}); |
| 275 }); |
| 276 at(1.4, function() { |
| 277 assert_styles("#anim7", {left: "950px"}); |
| 278 }); |
| 279 at(2.4, function() { |
| 280 assert_styles("#anim7", {left: "1250px"}); |
| 281 }); |
| 282 }, "Accumulate should be from zero iteration: non-integer iterationStart"); |
| 283 |
| 284 timing_test(function() { |
| 285 document.timeline.play(new Animation(document.getElementById("anim8"), |
| 286 new KeyframeEffect([ |
| 287 {left: "200px", composite: "add"}, |
| 288 {left: "300px", composite: "replace"} |
| 289 ], 'replace', 'sum'), |
| 290 {duration: 1.0, iterations: 3.0})); |
| 291 at(0.5, function() { |
| 292 assert_styles("#anim8", {left: "300px"}); |
| 293 }); |
| 294 at(1.5, function() { |
| 295 assert_styles("#anim8", {left: "300px"}); |
| 296 }); |
| 297 }, "Accumulate should not be used if composite is mixed"); |
| 298 |
| 299 timing_test(function() { |
| 300 document.timeline.play(new Animation(document.getElementById("anim9"), |
| 301 new KeyframeEffect(keyframes, 'add', 'sum'), |
| 302 {duration: 1.0, iterationStart: -2.0, iterations: 4.0})); |
| 303 at(0.5, function() { |
| 304 assert_styles("#anim9", {left: "350px"}); |
| 305 }); |
| 306 at(1.5, function() { |
| 307 assert_styles("#anim9", {left: "350px"}); |
| 308 }); |
| 309 at(2.5, function() { |
| 310 assert_styles("#anim9", {left: "350px"}); |
| 311 }); |
| 312 at(3.5, function() { |
| 313 assert_styles("#anim9", {left: "650px"}); |
| 314 }); |
| 315 }, "Accumulate should not be used on non-positive iterations"); |
| 316 |
| 317 timing_test(function() { |
| 318 document.timeline.play(new Animation(document.getElementById("anim10"), [ |
| 319 {left: "100px"}, |
| 320 {left: "200px"}, |
| 321 {left: "100px"}, |
| 322 {left: "300px"}, |
| 323 {left: "100px"}, |
| 324 ], 1)); |
| 325 at(0.0, function() { |
| 326 assert_styles("#anim10", {left: "100px"}); |
| 327 }); |
| 328 at(0.25, function() { |
| 329 assert_styles("#anim10", {left: "200px"}); |
| 330 }); |
| 331 at(0.5, function() { |
| 332 assert_styles("#anim10", {left: "100px"}); |
| 333 }); |
| 334 at(0.75, function() { |
| 335 assert_styles("#anim10", {left: "300px"}); |
| 336 }); |
| 337 at(1.0, function() { |
| 338 assert_styles("#anim10", {left: "100px"}); |
| 339 }); |
| 340 }, "Keyframes should be distributed evenly between offsets 0 and 1"); |
| 341 |
| 342 timing_test(function() { |
| 343 document.timeline.play(new Animation(document.getElementById("anim11"), [ |
| 344 {left: "100px", offset: 0.0}, |
| 345 {left: "200px", offset: 0.7}, |
| 346 {left: "100px"}, |
| 347 {left: "300px"}, |
| 348 {left: "100px", offset: 1.0}, |
| 349 ], 1)); |
| 350 at(0.0, function() { |
| 351 assert_styles("#anim11", {left: "100px"}); |
| 352 }); |
| 353 at(0.7, function() { |
| 354 assert_styles("#anim11", {left: "200px"}); |
| 355 }); |
| 356 at(0.8, function() { |
| 357 assert_styles("#anim11", {left: "100px"}); |
| 358 }); |
| 359 at(0.9, function() { |
| 360 assert_styles("#anim11", {left: "300px"}); |
| 361 }); |
| 362 at(1.0, function() { |
| 363 assert_styles("#anim11", {left: "100px"}); |
| 364 }); |
| 365 }, "Keyframes should be distributed evenly between keyframes with offsets"); |
| 366 |
| 367 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 175443005:
[polymer] import all elements (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart