Merge remote-tracking branch 'web-animations-next/master' into HEAD

Author: dstoc

History.md

@@ -1,3 +1,32 @@
+### 1.0.3 - *December 4 2014*
+
+  * Fix a critical bug on iOS 7 and Safari <= 6. Due to limitations,
+    inline style patching is not supported on these platforms.
+
+### 1.0.2 - *November 28 2014*
+
+  * Deprecated `AnimationTiming.playbackRate`.
+
+    For example, this is no longer supported:
+
+        var player = element.animate(
+            keyframes,
+            {duration: 1000, playbackRate: 2});
+
+    Use `AnimationPlayer.playbackRate` instead:
+
+        var player = element.animate(
+            keyframes,
+            {duration: 1000});
+        player.playbackRate = 2;
+
+    If you have any feedback on this change, please start a discussion
+    on the public-fx mailing list:
+    http://lists.w3.org/Archives/Public/public-fx/
+
+    Or file an issue against the specification on GitHub:
+    https://github.com/w3c/web-animations/issues/new
+
 ### 1.0.1 - *November 26 2014*
 
   * Players should be constructed in idle state

README.md

@@ -115,6 +115,8 @@ JavaScript can still work in the presence of animations. However, to keep the
 size of web-animations-next-lite as small as possible, the style emulation
 module is not included. When using this version of the polyfill, JavaScript
 inline style modification will be overwritten by animations.
+Due to browser constraints inline style modification is not supported on iOS 7
+or Safari 6 (or earlier versions).
 
 ### Prefix handling
 
@@ -147,12 +149,13 @@ Report any issues with this implementation on GitHub:
 Breaking changes
 ----------------
 
-When we make a potentially breaking change to the polyfill's API surface (like
-a rename) we'll continue supporting the old version, deprecated, for three
-months, and ensure that there are console warnings to indicate that a change is
-pending. After three months, the old version of the API surface (e.g. the old
-version of a function name) will be removed. If you see deprecation warnings
-you can't avoid it by not updating.
+When we make a potentially breaking change to the polyfill's API
+surface (like a rename) where possible we will continue supporting the
+old version, deprecated, for three months, and ensure that there are
+console warnings to indicate that a change is pending. After three
+months, the old version of the API surface (e.g. the old version of a
+function name) will be removed. *If you see deprecation warnings you
+can't avoid it by not updating*.
 
 We also announce anything that isn't a bug fix on
 [[email protected]](https://groups.google.com/forum/#!forum/web-animations-changes).

src/animation-constructor.js

@@ -28,8 +28,12 @@
 
   scope.Animation = function(target, effect, timingInput) {
     this.target = target;
-    // TODO: Make modifications to specified update the underlying player
+
+    // TODO: Store a clone, not the same instance.
+    this._timingInput = timingInput;
     this._timing = shared.normalizeTimingInput(timingInput);
+
+    // TODO: Make modifications to timing update the underlying player
     this.timing = shared.makeTiming(timingInput);
     // TODO: Make this a live object - will need to separate normalization of
     // keyframes into a shared module.
@@ -54,7 +58,7 @@
     if (typeof effect == 'function') {
       effect = [];
     }
-    return originalElementAnimate.apply(target, [effect, animation.timing]);
+    return originalElementAnimate.apply(target, [effect, animation._timingInput]);
   };
 
   scope.bindPlayerForAnimation = function(player) {

src/apply-preserving-inline-style.js

@@ -157,10 +157,19 @@
     if (element._webAnimationsPatchedStyle)
       return;
 
-    // If this style patch fails (on Safari and iOS) use the apply-preserving-inline-style-methods.js
-    // module instead and restrict inline style interactions to the methods listed in styleMethods.
     var animatedStyle = new AnimatedCSSStyleDeclaration(element);
-    configureProperty(element, 'style', { get: function() { return animatedStyle; } });
+    try {
+      configureProperty(element, 'style', { get: function() { return animatedStyle; } });
+    } catch (_) {
+      // iOS and older versions of Safari (pre v7) do not support overriding an element's
+      // style object. Animations will clobber any inline styles as a result.
+      element.style._set = function(property, value) {
+        element.style[property] = value;
+      };
+      element.style._clear = function(property) {
+        element.style[property] = '';
+      };
+    }
 
     // We must keep a handle on the patched style to prevent it from getting GC'd.
     element._webAnimationsPatchedStyle = element.style;

src/deprecation.js

@@ -0,0 +1,42 @@
+// Copyright 2014 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.
+
+(function(shared) {
+
+  var silenced = {};
+
+  shared.isDeprecated = function(feature, date, advice, plural) {
+    var auxVerb = plural ? 'are' : 'is';
+    var today = new Date();
+    var expiry = new Date(date);
+    expiry.setMonth(expiry.getMonth() + 3); // 3 months grace period
+
+    if (today < expiry) {
+      if (!(feature in silenced)) {
+        console.warn('Web Animations: ' + feature + ' ' + auxVerb + ' deprecated and will stop working on ' + expiry.toDateString() + '. ' + advice);
+      }
+      silenced[feature] = true;
+      return false;
+    } else {
+      return true;
+    }
+  };
+
+  shared.deprecated = function(feature, date, advice, plural) {
+    if (shared.isDeprecated(feature, date, advice, plural)) {
+      throw new Error(feature + ' ' + auxVerb + ' no longer supported. ' + advice);
+    }
+  };
+
+})(webAnimationsShared);

src/timing-utilities.js

@@ -45,6 +45,9 @@
           if ((property == 'direction') && (directions.indexOf(timingInput[property]) == -1)) {
             return;
           }
+          if (property == 'playbackRate' && shared.isDeprecated('AnimationTiming.playbackRate', '2014-11-28', 'Use AnimationPlayer.playbackRate instead.')) {
+            return;
+          }
           timing[property] = timingInput[property];
         }
       });

target-config.js

@@ -27,6 +27,7 @@
       'src/position-handler.js',
       'src/shape-handler.js',
       'src/property-names.js',
+      'src/deprecation.js',
   ];
 
   var liteMinifillSrc = [
@@ -48,6 +49,7 @@
       'src/box-handler.js',
       'src/transform-handler.js',
       'src/property-names.js',
+      'src/deprecation.js',
   ];
 
 

web-animations.html

@@ -21,6 +21,7 @@
 
 <script src="src/dev.js"></script>
 <script src="src/scope.js"></script>
+<script src="src/deprecation.js"></script>
 <script src="src/timing-utilities.js"></script>
 <script src="src/normalize-keyframes.js"></script>
 <script src="src/animation-node.js"></script>