sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/cursor.js

@@ -6,126 +6,141 @@
 // ==========================================================================
 
 // standard browser cursor definitions
-SC.SYSTEM_CURSOR = 'default' ;
-SC.AUTO_CURSOR = SC.DEFAULT_CURSOR = 'auto' ;
-SC.CROSSHAIR_CURSOR = 'crosshair' ;
-SC.HAND_CURSOR = SC.POINTER_CURSOR = 'pointer' ;
-SC.MOVE_CURSOR = 'move' ;
-SC.E_RESIZE_CURSOR = 'e-resize' ;
-SC.NE_RESIZE_CURSOR = 'ne-resize' ;
-SC.NW_RESIZE_CURSOR = 'nw-resize' ;
-SC.N_RESIZE_CURSOR = 'n-resize' ;
-SC.SE_RESIZE_CURSOR = 'se-resize' ;
-SC.SW_RESIZE_CURSOR = 'sw-resize' ;
-SC.S_RESIZE_CURSOR = 's-resize' ;
-SC.W_RESIZE_CURSOR = 'w-resize' ;
-SC.IBEAM_CURSOR = SC.TEXT_CURSOR = 'text' ;
-SC.WAIT_CURSOR = 'wait' ;
-SC.HELP_CURSOR = 'help' ;
+// TODO: remove extra constants in next version
+// TODO: consider adding theme cursors for custom behaviors like drag & drop
+SC.SYSTEM_CURSOR = SC.DEFAULT_CURSOR = 'default';
+SC.AUTO_CURSOR = 'auto';
+SC.CROSSHAIR_CURSOR = 'crosshair';
+SC.HAND_CURSOR = SC.POINTER_CURSOR = 'pointer';
+SC.MOVE_CURSOR = 'move';
+SC.E_RESIZE_CURSOR = 'e-resize';
+SC.NE_RESIZE_CURSOR = 'ne-resize';
+SC.NW_RESIZE_CURSOR = 'nw-resize';
+SC.N_RESIZE_CURSOR = 'n-resize';
+SC.SE_RESIZE_CURSOR = 'se-resize';
+SC.SW_RESIZE_CURSOR = 'sw-resize';
+SC.S_RESIZE_CURSOR = 's-resize';
+SC.W_RESIZE_CURSOR = 'w-resize';
+SC.IBEAM_CURSOR = SC.TEXT_CURSOR = 'text';
+SC.WAIT_CURSOR = 'wait';
+SC.HELP_CURSOR = 'help';
 
 /**
   @class SC.Cursor
 
-  A Cursor object is used to synchronize the cursor used by multiple views at 
+  A Cursor object is used to synchronize the cursor used by multiple views at
   the same time. For example, thumb views within a split view acquire a cursor
-  instance from the split view and set it as their cursor. The split view is 
+  instance from the split view and set it as their cursor. The split view is
   able to update its cursor object to reflect the state of the split view.
-  Because cursor objects are implemented internally with CSS, this is a very 
+  Because cursor objects are implemented internally with CSS, this is a very
   efficient way to update the same cursor for a group of view objects.
-  
-  Note: This object creates an anonymous CSS class to represent the cursor. 
+
+  Note: This object creates an anonymous CSS class to represent the cursor.
   The anonymous CSS class is automatically added by SproutCore to views that
-  have the cursor object set as "their" cursor. Thus, all objects attached to 
+  have the cursor object set as "their" cursor. Thus, all objects attached to
   the same cursor object will have their cursors updated simultaneously with a
   single DOM call.
-  
+
   @extends SC.Object
 */
 SC.Cursor = SC.Object.extend(
 /** @scope SC.Cursor.prototype */ {
-  
+
   /** @private */
-  init: function() {
-    sc_super() ;
-    
+  init: function () {
+    sc_super();
+
     // create a unique style rule and add it to the shared cursor style sheet
-    var cursorStyle = this.get('cursorStyle') || SC.DEFAULT_CURSOR ,
-        ss = this.constructor.sharedStyleSheet(),
-        guid = SC.guidFor(this);
-    
+    var cursorStyle = this.get('cursorStyle') || SC.DEFAULT_CURSOR,
+      ss = this.constructor.sharedStyleSheet(),
+      guid = SC.guidFor(this);
+
     if (ss.insertRule) { // WC3
       ss.insertRule(
-        '.'+guid+' {cursor: '+cursorStyle+';}',
+        '.' + guid + ' {cursor: ' + cursorStyle + ';}',
         ss.cssRules ? ss.cssRules.length : 0
-      ) ;
+      );
     } else if (ss.addRule) { // IE
-      ss.addRule('.'+guid, 'cursor: '+cursorStyle) ;
+      ss.addRule('.' + guid, 'cursor: ' + cursorStyle);
     }
-    
-    this.cursorStyle = cursorStyle ;
-    this.className = guid ; // used by cursor clients...
-    return this ;
+
+    this.cursorStyle = cursorStyle;
+    this.className = guid; // used by cursor clients...
+    return this;
   },
-  
+
   /**
     This property is the connection between cursors and views. The default
     SC.View behavior is to add this className to a view's layer if it has
     its cursor property defined.
-    
+
     @readOnly
-    @property {String} the css class name updated by this cursor
+    @type String the css class name updated by this cursor
   */
   className: null,
-  
+
   /**
-    @property {String} the cursor value, can be 'url("path/to/cursor")'
+    @type String the cursor value, can be 'url("path/to/cursor")'
   */
   cursorStyle: SC.DEFAULT_CURSOR,
-  
+
   /** @private */
-  cursorStyleDidChange: function() {
+  cursorStyleDidChange: function () {
     var cursorStyle, rule, selector, ss, rules, idx, len;
     cursorStyle = this.get('cursorStyle') || SC.DEFAULT_CURSOR;
     rule = this._rule;
     if (rule) {
-      rule.style.cursor = cursorStyle ; // fast path
-      return ;
+      rule.style.cursor = cursorStyle; // fast path
+      return;
     }
-    
+
     // slow path, taken only once
-    selector = '.'+this.get('className') ;
-    ss = this.constructor.sharedStyleSheet() ;
-    rules = (ss.cssRules ? ss.cssRules : ss.rules) || [] ;
-    
+    selector = '.' + this.get('className');
+    ss = this.constructor.sharedStyleSheet();
+    rules = (ss.cssRules ? ss.cssRules : ss.rules) || [];
+
     // find our rule, cache it, and update the cursor style property
-    for (idx=0, len = rules.length; idx<len; ++idx) {
-      rule = rules[idx] ;
+    for (idx = 0, len = rules.length; idx < len; ++idx) {
+      rule = rules[idx];
       if (rule.selectorText === selector) {
-        this._rule = rule ; // cache for next time
-        rule.style.cursor = cursorStyle ; // update the cursor
-        break ;
+        this._rule = rule; // cache for next time
+        rule.style.cursor = cursorStyle; // update the cursor
+        break;
       }
     }
   }.observes('cursorStyle')
-  
+
   // TODO implement destroy
-  
+
 });
 
+
 /** @private */
-SC.Cursor.sharedStyleSheet = function() {
-  var head, ss = this._styleSheet ;
+SC.Cursor.sharedStyleSheet = function () {
+  var ssEl,
+    head,
+    ss = this._styleSheet;
+
   if (!ss) {
     // create the stylesheet object the hard way (works everywhere)
-    ss = document.createElement('style') ;
-    ss.type = 'text/css' ;
-    head = document.getElementsByTagName('head')[0] ;
-    if (!head) head = document.documentElement ; // fix for Opera
-    head.appendChild(ss) ;
-    
-    // get the actual stylesheet object, not the DOM element
-    ss = document.styleSheets[document.styleSheets.length-1] ;
-    this._styleSheet = ss ;
+    ssEl = document.createElement('style');
+    head = document.getElementsByTagName('head')[0];
+    if (!head) head = document.documentElement; // fix for Opera
+    head.appendChild(ssEl);
+
+    // Get the actual stylesheet object, not the DOM element.  We expect it to
+    // be the last stylesheet in the document, but test to make sure no other
+    // stylesheet has appeared.
+    for (var i = document.styleSheets.length - 1; i >= 0; i--) {
+      ss = document.styleSheets[i];
+
+      if (ss.ownerNode === ssEl) {
+        // We've found the proper stylesheet.
+        this._styleSheet = ss;
+        break;
+      }
+    }
   }
-  return ss ;
+
+  return ss;
 };

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/device.js

@@ -15,49 +15,49 @@ SC.LANDSCAPE_ORIENTATION = 'landscape';
 SC.NO_ORIENTATION = 'desktop'; // value 'desktop' for backwards compatibility
 
 /**
-  The device object allows you to check device specific properties such as 
-  orientation and if the device is offline, as well as observe when they change 
+  The device object allows you to check device specific properties such as
+  orientation and if the device is offline, as well as observe when they change
   state.
-  
+
   ## Orientation
   When a touch device changes orientation, the orientation property will be
   set accordingly which you can observe
-  
+
   ## Offline support
-  In order to build a good offline-capable web application, you need to know 
-  when your app has gone offline so you can for instance queue your server 
+  In order to build a good offline-capable web application, you need to know
+  when your app has gone offline so you can for instance queue your server
   requests for a later time or provide a specific UI/message.
-  
-  Similarly, you also need to know when your application has returned to an 
-  'online' state again, so that you can re-synchronize with the server or do 
+
+  Similarly, you also need to know when your application has returned to an
+  'online' state again, so that you can re-synchronize with the server or do
   anything else that might be needed.
-  
+
   By observing the 'isOffline' property you can be notified when this state
   changes. Note that this property is only connected to the navigator.onLine
   property, which is available on most modern browsers.
-  
+
 */
 SC.device = SC.Object.create({
-  
+
   /**
     Sets the orientation for touch devices, either SC.LANDSCAPE_ORIENTATION
     or SC.PORTRAIT_ORIENTATION. Will be SC.NO_ORIENTATION in the case of
     non-touch devices that are also not simulating touch events.
-  
-    @property {String}
+
+    @type String
     @default SC.NO_ORIENTATION
   */
   orientation: SC.NO_ORIENTATION,
-  
+
   /**
     Indicates whether the device is currently online or offline. For browsers
     that do not support this feature, the default value is NO.
-    
+
     Is currently inverse of the navigator.onLine property. Most modern browsers
-    will update this property when switching to or from the browser's Offline 
+    will update this property when switching to or from the browser's Offline
     mode, and when losing/regaining network connectivity.
-    
-    @property {Boolean}
+
+    @type Boolean
     @default NO
   */
   isOffline: NO,
@@ -66,7 +66,7 @@ SC.device = SC.Object.create({
     Returns a Point containing the last known X and Y coordinates of the
     mouse, if present.
 
-    @property {Point}
+    @type Point
   */
   mouseLocation: function() {
     var responder = SC.RootResponder.responder,
@@ -85,12 +85,12 @@ SC.device = SC.Object.create({
   */
   init: function() {
     sc_super();
-    
+
     if (navigator && navigator.onLine === false) {
       this.set('isOffline', YES);
     }
   },
-  
+
   /**
     As soon as the DOM is up and running, make sure we attach necessary
     event handlers
@@ -98,14 +98,14 @@ SC.device = SC.Object.create({
   setup: function() {
     var responder = SC.RootResponder.responder;
     responder.listenFor(['online', 'offline'], window, this);
-    
+
     this.orientationHandlingShouldChange();
   },
-  
+
   // ..........................................................
   // ORIENTATION HANDLING
   //
-  
+
   /**
     Determines which method to use for orientation changes.
     Either detects orientation changes via the current size
@@ -120,7 +120,7 @@ SC.device = SC.Object.create({
       this.orientationchange();
     }
   },
-  
+
   /**
     @param {Hash} newSize The new size of the window
     @returns YES if the method altered the orientation, NO otherwise
@@ -155,7 +155,7 @@ SC.device = SC.Object.create({
     }
     return NO;
   },
-  
+
   /**
     Called when the window.onorientationchange event is fired.
   */
@@ -168,33 +168,33 @@ SC.device = SC.Object.create({
       }
     });
   },
-  
+
   orientationObserver: function(){
     var body = SC.$(document.body),
         orientation = this.get('orientation');
-    
+
     if (orientation === SC.PORTRAIT_ORIENTATION) {
       body.addClass('portrait');
     } else {
       body.removeClass('portrait');
     }
-    
+
     if (orientation === SC.LANDSCAPE_ORIENTATION) {
       body.addClass('landscape');
     } else {
       body.removeClass('landscape');
     }
   }.observes('orientation'),
-  
-  
+
+
   // ..........................................................
   // CONNECTION HANDLING
-  // 
-  
+  //
+
   online: function(evt) {
     this.set('isOffline', NO);
   },
-  
+
   offline: function(evt) {
     this.set('isOffline', YES);
   }

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/event.js

@@ -784,7 +784,7 @@ SC.Event.prototype = {
     This allows a generic event handler to notice if you want to provide
     detailed control over how the browser handles the real event.
 
-    @property {Boolean}
+    @type Boolean
   */
   hasCustomEventHandling: NO,
 
@@ -875,7 +875,7 @@ SC.Event.prototype = {
   /**
     Always YES to indicate the event was normalized.
 
-    @property {Boolean}
+    @type Boolean
   */
   normalized: YES,
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/locale.js

@@ -183,7 +183,7 @@ SC.Locale = SC.Object.extend({
         // specified an additional hash and it has the same key, we'll throw an
         // error.
         if (additionalHash  &&  additionalHash[layoutKey]) {
-          throw "locLayout():  There is a localized value for the key '" + key + "' but a value for '" + layoutKey + "' was also specified in the non-localized hash";
+          throw new Error("locLayout():  There is a localized value for the key '" + key + "' but a value for '" + layoutKey + "' was also specified in the non-localized hash");
         }
 
         ret[layoutKey] = value;
@@ -396,7 +396,7 @@ SC.Locale.mixin(/** @scope SC.Locale */ {
   by your own application.  See the SC.Locale class definition for the
   various properties you can set on your own locales.
 
-  @property {Hash}
+  @type Hash
 */
 SC.Locale.locales = {
   en: SC.Locale.extend({ _deprecatedLanguageCodes: ['English'] }),

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/platform.js

@@ -4,8 +4,19 @@
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
+/*global jQuery*/
 
 /**
+  A constant indicating an unsupported method, property or other.
+
+  @static
+  @constant
+*/
+SC.UNSUPPORTED = '_sc_unsupported';
+
+
+/** @class
+
   This platform object allows you to conditionally support certain HTML5
   features.
 
@@ -17,13 +28,13 @@ SC.platform = SC.Object.create({
   /**
     The size of scrollbars in this browser.
 
-    @property
+    @type Number
   */
-  scrollbarSize: function() {
+  scrollbarSize: function () {
     var tester = document.createElement("DIV"),
         child;
     tester.innerHTML = "<div style='height:1px;'></div>";
-    tester.style.cssText="position:absolute;width:100px;height:100px;overflow-y:visible;";
+    tester.style.cssText = "position:absolute;width:100px;height:100px;overflow-y:visible;";
 
     child = tester.childNodes[0];
     document.body.appendChild(tester);
@@ -32,7 +43,7 @@ SC.platform = SC.Object.create({
     var withScroller = child.innerWidth || child.clientWidth;
     document.body.removeChild(tester);
 
-    return noScroller-withScroller;
+    return noScroller - withScroller;
 
   }.property().cacheable(),
 
@@ -44,8 +55,12 @@ SC.platform = SC.Object.create({
      - Android is assumed to support touch, but incorrectly reports that it does not.
      - See: https://github.com/Modernizr/Modernizr/issues/84 for a discussion on detecting
        touch capability.
-     - See: https://github.com/highslide-software/highcharts.com/issues/1331 for a discussion 
+     - See: https://github.com/highslide-software/highcharts.com/issues/1331 for a discussion
        about why we need to check if ontouchstart is null in addition to check if it's defined
+     - The test for window._phantom provides support for phantomjs, the headless WebKit browser
+       used in Travis-CI, and which incorredtly (see above) identifies itself as a touch browser.
+       For more information on CI see https://github.com/sproutcore/sproutcore/pull/1025
+       For discussion of the phantomjs touch issue see https://github.com/ariya/phantomjs/issues/10375
   */
   /**
     YES if the current device supports touch events, NO otherwise.
@@ -53,45 +68,48 @@ SC.platform = SC.Object.create({
     You can simulate touch events in environments that don't support them by
     calling SC.platform.simulateTouchEvents() from your browser's console.
 
-    @property {Boolean}
+    Note! The support for "touch" is a browser property and can't be relied on
+    to determine if the device is actually a "touch" device or if the device
+    actually uses touch events.  There are instances where "touch" devices will
+    not send touch events or will send touch and mouse events together and
+    there are instances where "non-touch" devices will support touch events.
+
+    It is recommended that you do not use this property at this time.
+
+    @type Boolean
   */
-  touch: !SC.none(window.ontouchstart) || SC.browser.name === SC.BROWSER.android,
+  touch: (!SC.none(window.ontouchstart) || SC.browser.name === SC.BROWSER.android || 'ontouchstart' in document.documentElement) && SC.none(window._phantom),
 
   /**
     YES if the current browser supports bounce on scroll.
 
-    @property {Boolean}
+    @type Boolean
   */
   bounceOnScroll: SC.browser.os === SC.OS.ios,
 
   /**
     YES if the current browser supports pinch to zoom.
 
-    @property {Boolean}
+    @type Boolean
   */
   pinchToZoom:  SC.browser.os === SC.OS.ios,
 
-  /**
-    YES if the current browser supports the `placeholder` attribute in `input` elements.
-  */
-  input: {
-    placeholder: ('placeholder' in document.createElement('input'))
-  },
-
   /**
     A hash that contains properties that indicate support for new HTML5
     input attributes.
 
     For example, to test to see if the placeholder attribute is supported,
     you would verify that SC.platform.input.placeholder is YES.
+
+    @type Array
   */
-  input: function(attributes) {
+  input: function (attributes) {
     var ret = {},
         len = attributes.length,
         elem = document.createElement('input'),
         attr, idx;
 
-    for (idx=0; idx < len; idx++) {
+    for (idx = 0; idx < len; idx++) {
       attr = attributes[idx];
 
       ret[attr] = !!(attr in elem);
@@ -106,20 +124,21 @@ SC.platform = SC.Object.create({
 
     For example, if the user has saved your web application to their home
     screen on an iPhone OS-based device, this property will be true.
-    @property {Boolean}
+
+    @type Boolean
   */
   standalone: !!navigator.standalone,
 
 
-  /**
-    Prefix for browser specific CSS attributes. Calculated later.
+  /** @deprecated Since version 1.10. Use SC.browser.cssPrefix.
+    Prefix for browser specific CSS attributes.
   */
-  cssPrefix: null,
+  cssPrefix: SC.browser.cssPrefix,
 
-  /**
-    Prefix for browser specific CSS attributes when used in the DOM. Calculated later.
+  /** @deprecated Since version 1.10. Use SC.browser.domPrefix.
+    Prefix for browser specific CSS attributes when used in the DOM.
   */
-  domCSSPrefix: null,
+  domCSSPrefix: SC.browser.domPrefix,
 
   /**
     Call this method to swap out the default mouse handlers with proxy methods
@@ -127,7 +146,7 @@ SC.platform = SC.Object.create({
 
     This is useful if you are debugging touch functionality on the desktop.
   */
-  simulateTouchEvents: function() {
+  simulateTouchEvents: function () {
     // Touch events are supported natively, no need for this.
     if (this.touch) {
       // @if (debug)
@@ -167,7 +186,7 @@ SC.platform = SC.Object.create({
 
     @param {Array} events Array of strings representing the events to remove
   */
-  removeEvents: function(events) {
+  removeEvents: function (events) {
     var idx, len = events.length, key;
     for (idx = 0; idx < len; idx++) {
       key = events[idx];
@@ -181,7 +200,7 @@ SC.platform = SC.Object.create({
     @param {String} evt The event to replace
     @param {Function} replacement The method that should be called instead
   */
-  replaceEvent: function(evt, replacement) {
+  replaceEvent: function (evt, replacement) {
     SC.Event.remove(document, evt, SC.RootResponder.responder, SC.RootResponder.responder[evt]);
     SC.Event.add(document, evt, this, replacement);
   },
@@ -192,13 +211,13 @@ SC.platform = SC.Object.create({
 
     If the altKey is depressed and pinch center not yet established, we will capture the mouse position.
   */
-  _simtouch_mousemove: function(evt) {
+  _simtouch_mousemove: function (evt) {
     if (!this._mousedown) {
       /*
         we need to capture when was the first spot that the altKey was pressed and use it as
         the center point of a pinch
        */
-      if(evt.altKey && this._pinchCenter === null) {
+      if (evt.altKey && this._pinchCenter === null) {
         this._pinchCenter = {
           pageX: evt.pageX,
           pageY: evt.pageY,
@@ -207,7 +226,7 @@ SC.platform = SC.Object.create({
           clientX: evt.clientX,
           clientY: evt.clientY
         };
-      } else if(!evt.altKey && this._pinchCenter !== null){
+      } else if (!evt.altKey && this._pinchCenter !== null) {
         this._pinchCenter = null;
       }
       return NO;
@@ -221,7 +240,7 @@ SC.platform = SC.Object.create({
     When simulating touch events, this method is called when mousedown events
     are received.
   */
-  _simtouch_mousedown: function(evt) {
+  _simtouch_mousedown: function (evt) {
     this._mousedown = YES;
 
     var manufacturedEvt = this.manufactureTouchEvent(evt, 'touchstart');
@@ -232,7 +251,7 @@ SC.platform = SC.Object.create({
     When simulating touch events, this method is called when mouseup events
     are received.
   */
-  _simtouch_mouseup: function(evt) {
+  _simtouch_mouseup: function (evt) {
     var manufacturedEvt = this.manufactureTouchEvent(evt, 'touchend'),
         ret = SC.RootResponder.responder.touchend(manufacturedEvt);
 
@@ -256,7 +275,7 @@ SC.platform = SC.Object.create({
     @param {String} type the type of event (e.g., touchstart)
     @returns {Event} the mouse event with an added changedTouches array
   */
-  manufactureTouchEvent: function(evt, type) {
+  manufactureTouchEvent: function (evt, type) {
     var realTouch, virtualTouch, realTouchIdentifier = this._simtouch_counter;
 
     realTouch = {
@@ -275,10 +294,9 @@ SC.platform = SC.Object.create({
     /*
       simulate pinch gesture
      */
-    if(evt.altKey && this._pinchCenter !== null)
-    {
+    if (evt.altKey && this._pinchCenter !== null) {
       //calculate the mirror position of the virtual touch
-      var pageX = this._pinchCenter.pageX + this._pinchCenter.pageX - evt.pageX ,
+      var pageX = this._pinchCenter.pageX + this._pinchCenter.pageX - evt.pageX,
           pageY = this._pinchCenter.pageY + this._pinchCenter.pageY - evt.pageY,
           screenX = this._pinchCenter.screenX + this._pinchCenter.screenX - evt.screenX,
           screenY = this._pinchCenter.screenY + this._pinchCenter.screenY - evt.screenY,
@@ -298,7 +316,7 @@ SC.platform = SC.Object.create({
         clientY: clientY
       };
 
-      evt.touches = [ realTouch , virtualTouch];
+      evt.touches = [realTouch, virtualTouch];
     }
     evt.changedTouches = evt.touches;
 
@@ -306,38 +324,46 @@ SC.platform = SC.Object.create({
   },
 
   /**
-    Whether the browser supports CSS transitions. Calculated later.
+    Whether the browser supports CSS animations.
+
+    @type Boolean
   */
-  supportsCSSTransitions: NO,
+  supportsCSSAnimations: SC.browser.experimentalStyleNameFor('animation') !== SC.UNSUPPORTED,
 
   /**
-    Whether the browser supports 2D CSS transforms. Calculated later.
+    Whether the browser supports CSS transitions.
+
+    @type Boolean
   */
-  supportsCSSTransforms: NO,
+  supportsCSSTransitions: SC.browser.experimentalStyleNameFor('transition') !== SC.UNSUPPORTED,
 
   /**
-    Whether the browser understands 3D CSS transforms.
-    This does not guarantee that the browser properly handles them.
-    Calculated later.
+    Whether the browser supports 2D CSS transforms.
+
+    @type Boolean
   */
-  understandsCSS3DTransforms: NO,
+  supportsCSSTransforms: SC.browser.experimentalStyleNameFor('transform') !== SC.UNSUPPORTED,
 
   /**
-    Whether the browser can properly handle 3D CSS transforms. Calculated later.
+    Whether the browser can properly handle 3D CSS transforms.
+
+    @type Boolean
   */
-  supportsCSS3DTransforms: NO,
+  supportsCSS3DTransforms: SC.browser.experimentalStyleNameFor('perspective') !== SC.UNSUPPORTED,
 
   /**
-    Whether the browser can handle accelerated layers. While supports3DTransforms tells us if they will
-    work in principle, sometimes accelerated layers interfere with things like getBoundingClientRect.
-    Then everything breaks.
+    Whether the browser supports the application cache.
+
+    @type Boolean
   */
-  supportsAcceleratedLayers: NO,
+  supportsApplicationCache: ('applicationCache' in window),
 
   /**
     Whether the browser supports the hashchange event.
+
+    @type Boolean
   */
-  supportsHashChange: function() {
+  supportsHashChange: function () {
     // Code copied from Modernizr which copied code from YUI (MIT licenses)
     // documentMode logic from YUI to filter out IE8 Compat Mode which false positives
     return ('onhashchange' in window) && (document.documentMode === undefined || document.documentMode > 7);
@@ -345,99 +371,236 @@ SC.platform = SC.Object.create({
 
   /**
     Whether the browser supports HTML5 history.
+
+    @type Boolean
   */
-  supportsHistory: function() {
+  supportsHistory: function () {
     return !!(window.history && window.history.pushState);
   }(),
 
-  supportsCanvas: function() {
+  /**
+    Whether the browser supports IndexedDB.
+
+    @type Boolean
+  */
+  supportsIndexedDB: function () {
+    return !!(window.indexedDB || window[SC.browser.domPrefix + 'IndexedDB']);
+  }(),
+
+  /**
+    Whether the browser supports the canvas element.
+
+    @type Boolean
+  */
+  supportsCanvas: function () {
     return !!document.createElement('canvas').getContext;
   }(),
 
+  /**
+    Whether the browser supports the orientationchange event.
+
+    @type Boolean
+  */
   supportsOrientationChange: ('onorientationchange' in window),
 
+  /**
+    Whether the browser supports WebSQL.
+
+    @type Boolean
+  */
+  supportsWebSQL: ('openDatabase' in window),
+
   /**
     Because iOS is slow to dispatch the window.onorientationchange event,
     we use the window size to determine the orientation on iOS devices
     and desktop environments when SC.platform.touch is YES (ie. when
     SC.platform.simulateTouchEvents has been called)
 
-    @property {Boolean}
-    @default NO
+    @type Boolean
   */
-  windowSizeDeterminesOrientation: SC.browser.os === SC.OS.ios || !('onorientationchange' in window)
+  windowSizeDeterminesOrientation: SC.browser.os === SC.OS.ios || !('onorientationchange' in window),
+
+  /**
+    Does this browser support the Apache Cordova (formerly phonegap) runtime?
+
+    This requires that you (the engineer) manually include the cordova
+    javascript library for the appropriate platform (Android, iOS, etc)
+    in your code. There are various methods of doing this; creating your own
+    platform-specific index.rhtml is probably the easiest option.
+
+    WARNING: Using the javascript_libs Buildfile option for the cordova include
+    will NOT work. The library will be included after your application code,
+    by which time this property will already have been evaluated.
+
+    @type Boolean
+    @see http://incubator.apache.org/cordova/
+  */
+  // Check for the global cordova property.
+  cordova: (typeof window.cordova !== "undefined")
 
 });
 
-/* Calculate CSS Prefixes */
-
-(function(){
-  var userAgent = navigator.userAgent.toLowerCase();
-  if ((/webkit/).test(userAgent)) {
-    SC.platform.cssPrefix = 'webkit';
-    SC.platform.domCSSPrefix = 'Webkit';
-  } else if((/opera/).test( userAgent )) {
-    SC.platform.cssPrefix = 'opera';
-    SC.platform.domCSSPrefix = 'O';
-  } else if((/msie/).test( userAgent ) && !(/opera/).test( userAgent )) {
-    SC.platform.cssPrefix = 'ms';
-    SC.platform.domCSSPrefix = 'ms';
-  } else if((/mozilla/).test( userAgent ) && !(/(compatible|webkit)/).test( userAgent )) {
-    SC.platform.cssPrefix = 'moz';
-    SC.platform.domCSSPrefix = 'Moz';
-  }
-})();
 
-/* Calculate transform support */
+/** @private
+  Test the transition and animation event names of this platform.  We could hard
+  code event names into the framework, but at some point things would change and
+  we would get it wrong.  Instead we perform actual tests to find out the proper
+  names and only add the proper listeners.
+*/
+(function () {
+  // This will add 4 different variations of the named event listener and clean
+  // them up again.
+  // Note: we pass in capitalizedEventName, because we can't just capitalize
+  // the standard event name.  For example, in WebKit the standard transitionend
+  // event is named webkitTransitionEnd, not webkitTransitionend.
+  var executeTest = function (el, standardEventName, capitalizedEventName, cleanUpFunc) {
+    var domPrefix = SC.browser.domPrefix,
+      lowerDomPrefix = domPrefix.toLowerCase(),
+      eventNameKey = standardEventName + 'EventName',
+      callback = function (evt) {
+        var domPrefix = SC.browser.domPrefix,
+          lowerDomPrefix = domPrefix.toLowerCase(),
+          eventNameKey = standardEventName + 'EventName';
+
+        // Remove all the event listeners.
+        el.removeEventListener(standardEventName, callback, NO);
+        el.removeEventListener(lowerDomPrefix + standardEventName, callback, NO);
+        el.removeEventListener(lowerDomPrefix + capitalizedEventName, callback, NO);
+        el.removeEventListener(domPrefix + capitalizedEventName, callback, NO);
+
+        // The cleanup timer re-uses this function and doesn't pass evt.
+        if (evt) {
+          SC.platform[eventNameKey] = evt.type;
+
+          // Don't allow the event to bubble, because SC.RootResponder will be
+          // adding event listeners as soon as the testing is complete.  It is
+          // important that SC.RootResponder's listeners don't catch the last
+          // test event.
+          evt.stopPropagation();
+        }
+
+        // Call the clean up function, pass in success state.
+        if (cleanUpFunc) { cleanUpFunc(!!evt); }
+        jQuery.holdReady(NO);
+      };
 
-(function(){
-  // a test element
-  var el = document.createElement("div");
+    // Set the initial value as unsupported.
+    SC.platform[eventNameKey] = SC.UNSUPPORTED;
 
-  // the css and javascript to test
-  var css_browsers = ["-moz-", "-moz-", "-o-", "-ms-", "-webkit-"],
-      test_browsers = ["moz", "Moz", "o", "ms", "webkit"];
+    // Try the various implementations.
+    // ex. transitionend, webkittransitionend, webkitTransitionEnd, WebkitTransitionEnd
+    el.addEventListener(standardEventName, callback, NO);
+    el.addEventListener(lowerDomPrefix + standardEventName, callback, NO);
+    el.addEventListener(lowerDomPrefix + capitalizedEventName, callback, NO);
+    el.addEventListener(domPrefix + capitalizedEventName, callback, NO);
 
-  // prepare css
-  var css = "", i = null, cssBrowser, iLen;
-  for (i = 0, iLen = css_browsers.length; i < iLen; i++) {
-    cssBrowser = css_browsers[i];
-    css += cssBrowser + "transition:all 1s linear;";
-    css += cssBrowser + "transform: translate(1px, 1px);";
-    css += cssBrowser + "perspective: 500px;";
-  }
+    // Delay the ready event for the tests to complete.
+    jQuery.holdReady(YES);
+  };
 
-  // set css text
-  el.style.cssText = css;
-
-  // test
-  var testBrowser;
-  for (i = 0, iLen=test_browsers.length; i < iLen; i++)
-  {
-    testBrowser = test_browsers[i];
-    if (el.style[testBrowser + "TransitionProperty"] !== undefined) SC.platform.supportsCSSTransitions = YES;
-    if (el.style[testBrowser + "Transform"] !== undefined) SC.platform.supportsCSSTransforms = YES;
-    if (el.style[testBrowser + "Perspective"] !== undefined || el.style[testBrowser + "PerspectiveProperty"] !== undefined) {
-      SC.platform.understandsCSS3DTransforms = YES;
-      SC.platform.supportsCSS3DTransforms = YES;
-    }
-  }
+  // Set up and execute the transition event test.
+  if (SC.platform.supportsCSSTransitions) {
+    var transitionEl = document.createElement('div'),
+      transitionStyleName = SC.browser.experimentalStyleNameFor('transition', 'all 1ms linear');
 
-  // unfortunately, we need a bit more to know FOR SURE that 3D is allowed
-  try{
-    if (window.media && window.media.matchMedium) {
-      if (!window.media.matchMedium('(-webkit-transform-3d)')) SC.platform.supportsCSS3DTransforms = NO;
-    } else if(window.styleMedia && window.styleMedia.matchMedium) {
-      if (!window.styleMedia.matchMedium('(-webkit-transform-3d)')) SC.platform.supportsCSS3DTransforms = NO;
-    }
-  }catch(e){
-    //Catch to support IE9 exception
-    SC.platform.supportsCSS3DTransforms = NO;
+    transitionEl.style[transitionStyleName] = 'all 1ms linear';
+
+    // Test transition events.
+    executeTest(transitionEl, 'transitionend', 'TransitionEnd', function (success) {
+      // If an end event never fired, we can't really support CSS transitions in SproutCore.
+      if (!success) {
+        SC.platform.supportsCSSTransitions = NO;
+      }
+
+      transitionEl.parentNode.removeChild(transitionEl);
+      transitionEl = null;
+    });
+
+    // Append the test element.
+    document.documentElement.appendChild(transitionEl);
+
+    // Break execution to allow the browser to update the DOM before altering the style.
+    setTimeout(function () {
+      transitionEl.style.opacity = '0';
+    });
   }
 
-  // Unfortunately, this has to be manual, as I can't think of a good way to test it
-  // webkit-only for now.
-  if (SC.platform.supportsCSSTransforms && SC.platform.cssPrefix === "webkit") {
-    SC.platform.supportsAcceleratedLayers = YES;
+  // Set up and execute the animation event test.
+  if (SC.platform.supportsCSSAnimations) {
+    var animationEl = document.createElement('div'),
+      keyframes,
+      prefixedKeyframes;
+
+    // Generate both the regular and prefixed version of the style.
+    keyframes = '@keyframes _sc_animation_test { from { opacity: 1; } to { opacity: 0; } }';
+    prefixedKeyframes = '@' + SC.browser.cssPrefix + 'keyframes _sc_prefixed_animation_test { from { opacity: 1; } to { opacity: 0; } }';
+
+    // Add test animation styles.
+    animationEl.innerHTML = '<style>' + keyframes + '\n' + prefixedKeyframes + '</style>';
+
+    // Set up and execute the animation event test.
+    animationEl.style.animation = '_sc_animation_test 1ms linear';
+    animationEl.style[SC.browser.domPrefix + 'Animation'] = '_sc_prefixed_animation_test 5ms linear';
+
+    // NOTE: We could test start, but it's extra work and easier just to test the end
+    // and infer the start event name from it.  Keeping this code for example.
+    // executeTest(animationEl, 'animationstart', 'AnimationStart', function (success) {
+    //   // If an iteration start never fired, we can't really support CSS transitions in SproutCore.
+    //   if (!success) {
+    //     SC.platform.supportsCSSAnimations = NO;
+    //   }
+    // });
+
+    // NOTE: Testing iteration event support proves very problematic.  Many
+    // browsers can't iterate less than several milliseconds which means we
+    // have to wait too long to find out this event name.  Instead we test
+    // the end only and infer the iteration event name from it. Keeping this
+    // code for example, but it wont' work reliably unless the animation style
+    // is something like '_sc_animation_test 30ms linear' (i.e. ~60ms wait time)
+    // executeTest(animationEl, 'animationiteration', 'AnimationIteration', function (success) {
+    //   // If an iteration event never fired, we can't really support CSS transitions in SproutCore.
+    //   if (!success) {
+    //     SC.platform.supportsCSSAnimations = NO;
+    //   }
+    // });
+
+    // Test animation events.
+    executeTest(animationEl, 'animationend', 'AnimationEnd', function (success) {
+      // If an end event never fired, we can't really support CSS animations in SproutCore.
+      if (success) {
+        // Infer the start and iteration event names.
+        var domPrefix = SC.browser.domPrefix,
+          lowerDomPrefix = domPrefix.toLowerCase(),
+          endEventName = SC.platform.animationendEventName;
+
+        switch (endEventName) {
+        case lowerDomPrefix + 'animationend':
+          SC.platform.animationstartEventName = lowerDomPrefix + 'animationstart';
+          SC.platform.animationiterationEventName = lowerDomPrefix + 'animationiteration';
+          break;
+        case lowerDomPrefix + 'AnimationEnd':
+          SC.platform.animationstartEventName = lowerDomPrefix + 'AnimationStart';
+          SC.platform.animationiterationEventName = lowerDomPrefix + 'AnimationIteration';
+          break;
+        case domPrefix + 'AnimationEnd':
+          SC.platform.animationstartEventName = domPrefix + 'AnimationStart';
+          SC.platform.animationiterationEventName = domPrefix + 'AnimationIteration';
+          break;
+        default:
+          SC.platform.animationstartEventName = 'animationstart';
+          SC.platform.animationiterationEventName = 'animationiteration';
+        }
+
+      } else {
+        SC.platform.supportsCSSAnimations = NO;
+      }
+
+      // Clean up.
+      animationEl.parentNode.removeChild(animationEl);
+      animationEl = null;
+    });
+
+    // Break execution to allow the browser to update the DOM before altering the style.
+    document.documentElement.appendChild(animationEl);
   }
 })();