Index: pkg/polymer/lib/elements/web-animations-js/test/testcases/manual-test-preset-timings.html |
diff --git a/pkg/polymer/lib/elements/web-animations-js/test/testcases/manual-test-preset-timings.html b/pkg/polymer/lib/elements/web-animations-js/test/testcases/manual-test-preset-timings.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..63c1510329185ebfef1dd07b204375b0835795d8 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/web-animations-js/test/testcases/manual-test-preset-timings.html |
@@ -0,0 +1,71 @@ |
+<!-- |
+Copyright 2012 Google Inc. All Rights Reserved. |
+ |
+Licensed under the Apache License, Version 2.0 (the "License"); |
+you may not use this file except in compliance with the License. |
+You may obtain a copy of the License at |
+ |
+ http://www.apache.org/licenses/LICENSE-2.0 |
+ |
+Unless required by applicable law or agreed to in writing, software |
+distributed under the License is distributed on an "AS IS" BASIS, |
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
+See the License for the specific language governing permissions and |
+limitations under the License. |
+--> |
+ |
+<!DOCTYPE html><meta charset="UTF-8"> |
+<style> |
+canvas { |
+ border: silver solid 1px; |
+ padding: 5px; |
+} |
+span { |
+ display: inline-block; |
+ padding: 5px; |
+} |
+</style> |
+<body> |
+ |
+<script src="../../web-animations.js"></script> |
+<script> |
+"use strict"; |
+ |
+var size = 100; |
+var duration = 3.0; |
+ |
+function testTiming(name) { |
+ var canvas = document.createElement('canvas'); |
+ canvas.width = canvas.height = size; |
+ var ctx = canvas.getContext('2d'); |
+ ctx.strokeStyle = 'blue'; |
+ ctx.beginPath(); |
+ ctx.moveTo(0, size); |
+ var span = document.createElement('span'); |
+ span.appendChild(canvas); |
+ span.appendChild(document.createElement('br')); |
+ span.appendChild(document.createTextNode(name)); |
+ document.body.appendChild(span); |
+ return new Animation(ctx, |
+ function(timeFraction, animation) { |
+ var inputTimeFraction = player.currentTime / duration; |
+ animation.target.lineTo(inputTimeFraction * size, size - timeFraction * size); |
+ animation.target.stroke(); |
+ }, { |
+ duration: duration, |
+ easing: name, |
+ }); |
+} |
+ |
+// TODO: Making player global like this is is rather ugly. It would be nice if |
+// the animation or player were passed to the custom animation effect's sample |
+// function. |
+var player = document.timeline.play(new ParGroup([ |
+ testTiming('ease'), |
+ testTiming('linear'), |
+ testTiming('ease-in'), |
+ testTiming('ease-out'), |
+ testTiming('ease-in-out'), |
+])); |
+ |
+</script> |