sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/amber/tests/views/view/build.js

@@ -0,0 +1,85 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global module test equals context ok same */
+
+var buildableView, parent;
+module('SC.Buildable', {
+  setup: function() {
+    parent = SC.View.create();
+    buildableView = SC.View.create({
+      buildIn: function() {
+        this.called_any = YES;
+        this.called_buildIn = YES;
+      },
+      
+      resetBuild: function() {
+        this.called_any = YES;
+        this.called_resetBuild = YES;
+      },
+      
+      buildOut: function() {
+        this.called_any = YES;
+        this.called_buildOut = YES;
+      },
+      
+      buildOutDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildOutDidCancel = YES;
+      },
+      
+      buildInDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildInDidCancel = YES;
+      }
+    });
+  },
+  
+  teardown: function() {
+  }
+});
+
+test("resetBuildState calls resetBuild", function(){
+  ok(!buildableView.called_any, "Nothing should have happened yet.");
+  buildableView.resetBuildState();
+  ok(buildableView.called_resetBuild, "reset should have been called");
+});
+
+test("changing parent view calls resetBuild", function() {
+  ok(!buildableView.called_any, "Nothing should have happened yet.");
+  parent.appendChild(buildableView);
+  ok(buildableView.called_resetBuild, "reset should have been called");
+});
+
+test("buildInToView starts build in", function() {
+  buildableView.willBuildInToView(parent);
+  ok(!buildableView.isBuildingIn, "Should not be building in yet.");
+  buildableView.buildInToView(parent);
+  ok(buildableView.isBuildingIn, "Should now be building in.");
+  ok(buildableView.called_buildIn, "Build in should have been called.");
+});
+
+test("buildOutFromView starts build out", function() {
+  buildableView.willBuildInToView(parent);
+  buildableView.buildInToView(parent);
+  buildableView.buildInDidFinish(); // hack this in here, because our implementations above purposefully don't.
+  
+  ok(!buildableView.isBuildingOut, "Should not yet be building out.");
+  buildableView.buildOutFromView(parent);
+  ok(buildableView.isBuildingOut, "View should now be building out.");
+});
+
+test("resetBuildState cancels buildOut", function() {
+  buildableView.willBuildInToView(parent);
+  buildableView.buildInToView(parent);
+  buildableView.buildInDidFinish(); // hack this in here, because our implementations above purposefully don't.
+
+  buildableView.buildOutFromView(parent);
+  ok(buildableView.isBuildingOut, "View should now be building out.");
+  
+  buildableView.resetBuildState(parent);
+  ok(!buildableView.isBuildingOut, "View should no longer be building out.");
+  ok(buildableView.called_buildOutDidCancel, "Cancel ought to have been called.");
+});

data/lib/frameworks/sproutcore/frameworks/amber/tests/views/view/build_children.js

@@ -0,0 +1,89 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global module test equals context ok same */
+
+var buildableView, parent;
+module('SC.Buildable', {
+  setup: function() {
+    parent = SC.View.create({
+      buildInDidFinishFor: function() {
+        sc_super();
+        this.called_buildInDidFinishFor = YES;
+      },
+      buildOutDidFinishFor: function() {
+        sc_super();
+        this.called_buildOutDidFinishFor = YES;
+      }
+    });
+    buildableView = SC.View.create({
+      buildIn: function() {
+        this.called_any = YES;
+        this.called_buildIn = YES;
+      },
+      
+      resetBuild: function() {
+        this.called_any = YES;
+        this.called_resetBuild = YES;
+      },
+      
+      buildOut: function() {
+        this.called_any = YES;
+        this.called_buildOut = YES;
+      },
+      
+      buildOutDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildOutDidCancel = YES;
+      },
+      
+      buildInDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildInDidCancel = YES;
+      }
+    });
+  },
+  
+  teardown: function() {
+  }
+});
+
+test("Calling buildInChild adds child and builds it in.", function(){
+  var v = buildableView, p = parent;
+  p.buildInChild(v);
+  
+  // check right after build in is called
+  ok(v.called_buildIn, "child started build in.");
+  ok(v.isBuildingIn, "child is building in.");
+  ok(!p.called_buildInDidFinsihFor, "child has not finished building in, according to parent.");
+  
+  // the parent view should be set already
+  equals(v.get("parentView"), p, "Parent view should be the parent");
+  
+  // finish build in
+  v.buildInDidFinish();
+  
+  // now check that the view registered that finish
+  ok(p.called_buildInDidFinishFor, "child has finished building in, according to parent.");
+});
+
+
+test("Calling buildOutChild builds out the child, and only removes it when done.", function() {
+  var v = buildableView, p = parent;
+  p.buildInChild(v);
+  v.buildInDidFinish();
+  
+  p.buildOutChild(v);
+  ok(v.called_buildOut, "child started build out.");
+  ok(v.isBuildingOut, "child is building out.");
+  ok(!p.called_buildOutDidFinishFor, "child has not finished building out, according to parent.");
+  equals(v.get("parentView"), p, "Parent view should still be the former parent");
+  
+  // finish build out
+  v.buildOutDidFinish();
+  
+  ok(p.called_buildOutDidFinishFor, "child has finished building out, according to parent.");
+  equals(v.get("parentView"), null, "Parent view is now null");
+});

