sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/pane/layout.js

@@ -15,13 +15,14 @@ module("SC.Pane#layout", {
     });
     pane.append();
   },
-  
+
   teardown: function() {
     pane.remove();
+    pane.destroy();
   }
 });
 
-test("make sure that a call to adjust actually adjusts the view's size", function() {  
+test("make sure that a call to adjust actually adjusts the view's size", function() {
   SC.RunLoop.begin();
   pane.adjust({ width: 100, height: 50 });
   SC.RunLoop.end();

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/pane/sendEvent.js

@@ -14,7 +14,7 @@ module("SC.Pane#sendEvent", {
       callCount++ ;
       equals(theEvent, evt, 'should pass event');
     };
-    
+
     defaultResponder = SC.Object.create({ defaultEvent: handler });
     pane = SC.Pane.create({
       defaultResponder: defaultResponder,
@@ -33,9 +33,10 @@ module("SC.Pane#sendEvent", {
     ok(barView.barEvent, 'has barEvent handler');
 
     evt = SC.Object.create(); // mock
-  }, 
-  
+  },
+
   teardown: function() {
+    pane.destroy();
     pane = fooView = barView = defaultResponder = evt = null ;
   }
 });
@@ -66,7 +67,7 @@ test("when invoked with target = nested view", function() {
   handler = pane.sendEvent('imaginary', evt, barView);
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
-  
+
 });
 
 
@@ -80,7 +81,7 @@ test("when invoked with target = middle view", function() {
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
 
-  // test event handler on target 
+  // test event handler on target
   callCount = 0;
   handler = pane.sendEvent('fooEvent', evt, fooView);
   equals(callCount, 1, 'should invoke handler');
@@ -97,7 +98,7 @@ test("when invoked with target = middle view", function() {
   handler = pane.sendEvent('imaginary', evt, fooView);
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
-  
+
 });
 
 
@@ -111,7 +112,7 @@ test("when invoked with target = pane", function() {
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
 
-  // test event handler on target 
+  // test event handler on target
   callCount = 0;
   handler = pane.sendEvent('fooEvent', evt, pane);
   equals(callCount, 0, 'should not invoke handler');
@@ -128,7 +129,7 @@ test("when invoked with target = pane", function() {
   handler = pane.sendEvent('imaginary', evt, pane);
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
-  
+
 });
 
 
@@ -138,14 +139,14 @@ test("when invoked with target = null", function() {
 
   // should start @ first responder
   pane.firstResponder = fooView;
-  
+
   // test event handler on child view of target
   callCount = 0;
   handler = pane.sendEvent('barEvent', evt);
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
 
-  // test event handler on target 
+  // test event handler on target
   callCount = 0;
   handler = pane.sendEvent('fooEvent', evt);
   equals(callCount, 1, 'should invoke handler');
@@ -162,12 +163,12 @@ test("when invoked with target = null", function() {
   handler = pane.sendEvent('imaginary', evt);
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
-  
+
   // test event handler on pane itself
   callCount = 0;
   handler = pane.sendEvent('paneEvent', evt);
   equals(callCount, 1, 'should invoke handler on pane');
-  equals(handler, pane, 'should return pane as responder that handled event');  
+  equals(handler, pane, 'should return pane as responder that handled event');
 
 });
 
@@ -177,14 +178,14 @@ test("when invoked with target = null, no default or first responder", function(
   // no first or default responder
   pane.set('firstResponder', null);
   pane.set('defaultResponder', null);
-    
+
   // test event handler on child view of target
   callCount = 0;
   handler = pane.sendEvent('barEvent', evt);
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
 
-  // test event handler on target 
+  // test event handler on target
   callCount = 0;
   handler = pane.sendEvent('fooEvent', evt);
   equals(callCount, 0, 'should not invoke handler');
@@ -195,12 +196,12 @@ test("when invoked with target = null, no default or first responder", function(
   handler = pane.sendEvent('imaginary', evt);
   equals(callCount, 0, 'should not invoke handler');
   equals(handler, null, 'should return no responder');
-  
+
   // test event handler on pane itself
   callCount = 0;
   handler = pane.sendEvent('paneEvent', evt);
   equals(callCount, 1, 'should invoke handler on pane');
-  equals(handler, pane, 'should return pane as responder that handled event');  
+  equals(handler, pane, 'should return pane as responder that handled event');
 
 });
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/animation.js

@@ -7,43 +7,42 @@
 // ========================================================================
 // View Animation Unit Tests
 // ========================================================================
+/*global module, test, ok, equals, stop, start, expect*/
 
-/*globals module test ok same equals */
 
 /* These unit tests verify:  animate(). */
-
 var view, pane, originalSupportsTransitions = SC.platform.supportsCSSTransitions;
 
 function styleFor(view) {
   return view.get('layer').style;
 }
 
-function transitionFor(view){
-  return styleFor(view)[SC.platform.domCSSPrefix+"Transition"];
+function transitionFor(view) {
+  return styleFor(view)[SC.browser.experimentalStyleNameFor('transition')];
 }
 
 var commonSetup = {
-  setup: function() {
-
-    SC.RunLoop.begin();
+  setup: function (wantsAcceleratedLayer) {
 
-    pane = SC.Pane.create({
-      backgroundColor: '#ccc',
-      layout: { top: 0, right: 0, width: 200, height: 200, zIndex: 100 }
-    });
-    pane.append();
+    SC.run(function () {
+      pane = SC.Pane.create({
+        backgroundColor: '#ccc',
+        layout: { top: 0, right: 0, width: 200, height: 200, zIndex: 100 }
+      });
+      pane.append();
 
-    view = SC.View.create({
-      backgroundColor: '#888',
-      layout: { left: 0, top: 0, height: 100, width: 100 }
+      view = SC.View.create({
+        backgroundColor: '#888',
+        layout: { left: 0, top: 0, height: 100, width: 100 },
+        wantsAcceleratedLayer: wantsAcceleratedLayer || NO
+      });
+      pane.appendChild(view);
     });
-    pane.appendChild(view);
-
-    SC.RunLoop.end();
   },
 
-  teardown: function(){
+  teardown: function () {
     pane.remove();
+    pane.destroy();
   }
 };
 
@@ -51,201 +50,319 @@ if (SC.platform.supportsCSSTransitions) {
 
   module("ANIMATION", commonSetup);
 
-  test("should work", function(){
+  test("should work", function () {
+    stop(2000);
     SC.RunLoop.begin();
     view.animate('left', 100, { duration: 1 });
     SC.RunLoop.end();
-    equals(transitionFor(view), 'left 1s linear', 'add transition');
-    equals(100, view.get('layout').left, 'left is 100');
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'left 1s ease 0s', 'add transition');
+      equals(100, view.get('layout').left, 'left is 100');
+
+      start();
+    }, 5);
   });
 
-  test("should accept shorthand notation", function(){
-    SC.RunLoop.begin();
-    view.animate('left', 100, 1);
-    SC.RunLoop.end();
-    equals(transitionFor(view), 'left 1s linear', 'add transition');
+  test("callbacks work in general", function () {
+    stop(2000);
+
+    SC.run(function () {
+      view.animate('left', 100, { duration: 0.5 }, function () {
+        ok(true, "Callback was called.");
+        equals(view, this, "`this` should be the view");
+
+        start();
+      });
+    });
   });
 
-  test("callbacks work in general", function(){
+  test("callbacks work in general with target method", function () {
     stop(2000);
 
-    SC.RunLoop.begin();
-    // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater('animate', 1, 'left', 100, 0.500, function() {
-      start();
-      ok(true, "Callback was called.");
+    var ob = SC.Object.create({
+      callback: function () {
+        ok(true, "Callback was called.");
+        equals(ob, this, "`this` should be the target object");
+
+        start();
+      }
+    });
+
+    SC.run(function () {
+      view.animate('left', 100, { duration: 0.5 }, ob, 'callback');
     });
-    SC.RunLoop.end();
   });
 
-  test("callbacks should have appropriate data", function(){
+  test("callbacks should have appropriate data", function () {
     stop(2000);
 
     SC.RunLoop.begin();
-    // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater('animate', 1, 'left', 100, 0.500, function(data) {
-      start();
-
+    view.animate('left', 100, { duration: 0.5 }, function (data) {
       // TODO: Test this better
       ok(data.event, "has event");
       equals(data.view, view, "view is correct");
       equals(data.isCancelled, false, "animation is not cancelled");
+
+      start();
     });
     SC.RunLoop.end();
   });
 
-  test("handles timing function string", function(){
+  test("handles delay function string", function () {
+    stop(2000);
+
+    SC.RunLoop.begin();
+    view.animate('left', 100, { duration: 1, delay: 1 });
+    SC.RunLoop.end();
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'left 1s ease 1s', 'uses delay');
+
+      start();
+    }, 5);
+  });
+
+  test("handles timing function string", function () {
+    stop(2000);
+
     SC.RunLoop.begin();
     view.animate('left', 100, { duration: 1, timing: 'ease-in' });
     SC.RunLoop.end();
-    equals(transitionFor(view), 'left 1s ease-in', 'uses ease-in timing');
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'left 1s ease-in 0s', 'uses ease-in timing');
+
+      start();
+    }, 5);
   });
 
-  test("handles timing function array", function(){
+  test("handles timing function array", function () {
+    stop(2000);
+
     SC.RunLoop.begin();
     view.animate('left', 100, { duration: 1, timing: [0.1, 0.2, 0.3, 0.4] });
     SC.RunLoop.end();
-    equals(transitionFor(view), 'left 1s cubic-bezier(0.1, 0.2, 0.3, 0.4)', 'uses cubic-bezier timing');
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'left 1s cubic-bezier(0.1, 0.2, 0.3, 0.4) 0s', 'uses cubic-bezier timing');
+
+      start();
+    }, 5);
+  });
+
+  test("should allow multiple keys to be set at once", function () {
+    stop(2000);
+
+    SC.RunLoop.begin();
+    view.animate({ top: 100, left: 100 }, { duration: 1 });
+    SC.RunLoop.end();
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'top 1s ease 0s, left 1s ease 0s', 'should add transition');
+      equals(100, view.get('layout').top, 'top is 100');
+      equals(100, view.get('layout').left, 'left is 100');
+
+      start();
+    }, 5);
   });
 
-  test("should allow multiple keys to be set at once", function(){
+  test("should not animate any keys that don't change", function () {
+    stop(2000);
+
     SC.RunLoop.begin();
-    view.animate({ top: 100, left: 100 }, 1);
+    view.animate({ top: 0, left: 100 }, { duration: 1 });
     SC.RunLoop.end();
-    equals(transitionFor(view), 'top 1s linear, left 1s linear', 'should add transition');
-    equals(100, view.get('layout').top, 'top is 100');
-    equals(100, view.get('layout').left, 'left is 100');
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'left 1s ease 0s', 'should only add left transition');
+      equals(0, view.get('layout').top, 'top is 0');
+      equals(100, view.get('layout').left, 'left is 100');
+
+      start();
+    }, 5);
+  });
+
+  test("animating height with a centerY layout should also animate margin-top", function () {
+    stop(2000);
+
+    SC.RunLoop.begin();
+    view.adjust({ top: null, centerY: 0 });
+    view.animate({ height: 10 }, { duration: 1 });
+    SC.RunLoop.end();
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'height 1s ease 0s, margin-top 1s ease 0s', 'should add height and margin-top transitions');
+      equals(view.get('layout').height, 10, 'height');
+      equals(view.get('layout').centerY, 0, 'centerY');
+
+      start();
+    }, 5);
+  });
+
+  test("animating width with a centerX layout should also animate margin-left", function () {
+    stop(2000);
+
+    SC.RunLoop.begin();
+    view.adjust({ left: null, centerX: 0 });
+    view.animate({ width: 10 }, { duration: 1 });
+    SC.RunLoop.end();
+
+    setTimeout(function () {
+      equals(transitionFor(view), 'width 1s ease 0s, margin-left 1s ease 0s', 'should add width and margin-left transitions');
+      equals(view.get('layout').width, 10, 'width');
+      equals(view.get('layout').centerX, 0, 'centerX');
+
+      start();
+    }, 5);
   });
 
   // Pretty sure this does the job
-  test("callbacks should be called only once for a grouped animation", function(){
+  test("callbacks should be called only once for a grouped animation", function () {
     stop(2000);
     var stopped = true;
 
     expect(1);
 
-    SC.RunLoop.begin();
-    view.invokeLater('animate', 1, { top: 100, left: 100 }, 0.250, function(data) {
-      if (stopped) {
-        stopped = false;
-        // Continue on in a short moment.  Before the test times out, but after
-        // enough time for a second callback to possibly come in.
-        setTimeout(function() {
-          start();
-        }, 100);
-      }
-
-      ok(true, 'callback called back');
+    SC.run(function () {
+      view.animate({ top: 100, left: 100, width: 400 }, { duration: 0.5 }, function () {
+        ok(stopped, 'callback called back');
+        if (stopped) {
+          stopped = false;
+          // Continue on in a short moment.  Before the test times out, but after
+          // enough time for a second callback to possibly come in.
+          setTimeout(function () {
+            start();
+          }, 200);
+        }
+      });
     });
-    SC.RunLoop.end();
   });
 
   // This behavior should be up for debate.  Does the callback call immediately, or does it wait until the end of
   // the specified animation period?  Currently we're calling it immediately.
-  test("callback should be called immediately when a property is animated to its current value.", function() {
-
+  test("callback should be called immediately when a property is animated to its current value.", function () {
     stop(2000);
 
     expect(1);
 
-    SC.RunLoop.begin();
-    view.invokeLater('animate', 1, 'top', view.getPath('layout.top'), 0.250, function(){
-      ok(true, 'callback called back');
-      start();
+    SC.run(function () {
+      view.animate('top', view.getPath('layout.top'), { duration: 0.5 }, function () {
+        ok(true, 'callback called back');
+
+        start();
+      });
     });
-    SC.RunLoop.end();
   });
 
-  test("callback should be called when a property is animated with a duration of zero.", function() {
+  test("callback should be called when a property is animated with a duration of zero.", function () {
     stop(2000);
 
     expect(1);
 
     SC.RunLoop.begin();
-    view.invokeLater('animate', 1, 'top', 20, 0, function(){
+    view.animate('top', 20, { duration: 0 }, function () {
       ok(true, 'callback called back');
       start();
     });
     SC.RunLoop.end();
   });
 
-  test("multiple animations should be able to run simultaneously", function() {
+  test("multiple animations should be able to run simultaneously", function () {
     stop(2000);
 
     expect(2);
 
-    SC.RunLoop.begin();
-    view.invokeLater('animate', 1, 'top', 100, 0.250, function(){
-      ok(true, 'top finished');
-    });
-    view.invokeLater('animate', 2, 'left', 100, 0.500, function(){
-      ok(true, 'left finished');
-      start();
+    SC.run(function () {
+      view.animate('top', 100, { duration: 0.25 }, function () {
+        ok(true, 'top finished');
+      });
+
+      view.animate('left', 100, { duration: 0.5 }, function () {
+        ok(true, 'left finished');
+        start();
+      });
     });
-    SC.RunLoop.end();
   });
 
-  test("altering existing animation should call callback as cancelled", function(){
+  test("altering existing animation should call callback as cancelled", function () {
     stop(2000);
 
-    expect(2);
+    var order = 0;
+    expect(6);
 
-    SC.RunLoop.begin();
-    view.invokeLater('animate', 1, 'top', 100, 0.500, function(data){
-      equals(data.isCancelled, true, 'first cancelled');
-    });
-    view.invokeLater('animate', 250, 'top', 0, 0.500, function(data){
-      equals(data.isCancelled, false, 'second not cancelled');
-      start();
+    SC.run(function () {
+      view.animate('top', 100, { duration: 0.5 }, function (data) {
+        // Test the order to ensure that this is the proper callback that is used.
+        equals(order, 0, 'should be called first');
+        order = 1;
+        equals(data.isCancelled, true, 'first cancelled');
+      });
+
+      // Test calling animate twice in the same run loop.
+      view.animate('top', 100, { duration: 0.75 }, function (data) {
+        // Test the order to ensure that this is the proper callback that is used.
+        equals(order, 1, 'should be called second');
+        order = 2;
+        equals(data.isCancelled, true, 'second cancelled');
+      });
     });
-    SC.RunLoop.end();
+
+    setTimeout(function () {
+      SC.run(function () {
+        view.animate('top', 0, { duration: 0.75 }, function (data) {
+          // Test the order to ensure that this is the proper callback that is used.
+          equals(order, 2, 'should be called third');
+          equals(data.isCancelled, false, 'third not cancelled');
+          start();
+        });
+      });
+    }, 100);
   });
 
-  test("should not cancel callback when value hasn't changed", function() {
+  test("should not cancel callback when value hasn't changed", function () {
     var callbacks = 0, wasCancelled = NO, check = 0;
     stop(2000);
 
-    SC.RunLoop.begin();
-    view.invokeLater(function() {
+    SC.run(function () {
       // this triggers the initial layoutStyle code
-      view.animate('left', 79, 0.500, function(data) {
+      view.animate('left', 79, { duration: 0.5 }, function (data) {
         callbacks++;
         wasCancelled = data.isCancelled;
       });
+
       // this triggers a re-render, re-running the layoutStyle code
       view.displayDidChange();
-    }, 1);
-    SC.RunLoop.end();
+    });
 
-    setTimeout(function() {
+    setTimeout(function () {
       // capture the callbacks value
       check = callbacks;
     }, 250);
 
-    setTimeout(function() {
-      start();
+    setTimeout(function () {
       equals(check, 0, "the callback should not have been cancelled initially");
       equals(callbacks, 1, "the callback should have been fired");
       equals(wasCancelled, NO, "the callback should not have been cancelled");
+
+      start();
     }, 1000);
   });
 
-  /**
-    There was a bug in animation that once one property was animated, a null
-    version of it existed in _activeAnimations, such that when another property
-    was animated it would throw an exception iterating through _activeAnimations
-    and not expecting a null value.
-    */
-  test("animating different attributes at different times should not throw an error" , function(){
+  // There was a bug in animation that once one property was animated, a null
+  // version of it existed in _activeAnimations, such that when another property
+  // was animated it would throw an exception iterating through _activeAnimations
+  // and not expecting a null value.
+  test("animating different attributes at different times should not throw an error", function () {
     // Run test.
     stop(2000);
 
     expect(0);
 
     // Override and wrap the problematic method to capture the error.
-    view.layoutStyleCalculator.transitionDidEnd = function() {
+    view.transitionDidEnd = function () {
       try {
-        SC.View.LayoutStyleCalculator.prototype.transitionDidEnd.apply(this, arguments);
+        SC.View.prototype.transitionDidEnd.apply(this, arguments);
         ok(true);
       } catch (ex) {
         ok(false);
@@ -253,190 +370,488 @@ if (SC.platform.supportsCSSTransitions) {
     };
 
     SC.RunLoop.begin();
-    // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater(function() {
-      view.animate('left', 75, 0.2);
-    }, 1);
+    view.animate('left', 75, { duration: 0.2 });
     SC.RunLoop.end();
 
-    setTimeout(function() {
+    setTimeout(function () {
       SC.RunLoop.begin();
-      view.animate('top', 50, 0.2);
+      view.animate('top', 50, { duration: 0.2 });
       SC.RunLoop.end();
     }, 400);
 
-    setTimeout(function() {
+    setTimeout(function () {
       start();
     }, 1000);
   });
 
-  test("should handle transform attributes", function(){
-    SC.RunLoop.begin();
-    view.animate('rotateX', 45, { duration: 1 });
-    SC.RunLoop.end();
-    equals(transitionFor(view), '-'+SC.platform.cssPrefix+'-transform 1s linear', 'add transition');
-    equals(styleFor(view)[SC.platform.domCSSPrefix+'Transform'], 'rotateX(45deg)', 'has both transforms');
-    equals(45, view.get('layout').rotateX, 'rotateX is 45deg');
+  test("should handle transform attributes", function () {
+    stop(2000);
+
+    SC.run(function () {
+      view.animate('rotateX', 45, { duration: 1 });
+    });
+
+    setTimeout(function () {
+      equals(transitionFor(view), SC.browser.experimentalCSSNameFor('transform') + ' 1s ease 0s', 'add transition');
+      equals(styleFor(view)[SC.browser.experimentalStyleNameFor('transform')], 'rotateX(45deg)', 'has both transforms');
+      equals(45, view.get('layout').rotateX, 'rotateX is 45deg');
+
+      start();
+    }, 50);
   });
 
-  test("should handle conflicting transform animations", function(){
-    expect(5);
+  test("should handle conflicting transform animations", function () {
+    /*global console*/
+    stop(2000);
 
     var originalConsoleWarn = console.warn;
-    console.warn = function(warning){
-      equals(warning, "Can't animate transforms with different durations! Using first duration specified.", "proper warning");
+    console.warn = function (warning) {
+      equals(warning, "Developer Warning: Can't animate transforms with different durations, timings or delays! Using the first options specified.", "proper warning");
     };
 
-    SC.RunLoop.begin();
-    view.animate('rotateX', 45, 1).animate('scale', 2, 2);
-    SC.RunLoop.end();
+    SC.run(function () {
+      view.animate('rotateX', 45, { duration: 1 }).animate('scale', 2, { duration: 2 });
+    });
 
-    equals(transitionFor(view), '-'+SC.platform.cssPrefix+'-transform 1s linear', 'use duration of first');
-    equals(styleFor(view)[SC.platform.domCSSPrefix+'Transform'], 'rotateX(45deg) scale(2)');
-    equals(45, view.get('layout').rotateX, 'rotateX is 45deg');
-    equals(2, view.get('layout').scale, 'scale is 2');
+    setTimeout(function () {
+      expect(5);
 
-    console.warn = originalConsoleWarn;
-  });
+      equals(transitionFor(view), SC.browser.experimentalCSSNameFor('transform') + ' 1s ease 0s', 'use duration of first');
+      equals(styleFor(view)[SC.browser.experimentalStyleNameFor('transform')], 'rotateX(45deg) scale(2)');
+      equals(45, view.get('layout').rotateX, 'rotateX is 45deg');
+      equals(2, view.get('layout').scale, 'scale is 2');
 
-  test("should properly handle callbacks from conflicting transforms");
+      console.warn = originalConsoleWarn;
 
-  test("removes animation property when done", function(){
+      start();
+    }, 25);
+  });
+
+  test("removes animation property when done", function () {
     stop(2000);
 
     SC.RunLoop.begin();
-    view.invokeLater('animate', 1000, { top: 100, scale: 2 }, 0.500);
+    view.animate({ top: 100, scale: 2 }, { duration: 0.5 });
     SC.RunLoop.end();
 
-    setTimeout(function(){
-      start();
+    setTimeout(function () {
       equals(view.get('layout').animateTop, undefined, "animateTop is undefined");
       equals(view.get('layout').animateScale, undefined, "animateScale is undefined");
+
+      start();
     }, 1000);
   });
 
-  module("ANIMATION WITH ACCELERATED LAYER", {
-    setup: function(){
-      commonSetup.setup();
-      view.wantsAcceleratedLayer = YES;
-    },
+  test("Test that cancelAnimation() removes the animation style and fires the callback with isCancelled set.", function () {
+    stop(2000);
 
-    teardown: commonSetup.teardown
-  });
+    expect(7);
 
-  test("handles acceleration when appropriate", function(){
-    SC.RunLoop.begin();
-    view.animate('top', 100, 1);
-    SC.RunLoop.end();
-    equals(transitionFor(view), '-'+SC.platform.cssPrefix+'-transform 1s linear', 'transition is on transform');
-  });
+    SC.run(function () {
+      view.animate({ left: 100 }, { duration: 0.5 }, function (data) {
+        ok(data.isCancelled, "The isCancelled property of the data should be true.");
+      });
+    });
 
-  test("doesn't use acceleration when not appropriate", function(){
-    SC.RunLoop.begin();
-    view.adjust({ height: null, bottom: 0 });
-    view.animate('top', 100, 1);
-    SC.RunLoop.end();
-    equals(transitionFor(view), 'top 1s linear', 'transition is not on transform');
-  });
+    setTimeout(function () {
+      SC.run(function () {
+        var style = styleFor(view);
 
-  test("combines accelerated layer animation with compatible transform animations", function(){
-    SC.RunLoop.begin();
-    view.animate('top', 100, 1).animate('rotateX', 45, 1);
-    SC.RunLoop.end();
+        equals(style.left, '100px', 'Tests the left style after animate');
+        equals(style.top, '0px', 'Tests the top style after animate');
+        equals(transitionFor(view), 'left 0.5s ease 0s', 'Tests the CSS transition property');
+        view.cancelAnimation();
+      });
+    }, 5);
 
-    var transform = styleFor(view)[SC.platform.domCSSPrefix+'Transform'];
+    setTimeout(function () {
+      var style = styleFor(view);
 
-    // We need to check these separately because in some cases we'll also have translateZ, this way we don't have to worry about it
-    ok(transform.match(/translateX\(0px\) translateY\(100px\)/), 'has translate');
-    ok(transform.match(/rotateX\(45deg\)/), 'has rotateX');
+      equals(style.left, '100px', 'Tests the left style after cancel');
+      equals(style.top, '0px', 'Tests the top style after cancel');
+      equals(transitionFor(view), '', 'Tests the CSS transition property');
+      start();
+    }, 50);
   });
 
-  test("should not use accelerated layer if other transforms are being animated at different speeds", function(){
-    SC.RunLoop.begin();
-    view.animate('rotateX', 45, 2).animate('top', 100, 1);
-    SC.RunLoop.end();
+  test("Test that cancelAnimation(SC.LayoutState.CURRENT) removes the animation style, stops at the current position and fires the callback with isCancelled set.", function () {
+    stop(2000);
+
+    expect(9);
+
+    SC.run(function () {
+      view.animate({ left: 100, top: 100, width: 400 }, { duration: 0.5 }, function (data) {
+        ok(data.isCancelled, "The isCancelled property of the data should be true.");
+      });
+    });
+
+    setTimeout(function () {
+      SC.run(function () {
+        var style = styleFor(view);
 
-    var style = styleFor(view);
+        equals(style.left, '100px', 'Tests the left style after animate');
+        equals(style.top, '100px', 'Tests the top style after animate');
+        equals(style.width, '400px', 'Tests the width style after animate');
+        equals(transitionFor(view), 'left 0.5s ease 0s, top 0.5s ease 0s, width 0.5s ease 0s', 'Tests the CSS transition property');
+        view.cancelAnimation(SC.LayoutState.CURRENT);
+      });
+    }, 100);
 
-    equals(style[SC.platform.domCSSPrefix+'Transform'], 'rotateX(45deg)', 'transform should only have rotateX');
-    equals(style['top'], '100px', 'should not accelerate top');
+    setTimeout(function () {
+      var style = styleFor(view);
+
+      ok((parseInt(style.left, 10) > 0) && (parseInt(style.left, 10) < 100), 'Tests the left style after cancel');
+      ok((parseInt(style.top, 10) > 0) && (parseInt(style.top, 10) < 100), 'Tests the top style after cancel');
+      ok((parseInt(style.width, 10) > 100) && (parseInt(style.width, 10) < 400), 'Tests the width style after cancel');
+      equals(transitionFor(view), '', 'Tests the CSS transition property');
+      start();
+    }, 200);
   });
 
-  test("callbacks should work properly with acceleration", function(){
+  test("Test that cancelAnimation(SC.LayoutState.START) removes the animation style, returns to the start position and fires the callback with isCancelled set.", function () {
     stop(2000);
-    var stopped = true;
 
-    expect(1);
+    expect(9);
+
+    SC.run(function () {
+      view.animate({ left: 100, top: 100, width: 400 }, { duration: 0.5 }, function (data) {
+        ok(data.isCancelled, "The isCancelled property of the data should be true.");
+      });
+    });
+
+    setTimeout(function () {
+      SC.run(function () {
+        var style = styleFor(view);
+
+        equals(style.left, '100px', 'Tests the left style after animate');
+        equals(style.top, '100px', 'Tests the top style after animate');
+        equals(style.width, '400px', 'Tests the width style after animate');
+        equals(transitionFor(view), 'left 0.5s ease 0s, top 0.5s ease 0s, width 0.5s ease 0s', 'Tests the CSS transition property');
+        view.cancelAnimation(SC.LayoutState.START);
+      });
+    }, 100);
+
+    setTimeout(function () {
+      var style = styleFor(view);
+
+      equals(style.left, '0px', 'Tests the left style after cancel');
+      equals(style.top, '0px', 'Tests the top style after cancel');
+      equals(style.width, '100px', 'Tests the width style after animate');
+      equals(transitionFor(view), '', 'Tests the CSS transition property');
+      start();
+    }, 200);
+  });
+
+  if (SC.platform.supportsCSS3DTransforms) {
+    module("ANIMATION WITH ACCELERATED LAYER", {
+      setup: function () {
+        commonSetup.setup(YES);
+      },
+
+      teardown: commonSetup.teardown
+    });
+
+    test("handles acceleration when appropriate", function () {
+      stop(2000);
+
+      SC.RunLoop.begin();
+      view.animate('top', 100, { duration: 1 });
+      SC.RunLoop.end();
+
+      setTimeout(function () {
+        equals(transitionFor(view), SC.browser.experimentalCSSNameFor('transform') + ' 1s ease 0s', 'transition is on transform');
 
-    SC.RunLoop.begin();
-    // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater('animate', 1, { top: 100, left: 100, scale: 2 }, 0.500, function(data) {
-      if (stopped) {
         start();
-        stopped = false;
-      }
+      }, 5);
+    });
+
+    test("doesn't use acceleration when not appropriate", function () {
+      stop(1000);
+
+      SC.RunLoop.begin();
+      view.adjust({ height: null, bottom: 0 });
+      view.animate('top', 100, { duration: 1 });
+      SC.RunLoop.end();
 
-      ok(true);
+      setTimeout(function () {
+        equals(transitionFor(view), 'top 1s ease 0s', 'transition is not on transform');
+
+        start();
+      }, 5);
     });
-    SC.RunLoop.end();
-  });
 
-  test("should not add animation for properties that have the same value as existing layout", function() {
-    var callbacks = 0;
+    test("combines accelerated layer animation with compatible transform animations", function () {
+      stop(1000);
 
-    SC.RunLoop.begin();
-    // we set width to the same value, but we change height
-    view.invokeLater('animate', 1, {width: 100, height: 50}, 0.5, function() { callbacks++; });
-    SC.RunLoop.end();
+      SC.RunLoop.begin();
+      view.animate('top', 100, { duration: 1 }).animate('rotateX', 45, { duration: 1 });
+      SC.RunLoop.end();
 
-    ok(callbacks === 0, "precond - callback should not have been run yet");
+      setTimeout(function () {
+        var transform = styleFor(view)[SC.browser.experimentalStyleNameFor('transform')];
 
-    stop(2000);
+        // We need to check these separately because in some cases we'll also have translateZ, this way we don't have to worry about it
+        ok(transform.match(/translateX\(0px\) translateY\(100px\)/), 'has translate');
+        ok(transform.match(/rotateX\(45deg\)/), 'has rotateX');
 
-    // we need to test changing the width at a later time
-    setTimeout(function() {
-      start();
+        start();
+      }, 5);
+    });
 
-      equals(callbacks, 1, "callback should have been run once, for height change");
+    test("should not use accelerated layer if other transforms are being animated at different speeds", function () {
+      stop(1000);
 
       SC.RunLoop.begin();
-      view.animate('width', 50, 0.5);
+      view.animate('rotateX', 45, { duration: 2 }).animate('top', 100, { duration: 1 });
       SC.RunLoop.end();
 
-      equals(callbacks, 1, "callback should still have only been called once, even though width has now been animated");
-    }, 1000);
-  });
+      setTimeout(function () {
+        var style = styleFor(view);
+
+        equals(style[SC.browser.experimentalStyleNameFor('transform')], 'rotateX(45deg)', 'transform should only have rotateX');
+        equals(style.top, '100px', 'should not accelerate top');
+
+        start();
+      }, 5);
+    });
+
+    test("callbacks should work properly with acceleration", function () {
+      stop(1000);
+
+      SC.run(function () {
+        view.animate({ top: 100, left: 100, scale: 2 }, { duration: 0.25 }, function () {
+          ok(true);
+
+          start();
+        });
+      });
+    });
+
+    test("should not add animation for properties that have the same value as existing layout", function () {
+      var callbacks = 0;
+
+      SC.RunLoop.begin();
+      // we set width to the same value, but we change height
+      view.animate({width: 100, height: 50}, { duration: 0.5 }, function () { callbacks++; });
+      SC.RunLoop.end();
+
+      ok(callbacks === 0, "precond - callback should not have been run yet");
+
+      stop(2000);
+
+      // we need to test changing the width at a later time
+      setTimeout(function () {
+        start();
+
+        equals(callbacks, 1, "callback should have been run once, for height change");
+
+        SC.RunLoop.begin();
+        view.animate('width', 50, { duration: 0.5 });
+        SC.RunLoop.end();
+
+        equals(callbacks, 1, "callback should still have only been called once, even though width has now been animated");
+      }, 1000);
+    });
+
+    test("Test that cancelAnimation() removes the animation style and fires the callback with isCancelled set.", function () {
+      stop(2000);
+
+      SC.run(function () {
+        view.animate({ left: 100, top: 100, width: 400 }, { duration: 0.5 }, function (data) {
+          ok(data.isCancelled, "The isCancelled property of the data should be true.");
+        });
+      });
+
+      setTimeout(function () {
+        SC.run(function () {
+          var style = styleFor(view),
+          transform = style[SC.browser.experimentalStyleNameFor('transform')];
+          transform = transform.match(/\d+/g);
+
+          // We need to check these separately because in some cases we'll also have translateZ, this way we don't have to worry about it
+          equals(transform[0], '100',  "Test translateX after animate.");
+          equals(transform[1], '100',  "Test translateY after animate.");
+
+          equals(transitionFor(view), SC.browser.experimentalCSSNameFor('transform') + ' 0.5s ease 0s, width 0.5s ease 0s', 'Tests the CSS transition property');
+
+          equals(style.left, '0px', 'Tests the left style after animate');
+          equals(style.top, '0px', 'Tests the top style after animate');
+          equals(style.width, '400px', 'Tests the width style after animate');
+
+          view.cancelAnimation();
+        });
+      }, 250);
+
+      setTimeout(function () {
+        var style = styleFor(view);
+        equals(style.width, '400px', 'Tests the width style after cancel');
+
+        var transform = style[SC.browser.experimentalStyleNameFor('transform')];
+        transform = transform.match(/\d+/g);
+
+        equals(transform[0], '100',  "Test translateX after cancel.");
+        equals(transform[1], '100',  "Test translateY after cancel.");
+
+        equals(transitionFor(view), '', 'Tests that there is no CSS transition property after cancel');
+
+        start();
+      }, 350);
+    });
+
+    test("Test that cancelAnimation(SC.LayoutState.CURRENT) removes the animation style, stops at the current position and fires the callback with isCancelled set.", function () {
+      stop(2000);
+
+
+      SC.run(function () {
+        view.animate({ left: 200, top: 200, width: 400 }, { duration: 1 }, function (data) {
+          ok(data.isCancelled, "The isCancelled property of the data should be true.");
+        });
+      });
+
+      setTimeout(function () {
+        SC.run(function () {
+          var style = styleFor(view),
+          transform = style[SC.browser.experimentalStyleNameFor('transform')];
+          transform = transform.match(/\d+/g);
+
+          // We need to check these separately because in some cases we'll also have translateZ, this way we don't have to worry about it
+          equals(transform[0], '200',  "Test translateX after animate.");
+          equals(transform[1], '200',  "Test translateY after animate.");
+          equals(transitionFor(view), SC.browser.experimentalCSSNameFor('transform') + ' 1s ease 0s, width 1s ease 0s', 'Tests the CSS transition property');
+
+          equals(style.left, '0px', 'Tests the left style after animate');
+          equals(style.top, '0px', 'Tests the top style after animate');
+          equals(style.width, '400px', 'Tests the width style after animate');
 
-  test("should warn if multiple callbacks for transitions");
+          view.cancelAnimation(SC.LayoutState.CURRENT);
+        });
+      }, 250);
 
+      setTimeout(function () {
+        var style = styleFor(view),
+          layout = view.get('layout');
+
+        equals(transitionFor(view), '', 'Tests that there is no CSS transition property after cancel');
+
+        // We need to check these separately because in some cases we'll also have translateZ, this way we don't have to worry about it
+        ok((layout.left > 0) && (layout.left < 200), 'Tests the left style, %@, after cancel is greater than 0 and less than 200'.fmt(style.left));
+        ok((layout.top > 0) && (layout.top < 200), 'Tests the top style, %@, after cancel is greater than 0 and less than 200'.fmt(style.top));
+        ok((parseInt(style.width, 10) > 100) && (parseInt(style.width, 10) < 400), 'Tests the width style, %@, after cancel is greater than 100 and less than 400'.fmt(style.width));
+        start();
+      }, 750);
+    });
+
+    test("Test that cancelAnimation(SC.LayoutState.START) removes the animation style, goes back to the start position and fires the callback with isCancelled set.", function () {
+      stop(2000);
+
+      // expect(12);
+
+      SC.run(function () {
+        view.animate({ left: 100, top: 100, width: 400 }, { duration: 0.5 }, function (data) {
+          ok(data.isCancelled, "The isCancelled property of the data should be true.");
+        });
+      });
+
+      setTimeout(function () {
+        SC.run(function () {
+          var style = styleFor(view),
+          transform = style[SC.browser.experimentalStyleNameFor('transform')];
+          equals(style.left, '0px', 'Tests the left style after animate');
+          equals(style.top, '0px', 'Tests the top style after animate');
+          equals(style.width, '400px', 'Tests the width style after animate');
+
+          transform = transform.match(/\d+/g);
+
+          // We need to check these separately because in some cases we'll also have translateZ, this way we don't have to worry about it
+          equals(transform[0], '100',  "Test translateX after animate.");
+          equals(transform[1], '100',  "Test translateY after animate.");
+
+          equals(transitionFor(view), SC.browser.experimentalCSSNameFor('transform') + ' 0.5s ease 0s, width 0.5s ease 0s', 'Tests the CSS transition property');
+          view.cancelAnimation(SC.LayoutState.START);
+        });
+      }, 250);
+
+      setTimeout(function () {
+        var style = styleFor(view);
+
+        var transform = style[SC.browser.experimentalStyleNameFor('transform')];
+        transform = transform.match(/\d+/g);
+
+        equals(transitionFor(view), '', 'Tests that there is no CSS transition property after cancel');
+
+        // We need to check these separately because in some cases we'll also have translateZ, this way we don't have to worry about it
+        equals(transform[0], '0',  "Test translateX after cancel.");
+        equals(transform[1], '0',  "Test translateY after cancel.");
+        equals(style.width, '100px', 'Tests the width style after cancel');
+        start();
+      }, 350);
+    });
+  } else {
+    test("This platform appears to not support CSS 3D transforms.");
+  }
+} else {
+  test("This platform appears to not support CSS transitions.");
 }
 
 module("ANIMATION WITHOUT TRANSITIONS", {
-  setup: function(){
+  setup: function () {
     commonSetup.setup();
     SC.platform.supportsCSSTransitions = NO;
   },
 
-  teardown: function(){
+  teardown: function () {
     commonSetup.teardown();
     SC.platform.supportsCSSTransitions = originalSupportsTransitions;
   }
 });
 
-test("should update layout", function(){
-  view.animate('left', 100, 1);
-  equals(100, view.get('layout').left, 'left is 100');
+test("should update layout", function () {
+  stop(2000);
+  SC.RunLoop.begin();
+  view.animate('left', 100, { duration: 1 });
+  SC.RunLoop.end();
+
+  setTimeout(function () {
+    equals(view.get('layout').left, 100, 'left is 100');
+    start();
+  }, 5);
 });
 
-test("should still run callback", function(){
+test("should still run callback", function () {
   stop(2000);
 
   expect(1);
 
   SC.RunLoop.begin();
-  view.animate({ top: 200, left: 100 }, 1, function() {
+  view.animate({ top: 200, left: 100 }, { duration: 1 }, function () {
     ok(true, "callback called");
     start();
   });
   SC.RunLoop.end();
 });
+
+module("Animating in the next run loop", commonSetup);
+
+test("Calling animate while flusing the invokeNext queue should not throw an exception", function () {
+  try {
+    SC.run(function () {
+      view.invokeNext(function () {
+        this.animate({ top: 250 }, { duration: 1 });
+      });
+
+      view.animate({ top: 200 }, { duration: 1 });
+    });
+
+    SC.run(function () {
+      // The first call to _animate and the function with animate in it run.
+    });
+
+    SC.run(function () {
+      // The second call to _animate from the function with animate in it.
+    });
+  } catch (ex) {
+    ok(false, "failure");
+  }
+
+  ok(true, "success");
+});