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

Author: dstoc

README.md

@@ -20,9 +20,14 @@ For more details see the
 What is the polyfill?
 ---------------------
 
-The polyfill is a JavaScript implementation of the Web Animations API. It works
-on modern versions of all major browsers. For more details about browser
-support see <https://www.polymer-project.org/resources/compatibility.html>.
+The polyfill is a JavaScript implementation of the Web Animations API. It is
+supported on modern versions of all major browsers, including:
+
+* Chrome
+* Firefox 27+
+* IE10+ (including Edge)
+* Safari (iOS) 7.1+
+* Safari (Mac) 9+
 
 Getting Started
 ---------------
@@ -31,19 +36,21 @@ Here's a simple example of an animation that scales and changes the opacity of
 a `<div>` over 0.5 seconds. The animation alternates producing a pulsing
 effect.
 
-    <script src="web-animations.min.js"></script>
-    <div class="pulse" style="width:150px;">Hello world!</div>
-    <script>
-        var elem = document.querySelector('.pulse');
-        var animation = elem.animate([
-            {opacity: 0.5, transform: "scale(0.5)"},
-            {opacity: 1.0, transform: "scale(1)"}
-        ], {
-            direction: 'alternate',
-            duration: 500,
-            iterations: Infinity
-        });
-    </script>
+```html
+<script src="web-animations.min.js"></script>
+<div class="pulse" style="width:150px;">Hello world!</div>
+<script>
+    var elem = document.querySelector('.pulse');
+    var animation = elem.animate([
+        {opacity: 0.5, transform: "scale(0.5)"},
+        {opacity: 1.0, transform: "scale(1)"}
+    ], {
+        direction: 'alternate',
+        duration: 500,
+        iterations: Infinity
+    });
+</script>
+```
 
 Web Animations supports off-main-thread animations, and also allows procedural
 generation of animations and fine-grained control of animation playback. See
@@ -124,11 +131,15 @@ The polyfill will automatically detect the correctly prefixed name to use when
 writing animated properties back to the platform. Where possible, the polyfill
 will only accept unprefixed versions of experimental features. For example:
 
-    var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"}, 2000);
+```js
+var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"}, 2000);
+```
 
 will work in all browsers that implement a conforming version of transform, but
 
-    var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000);
+```js
+var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000);
+```
 
 will not work anywhere.
 

src/tick.js

@@ -77,7 +77,7 @@
   } else {
     var now = function() {
       if (_now == undefined)
-        _now = performance.now();
+        _now = window.performance && performance.now ? performance.now() : Date.now();
       return _now;
     };
   }

test/js/effect-callback.js

@@ -79,74 +79,4 @@ suite('effect-callback', function() {
     assert.equal(callbackAnim, animation);
     assert.equal(callbackEffect.target, document.body);
   });
-
-  test('animations starting in the future are not in effect (old version)', function() {
-    var fractions = [];
-    tick(100);
-    var animation = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000);
-    animation.startTime = 1000;
-    tick(200);
-    tick(1000);
-    tick(1100);
-    assert.deepEqual(fractions, [0, 0.1]);
-  });
-
-  test('duration 0 animations get sampled at least once (old version)', function() {
-    var timeFraction;
-    tick(0);
-    var animation = document.body.animate(function(t) {
-      timeFraction = t;
-    }, {duration: 0, fill: 'both'});
-    tick(100);
-    assert.equal(timeFraction, 1);
-    assert.equal(isTicking(), false);
-  });
-
-  test('animations added during custom effect callbacks get updated in the same tick (old version)', function() {
-    var animation;
-    var called = false;
-    tick(0);
-    document.body.animate(function() {
-      animation = document.body.animate(function() {
-        called = true;
-      }, 1);
-    }, 2);
-    tick(1);
-    assert.isTrue(animation.startTime >= 0);
-    assert.isFalse(called);
-  });
-
-  test('custom effect should be called after cancel (old version)', function() {
-    var fractions = [];
-    var animation = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000);
-    tick(0);
-    tick(500);
-    animation.cancel();
-    tick(501);
-    assert.deepEqual(fractions, [0, 0.5, null]);
-  });
-
-  test('element.animate is given effect (old version)', function() {
-    var callbackAnim;
-    var animation = document.body.animate(function(t, target, a) {
-      callbackAnim = a;
-    }, 100);
-    tick(50);
-    tick(150);
-    assert.equal(isTicking(), false);
-    assert(callbackAnim, 'callback should be set');
-    assert.equal(callbackAnim.target, document.body);
-  });
-
-  test('custom callback on effect is given source effect (old version)', function() {
-    var callbackAnim;
-    var effect = new KeyframeEffect(document.body, function(t, target, a) {
-      callbackAnim = a;
-    }, 1000);
-    var animation = document.timeline.play(effect);
-    tick(50);
-    tick(550);
-    assert.equal(animation.currentTime, 500);
-    assert.equal(callbackAnim, effect);
-  });
 });

test/js/keyframe-effect-constructor.js

@@ -127,7 +127,8 @@ suite('keyframe-effect-constructor', function() {
   test('Remove custom effect from directly associated animation', function() {
     var target = document.createElement('div');
     document.body.appendChild(target);
-    var custom = new KeyframeEffect(null, function(x) {target.style.opacity = x;}, 10);
+    var custom = new KeyframeEffect(null, [], 10);
+    custom.onsample = function(x) { target.style.opacity = x; };
     var animation = document.timeline.play(custom);
     tick(0);
     assert.equal(getComputedStyle(target).opacity, 0);