data/lib/frameworks/sproutcore/frameworks/{foundation → amber}/tests/views/view/clippingFrame.js

@@ -116,14 +116,15 @@ test("notifies receiver and each child if parent clipping frame changes", functi
 });
 
 
-test("does not notify child views of clippingFrame changes if child view hasStaticLayout", function() {
+test("does not notify child views of clippingFrame changes if child view has useStaticLayout: YES", function() {
   var callCount = 0;
   
+  aa.set('useStaticLayout', YES);
+
   // setup observers
   function observer() { callCount++; }
   a.addObserver('clippingFrame', observer);
   aa.addObserver('clippingFrame', observer);
-  aa.hasStaticLayout = YES ; // fake it till u make it
   
   // now, adjust layout of child so that clipping frame will change...
   a.adjust('top', -50);

data/lib/frameworks/sproutcore/frameworks/{foundation → amber}/tests/views/view/createLayer.js

@@ -16,11 +16,11 @@ test("returns the receiver", function() {
   equals(v.createLayer(), v, 'returns receiver');
 });
 
-test("calls prepareContext() and sets layer to resulting element", function() {
+test("calls renderToContext() and sets layer to resulting element", function() {
   var v= SC.View.create({
     tagName: 'span',
     
-    prepareContext: function(context, firstTime) {
+    renderToContext: function(context, firstTime) {
       context.push("foo");
     }
   });

data/lib/frameworks/sproutcore/frameworks/{foundation → amber}/tests/views/view/layoutDidChange.js

@@ -125,3 +125,25 @@ test("is invoked on parentView if no layoutView whenever layout property changes
 
 	
 });
+
+test("sets rotateX when rotate is set", function() {
+  var view = SC.View.create({});
+  view.set('layout', { rotate: 45 });
+
+  equals(view.get('layout').rotateX, 45, "should set rotateX");
+});
+
+test("sets rotate when rotateX is set", function(){
+  var view = SC.View.create({});
+  view.set('layout', { rotateX: 45 });
+  equals(view.get('layout').rotate, 45, "should set rotate");
+
+  view.set('layout', { rotateX: 0 });
+  equals(view.get('layout').rotate, 0, "should also work with 0");
+});
+
+test("rotateX overrides rotate", function(){
+  var view = SC.View.create({});
+  view.set('layout', { rotate: 45, rotateX: 90 });
+  equals(view.get('layout').rotate, 90, "should set rotate to rotateX");
+});

data/lib/frameworks/sproutcore/frameworks/{foundation → amber}/tests/views/view/layoutStyle.js

@@ -26,7 +26,9 @@ var parent, child;
 function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
   
   // make sure we add null properties and convert numbers to 'XXpx' to style layout.
-  var keys = 'width height top bottom marginLeft marginTop left right zIndex minWidth maxWidth minHeight maxHeight webkitTransform'.w();
+  var keys = 'width height top bottom marginLeft marginTop left right zIndex minWidth maxWidth minHeight maxHeight'.w();
+  if (SC.platform.supportsCSSTransforms) keys.push('transform');
+
   keys.forEach(function(key) {
     if (no_s[key]===undefined) no_s[key] = null;
     if (with_s[key]===undefined) with_s[key] = null;  
@@ -38,11 +40,12 @@ function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
   // set layout
   child.set('layout', layout) ;
 
-  console.log(child.get('layoutStyle'));
-  
+  var testKey;
+
   // test
   keys.forEach(function(key) {
-    equals(child.get('layoutStyle')[key], no_s[key], "STYLE NO PARENT %@".fmt(key)) ;  
+    testKey = key === 'transform' ? SC.platform.domCSSPrefix+'Transform' : key;
+    equals(child.get('layoutStyle')[testKey], no_s[key], "STYLE NO PARENT %@".fmt(key)) ;  
   });
   
   // add parent
@@ -52,7 +55,8 @@ function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
   
   // test again
   keys.forEach(function(key) {
-    equals(child.get('layoutStyle')[key], with_s[key], "STYLE W/ PARENT %@".fmt(key)) ;  
+    testKey = key === 'transform' ? SC.platform.domCSSPrefix+'Transform' : key;
+    equals(child.get('layoutStyle')[testKey], with_s[key], "STYLE W/ PARENT %@".fmt(key)) ;  
   });
 }
 
@@ -73,7 +77,6 @@ var commonSetup = {
   },
   
   teardown: function() {
-    //parent.destroy(); child.destroy();
     parent = child = null ;
   }
 };
@@ -237,84 +240,150 @@ test("layout {top, left, width: auto, height: auto}", function() {
 
 
 
-
-
-
-
 // ..........................................................
-// TEST FRAME/STYLEFRAME WITH ACCELERATE LAYOUT VARIATIONS
+// TEST CSS TRANSFORM LAYOUT VARIATIONS
 // 
 // NOTE:  Each test evaluates the frame before and after adding it to the 
 // parent.
 
-module('ACCELERATED LAYOUT VARIATIONS', {
+module('CSS TRANSFORM LAYOUT VARIATIONS', {
   setup: function(){
     commonSetup.setup();
-    
-    // Force support
-    child.hasAcceleratedLayer = YES;
-    SC.platform.supportsAcceleratedLayers = YES;
-    SC.platform.supportsCSS3DTransforms = YES;
+    child.createLayer();
+    document.body.appendChild(child.get('layer'));
   },
 
-  teardown: commonSetup.teardown
+  teardown: function(){
+    child.destroyLayer();
+    commonSetup.teardown();
+  }
 });
 
-test("layout {top, left, width, height}", function() {
+function transformFor(view){
+  return view.get('layer').style[SC.platform.domCSSPrefix+'Transform'];
+}
 
-  var layout = { top: 10, left: 10, width: 50, height: 50 };
-  var s = { top: 0, left: 0, width: 50, height: 50, "-webkit-transform": 'translate3d(10px, 10px, 0)' } ;
-  var no_f = { x: 0, y: 0, width: 50, height: 50, "-webkit-transform": 'translate3d(10px, 10px, 0)' } ;
-  var with_f = { x: 0, y: 0, width: 50, height: 50, "-webkit-transform": 'translate3d(10px, 10px, 0)' } ;
+test("layout {rotateX}", function() {
+  child.adjust('rotateX', 45).updateLayout();
+  equals(transformFor(child), 'rotateX(45deg)', 'transform attribute should be "rotateX(45deg)"')
+});
 
-  performLayoutTest(layout, no_f, s, with_f, s) ;
-}) ;
+test("layout {rotateY}", function() {
+  child.adjust('rotateY', 45).updateLayout();
+  equals(transformFor(child), 'rotateY(45deg)', 'transform attribute should be "rotateY(45deg)"')
+});
 
-test("layout {top, left, bottom, right}", function() {
+test("layout {rotateZ}", function() {
+  child.adjust('rotateZ', 45).updateLayout();
+  equals(transformFor(child), 'rotateZ(45deg)', 'transform attribute should be "rotateZ(45deg)"')
+});
 
-  var layout = { top: 10, left: 10, bottom: 10, right: 10 };
-  var no_f = { x: 10, y: 10, width: 0, height: 0, "-webkit-transform": 'translateZ(0px)' } ;
-  var with_f = { x: 10, y: 10, width: 180, height: 180, "-webkit-transform": 'translateZ(0px)' } ;
-  var s = { top: 10, left: 10, bottom: 10, right: 10, "-webkit-transform": 'translateZ(0px)' } ;
+test("layout {rotate}", function() {
+  child.adjust('rotate', 45).updateLayout();
+  equals(transformFor(child), 'rotateX(45deg)', 'transform attribute should be "rotateX(45deg)"')
+});
 
-  performLayoutTest(layout, no_f, s, with_f, s) ;
-}) ;
+test("layout {rotateX} with units", function() {
+  child.adjust('rotateX', '1rad').updateLayout();
+  equals(transformFor(child), 'rotateX(1rad)', 'transform attribute should be "rotateX(1rad)"')
+});
 
-test("layout {top, left, width: auto, height: auto}", function() {
-  child = SC.View.create({
-    hasAcceleratedLayer: YES, // Force this
-    useStaticLayout: YES,
-    render: function(context) {
-      // needed for auto
-      context.push('<div style="padding: 10px"></div>');
-    }
+test("layout {scale}", function() {
+  child.adjust('scale', 2).updateLayout();
+  equals(transformFor(child), 'scale(2)', 'transform attribute should be "scale(2)"')
+});
+
+test("layout {scale} with multiple", function() {
+  child.adjust('scale', [2, 3]).updateLayout();
+  equals(transformFor(child), 'scale(2, 3)', 'transform attribute should be "scale(2, 3)"')
+});
+
+test("layout {rotateX, scale}", function() {
+  child.adjust({ rotateX: 45, scale: 2 }).updateLayout();
+  equals(transformFor(child), 'rotateX(45deg) scale(2)', 'transform attribute should be "rotateX(45deg) scale(2)"')
+});
+
+test("layout {rotateX} update", function() {
+  child.adjust('rotateX', 45).updateLayout();
+  child.adjust('rotateX', 90).updateLayout();
+  equals(transformFor(child), 'rotateX(90deg)', 'transform attribute should be "rotateX(90deg)"')
+});
+
+
+if (SC.platform.supportsCSSTransforms) {
+
+  // ..........................................................
+  // TEST FRAME/STYLEFRAME WITH ACCELERATE LAYOUT VARIATIONS
+  // 
+  // NOTE:  Each test evaluates the frame before and after adding it to the 
+  // parent.
+
+  module('ACCELERATED LAYOUT VARIATIONS', {
+    setup: function(){
+      commonSetup.setup();
+      child.wantsAcceleratedLayer = YES;
+    },
+
+    teardown: commonSetup.teardown
   });
 
-  // parent MUST have a layer.
-  parent.createLayer();
-  var layer = parent.get('layer');
-  document.body.appendChild(layer);
+  test("layout {top, left, width, height}", function() {
+    var layout = { top: 10, left: 10, width: 50, height: 50 };
+    var expectedTransform = 'translateX(10px) translateY(10px)';
+    if (SC.platform.supportsCSS3DTransforms) expectedTransform += ' translateZ(0px)';
+    var s = { top: 0, left: 0, width: 50, height: 50, transform: expectedTransform } ;
+    var no_f = { x: 0, y: 0, width: 50, height: 50, transform: expectedTransform } ;
+    var with_f = { x: 0, y: 0, width: 50, height: 50, transform: expectedTransform } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, bottom, right}", function() {
+
+    var layout = { top: 10, left: 10, bottom: 10, right: 10 };
+    var no_f = { x: 10, y: 10, width: 0, height: 0, transform: null } ;
+    var with_f = { x: 10, y: 10, width: 180, height: 180, transform: null } ;
+    var s = { top: 10, left: 10, bottom: 10, right: 10, transform: null } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, width: auto, height: auto}", function() {
+    child = SC.View.create({
+      wantsAcceleratedLayer: YES,
+      useStaticLayout: YES,
+      render: function(context) {
+        // needed for auto
+        context.push('<div style="padding: 10px"></div>');
+      }
+    });
+
+    // parent MUST have a layer.
+    parent.createLayer();
+    var layer = parent.get('layer');
+    document.body.appendChild(layer);
   
-  var layout = { top: 0, left: 0, width: 'auto', height: 'auto' };
-  var no_f = { x: 0, y: 0, width: 0, height: 0, "-webkit-transform": 'translateZ(0px)' };
-  var with_f = { x: 0, y: 0, width: 20, height: 20, "-webkit-transform": 'translateZ(0px)' };
-  var s = { top: 0, left: 0, width: 'auto', height: 'auto', "-webkit-transform": 'translateZ(0px)' };
+    var layout = { top: 0, left: 0, width: 'auto', height: 'auto' };
+    var no_f = { x: 0, y: 0, width: 0, height: 0, transform: null };
+    var with_f = { x: 0, y: 0, width: 20, height: 20, transform: null };
+    var s = { top: 0, left: 0, width: 'auto', height: 'auto', transform: null };
   
-  performLayoutTest(layout, no_f, s, with_f, s);
+    performLayoutTest(layout, no_f, s, with_f, s);
   
-  layer.parentNode.removeChild(layer);
-});
+    layer.parentNode.removeChild(layer);
+  });
 
-test("layout w/ percentage {top, left, width, height}", function() {
+  test("layout w/ percentage {top, left, width, height}", function() {
 
-  var layout = { top: 0.1, left: 0.1, width: 0.5, height: 0.5 };
-  var s = { top: '10%', left: '10%', width: '50%', height: '50%', "-webkit-transform": 'translateZ(0px)' } ;
-  var no_f = { top: '10%', left: '10%', width: '50%', height: '50%', "-webkit-transform": 'translateZ(0px)' } ;
-  var with_f = { top: '10%', left: '10%', width: '50%', height: '50%', "-webkit-transform": 'translateZ(0px)' } ;
+    var layout = { top: 0.1, left: 0.1, width: 0.5, height: 0.5 };
+    var s = { top: '10%', left: '10%', width: '50%', height: '50%', transform: null } ;
+    var no_f = { top: '10%', left: '10%', width: '50%', height: '50%', transform: null } ;
+    var with_f = { top: '10%', left: '10%', width: '50%', height: '50%', transform: null } ;
 
-  performLayoutTest(layout, no_f, s, with_f, s) ;
-}) ;
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
 
+}
 
 
 
@@ -400,7 +469,7 @@ test("layout {bottom, right, centerX, centerY, height, width} - bottom/right tak
   var no_f = { x: 0, y: 0, width: 60, height: 60 } ;
   var with_f = { x: 130, y: 130, width: 60, height: 60 } ;
   var s = { width: '60%', height: '60%', bottom: '10%', right: '10%' } ;
-  
+
   performLayoutTest(layout, no_f, s, with_f, s) ;
   
 }) ;
@@ -418,16 +487,18 @@ test("layout {top, left, bottom, right, centerX, centerY, height, width} - top/l
 
 
 test("layout {centerX, centerY, width:auto, height:auto}", function() {
-  var error=null;
+  var error= 'NONE';
   var layout = { centerX: 0.1, centerY: 0.1, width: 'auto', height: 'auto' };
+
   child.set('layout', layout) ;
   try{
     child.layoutStyle();
   }catch(e){
     error=e;
   }
-  equals(SC.T_ERROR,SC.typeOf(error),'Layout style functions should throw and '+
-  'error if centerx/y and width/height are set at the same time ' + error );
+
+  equals(SC.T_ERROR, SC.typeOf(error), 'Layout style functions should throw an '+
+                                         'error if centerx/y and width/height are set at the same time ' + error );
   
 }) ;
 
@@ -507,8 +578,8 @@ test("frame loc shifts with centerX/centerY", function(){
   verifyFrameResize(layout, before, after);
 });
 
-
-
+test("for proper null variables");
+// nothing should get passed through as undefined, instead we want null in certain cases