From 6dd6eb7f62796292d956354265cf0155990d1ec3 Mon Sep 17 00:00:00 2001
From: Eric Willigers <ericwilligers@chromium.org>
Date: Tue, 17 Jun 2014 16:23:41 +1000
Subject: [PATCH] min and max do not affect animation pace

max can cause an animation to cancel early.

min can cause an animation to freeze for some time after the required
effect completes. Neither affects the rate at which the animation occurs.
---
 examples/svg/min-max.svg  |  6 +++---
 examples/web/min-max.html | 16 ++++++++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/examples/svg/min-max.svg b/examples/svg/min-max.svg
index 82e5028..490f6e7 100644
--- a/examples/svg/min-max.svg
+++ b/examples/svg/min-max.svg
@@ -3,12 +3,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="200">
 
   <rect x="10" y="110" width="100" height="10" fill="blue">
-    <animate attributeName="fill" from="red" to="red" dur="2s" max="1s"/>
+    <animate attributeName="fill" from="white" to="red" dur="2s" max="1s"/>
   </rect>
   <rect x="10" y="120" width="200" height="10" fill="blue">
-    <animate attributeName="fill" from="red" to="red" dur="1s" min="2s"/>
+    <animate attributeName="fill" from="white" to="red" dur="1s" min="2s"/>
   </rect>
   <rect x="10" y="130" width="300" height="10" fill="blue">
-    <animate attributeName="fill" from="red" to="red" dur="3s" min="0s" max="indefinite"/>
+    <animate attributeName="fill" from="white" to="red" dur="3s" min="0s" max="indefinite"/>
   </rect>
 </svg>
diff --git a/examples/web/min-max.html b/examples/web/min-max.html
index d01167f..a37eb23 100644
--- a/examples/web/min-max.html
+++ b/examples/web/min-max.html
@@ -9,12 +9,16 @@
     <script src="../web-animations.js"></script>
     <script>
       'use strict';
-      var first = document.getElementById('first');
-      var second = document.getElementById('second');
-      var third = document.getElementById('third');
-      first.animate([{fill: 'red'}, {fill: 'red'}], {duration: 1000});
-      second.animate([{fill: 'red'}, {fill: 'red'}], {duration: 2000});
-      third.animate([{fill: 'red'}, {fill: 'red'}], {duration: 3000});
+
+      var firstPlayer = first.animate([{fill: 'white'}, {fill: 'red'}], {duration: 2000});
+      document.timeline.play(new Animation(null, [], 1000)).onfinish = function() { firstPlayer.cancel(); };
+
+      // We could use a keyframe to freeze the effect, but note that strategy isn't available with motion path effects.
+      // var secondPlayer = second.animate([{fill: 'white'}, {fill: 'red', offset: 0.5}, {fill: 'red'}], {duration: 2000});
+      var secondPlayer = second.animate([{fill: 'white'}, {fill: 'red'}], {duration: 1000, fill: 'forwards'});
+      document.timeline.play(new Animation(null, [], 2000)).onfinish = function() { secondPlayer.cancel(); };
+
+      third.animate([{fill: 'white'}, {fill: 'red'}], {duration: 3000});
     </script>
   </body>
 </html>