| 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).composite, "replace"); | |
| 54 }, "KeyframeEffect.composite should default to 'replace'"); | |
| 55 | |
| 56 test(function() { | |
| 57 var effect = new KeyframeEffect(keyframes); | |
| 58 effect.composite = "foo"; | |
| 59 assert_equals(effect.composite, "replace"); | |
| 60 effect.composite = 42; | |
| 61 assert_equals(effect.composite, "replace"); | |
| 62 effect.composite = "add"; | |
| 63 assert_equals(effect.composite, "add"); | |
| 64 }, "KeyframeEffect.composite should only accept valid values"); | |
| 65 | |
| 66 timing_test(function() { | |
| 67 var animation = new Animation(document.getElementById("anim1"), keyframes, 1); | |
| 68 document.timeline.play(animation); | |
| 69 at(0.5, function() { | |
| 70 assert_styles("#anim1", {left: "250px"}); | |
| 71 animation.effect.composite = "add"; | |
| 72 assert_styles("#anim1", {left: "350px"}); | |
| 73 }); | |
| 74 }, "Setting KeyframeEffect.composite should cause immediate update"); | |
| 75 | |
| 76 test(function() { | |
| 77 var frames = new KeyframeEffect( | |
| 78 [{left: "100px"}, {top: "200px"}]).getFrames(); | |
| 79 assert_equals(frames.length, 2); | |
| 80 assert_equals(frames[0].left, "100px"); | |
| 81 assert_equals(frames[1].top, "200px"); | |
| 82 }, "KeyframeEffect.getFrames() should return the specified keyframes"); | |
| 83 | |
| 84 test(function() { | |
| 85 var frames = new KeyframeEffect({left: "100px"}).getFrames(); | |
| 86 assert_equals(frames.length, 1); | |
| 87 assert_equals(frames[0].left, "100px"); | |
| 88 }, "KeyframeEffect should handle a single keyframe"); | |
| 89 | |
| 90 test(function() { | |
| 91 var frames = new KeyframeEffect({}).getFrames(); | |
| 92 assert_equals(frames.length, 1); | |
| 93 assert_equals(typeof frames[0], "object"); | |
| 94 }, "KeyframeEffect should handle an empty keyframe"); | |
| 95 | |
| 96 test(function() { | |
| 97 var frames = new KeyframeEffect().getFrames(); | |
| 98 assert_equals(frames.length, 1); | |
| 99 assert_equals(typeof frames[0], "object"); | |
| 100 }, "KeyframeEffect should handle no input for keyframe dictionary"); | |
| 101 | |
| 102 test(function() { | |
| 103 var frames = new KeyframeEffect(42).getFrames(); | |
| 104 assert_equals(frames.length, 1); | |
| 105 assert_equals(typeof frames[0], "object"); | |
| 106 }, "KeyframeEffect should handle non-objects for keyframe dictionary"); | |
| 107 | |
| 108 test(function() { | |
| 109 assert_false( | |
| 110 new KeyframeEffect(keyframes).getFrames() === keyframes); | |
| 111 }, "KeyframeEffect.getFrames() should not return the original " + | |
| 112 "keyframe dictionary"); | |
| 113 | |
| 114 test(function() { | |
| 115 var effect = new KeyframeEffect({left: "100px"}); | |
| 116 effect.getFrames().push({top: "200px"}); | |
| 117 var frames = effect.getFrames(); | |
| 118 assert_equals(frames.length, 1); | |
| 119 assert_equals(frames[0].left, "100px"); | |
| 120 assert_equals(frames[0].top, undefined); | |
| 121 }, "KeyframeEffect.getFrames() should not allow internal state to " + | |
| 122 "be modified"); | |
| 123 | |
| 124 test(function() { | |
| 125 assert_equals(new KeyframeEffect(keyframes).getFrames()[0].offset, | |
| 126 null); | |
| 127 }, "Default keyframe offset should be null"); | |
| 128 | |
| 129 test(function() { | |
| 130 assert_equals( | |
| 131 new KeyframeEffect({offset: "foo"}).getFrames()[0].offset, null); | |
| 132 assert_equals(new KeyframeEffect({offset: 42}).getFrames()[0].offset, | |
| 133 42); | |
| 134 }, "Keyframes should only accept valid values for offset"); | |
| 135 | |
| 136 test(function() { | |
| 137 assert_equals(new KeyframeEffect(keyframes).getFrames()[0].composite, | |
| 138 null); | |
| 139 }, "Default keyframe composite should be null"); | |
| 140 | |
| 141 test(function() { | |
| 142 assert_equals( | |
| 143 new KeyframeEffect({composite: "foo"}).getFrames()[0].composite, | |
| 144 null); | |
| 145 assert_equals( | |
| 146 new KeyframeEffect({composite: 42}).getFrames()[0].composite, | |
| 147 null); | |
| 148 assert_equals( | |
| 149 new KeyframeEffect({composite: "add"}).getFrames()[0].composite, | |
| 150 "add"); | |
| 151 assert_equals(new KeyframeEffect( | |
| 152 {composite: "replace"}).getFrames()[0].composite, | |
| 153 "replace"); | |
| 154 }, "Keyframes should only accept valid values for composite"); | |
| 155 | |
| 156 test(function() { | |
| 157 assert_equals(new KeyframeEffect({left: null}).getFrames()[0].left, | |
| 158 ""); | |
| 159 }, "Keyframe should handle null property values"); | |
| 160 | |
| 161 test(function() { | |
| 162 assert_equals( | |
| 163 typeof new KeyframeEffect({left: 42}).getFrames()[0].left, | |
| 164 "string"); | |
| 165 assert_equals(new KeyframeEffect({left: 42}).getFrames()[0].left, | |
| 166 "42"); | |
| 167 var obj = { toString: function() { return "toString() called"; } }; | |
| 168 assert_equals(new KeyframeEffect({left: obj}).getFrames()[0].left, | |
| 169 obj.toString()); | |
| 170 }, "Keyframe property values should be stringified"); | |
| 171 | |
| 172 timing_test(function() { | |
| 173 document.timeline.play(new Animation( | |
| 174 document.getElementById("anim2"), {left: null, top: ''}, 1)); | |
| 175 at(1.0, function() { | |
| 176 assert_styles("#anim2", {left: "100px"}); | |
| 177 assert_styles("#anim2", {top: "200px"}); | |
| 178 }); | |
| 179 }, "Invalid keyframe property values should be ignored"); | |
| 180 | |
| 181 test(function() { | |
| 182 var effect = new KeyframeEffect(keyframes); | |
| 183 effect.setFrames({top: "200px"}); | |
| 184 var frames = effect.getFrames(); | |
| 185 assert_equals(frames[0].left, undefined); | |
| 186 assert_equals(frames[0].top, "200px"); | |
| 187 }, "KeyframeEffect.setFrames() should replace exisiting keyframes"); | |
| 188 | |
| 189 timing_test(function() { | |
| 190 var animation = new Animation(document.getElementById("anim3"), keyframes, 1); | |
| 191 document.timeline.play(animation); | |
| 192 at(0.5, function() { | |
| 193 assert_styles("#anim3", {left: "250px"}); | |
| 194 animation.effect.setFrames([{left: "300px"}, {left: "400px"}]); | |
| 195 assert_styles("#anim3", {left: "350px"}); | |
| 196 }); | |
| 197 }, "KeyframeEffect.setFrames() should immediately update its target"); | |
| 198 timing_test(function() { | |
| 199 document.timeline.play(new Animation(document.getElementById("anim10"), [ | |
| 200 {left: "100px"}, | |
| 201 {left: "200px"}, | |
| 202 {left: "100px"}, | |
| 203 {left: "300px"}, | |
| 204 {left: "100px"}, | |
| 205 ], 1)); | |
| 206 at(0.0, function() { | |
| 207 assert_styles("#anim10", {left: "100px"}); | |
| 208 }); | |
| 209 at(0.25, function() { | |
| 210 assert_styles("#anim10", {left: "200px"}); | |
| 211 }); | |
| 212 at(0.5, function() { | |
| 213 assert_styles("#anim10", {left: "100px"}); | |
| 214 }); | |
| 215 at(0.75, function() { | |
| 216 assert_styles("#anim10", {left: "300px"}); | |
| 217 }); | |
| 218 at(1.0, function() { | |
| 219 assert_styles("#anim10", {left: "100px"}); | |
| 220 }); | |
| 221 }, "Keyframes should be distributed evenly between offsets 0 and 1"); | |
| 222 | |
| 223 timing_test(function() { | |
| 224 document.timeline.play(new Animation(document.getElementById("anim11"), [ | |
| 225 {left: "100px", offset: 0.0}, | |
| 226 {left: "200px", offset: 0.7}, | |
| 227 {left: "100px"}, | |
| 228 {left: "300px"}, | |
| 229 {left: "100px", offset: 1.0}, | |
| 230 ], 1)); | |
| 231 at(0.0, function() { | |
| 232 assert_styles("#anim11", {left: "100px"}); | |
| 233 }); | |
| 234 at(0.7, function() { | |
| 235 assert_styles("#anim11", {left: "200px"}); | |
| 236 }); | |
| 237 at(0.8, function() { | |
| 238 assert_styles("#anim11", {left: "100px"}); | |
| 239 }); | |
| 240 at(0.9, function() { | |
| 241 assert_styles("#anim11", {left: "300px"}); | |
| 242 }); | |
| 243 at(1.0, function() { | |
| 244 assert_styles("#anim11", {left: "100px"}); | |
| 245 }); | |
| 246 }, "Keyframes should be distributed evenly between keyframes with offsets"); | |
| 247 | |
| 248 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master