sproutcore 1.10.3.1 → 1.11.0.rc1

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

@@ -19,18 +19,20 @@ module("SC.Pane#sendEvent", {
     pane = SC.Pane.create({
       defaultResponder: defaultResponder,
       paneEvent: handler,
-      childViews: [SC.View.extend({
+      childViews: ['fooView'],
+      fooView: SC.View.extend({
         fooEvent: handler,
-        childViews: [SC.View.extend({
+        childViews: ['barView'],
+        barView: SC.View.extend({
           barEvent: handler
-        })]
-      })]
+        })
+      })
     });
-    fooView = pane.childViews[0];
-    ok(fooView.fooEvent, 'has fooEvent handler');
+    fooView = pane.fooView;
+    ok(fooView.fooEvent, 'fooView has fooEvent handler');
 
-    barView = fooView.childViews[0];
-    ok(barView.barEvent, 'has barEvent handler');
+    barView = fooView.barView;
+    ok(barView.barEvent, 'barView has barEvent handler');
 
     evt = SC.Object.create(); // mock
   },
@@ -42,7 +44,7 @@ module("SC.Pane#sendEvent", {
 });
 
 test("when invoked with target = nested view", function() {
-  var handler ;
+  var handler;
 
   // test event handler on target
   callCount = 0;
@@ -134,6 +136,31 @@ test("when invoked with target = pane", function() {
 
 
 
+test("when invoked with target = deepest descendent view and cutoff view = middle view to cut off the responder chain", function() {
+  var handler;
+
+  // Test arrested event handling where a handler exists on responder chain but above the cutoff view.
+  callCount = 0;
+  handler = pane.sendEvent('fooEvent', evt, barView, fooView);
+  equals(callCount, 0, 'should not invoke handler found on responder chain but above the cutoff view');
+  equals(handler, null, 'should return no responder');
+
+  // Test arrested event handling a handler exists within the truncated responder chain.
+  callCount = 0;
+  handler = pane.sendEvent('barEvent', evt, barView, fooView);
+  equals(callCount, 1, 'should invoke handler found within truncated responder chain');
+  equals(handler, barView, 'should return barView as having handled barEvent');
+
+  // Test that defaultResponder is NOT given an opportunity to handle an arrested event
+  callCount = 0;
+  handler = pane.sendEvent('defaultEvent', evt, barView, fooView);
+  equals(callCount, 0, 'should not invoke default handler if the responder chain is truncated');
+  equals(handler, null, 'should return no responder');
+
+});
+
+
+
 test("when invoked with target = null", function() {
   var handler ;
 
@@ -204,4 +231,3 @@ test("when invoked with target = null, no default or first responder", function(
   equals(handler, pane, 'should return pane as responder that handled event');
 
 });
-

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

@@ -0,0 +1,44 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+module("SC.View - backgroundColor");
+
+test("Basic use", function() {
+  var view = SC.View.create({
+    backgroundColor: "red"
+  });
+
+  view.createLayer();
+
+  equals(view.get('layer').style.backgroundColor, "red", "backgroundColor sets the CSS background-color value");
+
+});
+
+test("Dynamic use", function() {
+  var view = SC.View.create({
+    backgroundColor: 'red',
+    displayProperties: ['backgroundColor']
+  });
+  
+  view.createLayer();
+  view.viewState = SC.View.ATTACHED_SHOWN; // hack to get view properties to update.
+
+  equals(view.get('layer').style.backgroundColor, 'red', "PRELIM: backgroundColor sets the CSS background-color value");
+
+  SC.run(function() {
+    view.set('backgroundColor', 'blue');
+  });
+
+  equals(view.get('layer').style.backgroundColor, 'blue', "Changing backgroundColor when it is a display property updates the CSS background-color value");
+
+  SC.run(function() {
+    view.set('backgroundColor', null);
+  });
+
+  ok(!view.get('layer').style.backgroundColor, "Setting backgroundColor to null clears the CSS background-color value");
+
+});

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

@@ -29,8 +29,8 @@ test("The borderFrame property of the view should include the borders from the l
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 0, y: 0, width: 100, height: 100 }, "The frame without borders is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame without borders is");
+  ok(SC.rectsEqual(frame, { x: 0, y: 0, width: 100, height: 100 }), "The frame without borders is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame without borders is");
 
   // Right 5px border.
   SC.run(function () {
@@ -40,8 +40,8 @@ test("The borderFrame property of the view should include the borders from the l
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 0, y: 0, width: 95, height: 100 }, "The frame with 5px right border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border is");
+  ok(SC.rectsEqual(frame, { x: 0, y: 0, width: 95, height: 100 }), "The frame with 5px right border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border is");
 
   // Top 10px border.
   SC.run(function () {
@@ -51,8 +51,8 @@ test("The borderFrame property of the view should include the borders from the l
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 0, y: 10, width: 95, height: 90 }, "The frame with 5px right border & 10px top border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border is");
+  ok(SC.rectsEqual(frame, { x: 0, y: 10, width: 95, height: 90 }), "The frame with 5px right border & 10px top border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border & 10px top border is");
 
   // Left 15px border.
   SC.run(function () {
@@ -62,8 +62,8 @@ test("The borderFrame property of the view should include the borders from the l
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 15, y: 10, width: 80, height: 90 }, "The frame with 5px right border & 10px top border & 15px left border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border is");
+  ok(SC.rectsEqual(frame, { x: 15, y: 10, width: 80, height: 90 }), "The frame with 5px right border & 10px top border & 15px left border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border & 10px top border & 15px left border is");
 
   // Bottom 20px border.
   SC.run(function () {
@@ -73,8 +73,8 @@ test("The borderFrame property of the view should include the borders from the l
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 15, y: 10, width: 80, height: 70 }, "The frame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
+  ok(SC.rectsEqual(frame, { x: 15, y: 10, width: 80, height: 70 }), "The frame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
 
   // 25px border.
   SC.run(function () {
@@ -84,8 +84,8 @@ test("The borderFrame property of the view should include the borders from the l
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 25, y: 25, width: 50, height: 50 }, "The frame with 25px border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 25px border is");
+  ok(SC.rectsEqual(frame, { x: 25, y: 25, width: 50, height: 50 }), "The frame with 25px border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 25px border is");
 
 });
 
@@ -112,8 +112,8 @@ test("The borderFrame property of the view should be correct for view with useSt
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 0, y: 0, width: 100, height: 100 }, "The frame with useStaticLayout true after rendering is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with useStaticLayout true after rendering is");
+  ok(SC.rectsEqual(frame, { x: 0, y: 0, width: 100, height: 100 }), "The frame with useStaticLayout true after rendering is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with useStaticLayout true after rendering is");
 
   // Right 5px border.
   SC.run(function () {
@@ -123,8 +123,8 @@ test("The borderFrame property of the view should be correct for view with useSt
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 0, y: 0, width: 95, height: 100 }, "The frame with 5px right border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border is");
+  ok(SC.rectsEqual(frame, { x: 0, y: 0, width: 95, height: 100 }), "The frame with 5px right border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border is");
 
   // Top 10px border.
   SC.run(function () {
@@ -134,8 +134,8 @@ test("The borderFrame property of the view should be correct for view with useSt
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 0, y: 10, width: 95, height: 90 }, "The frame with 5px right border & 10px top border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border is");
+  ok(SC.rectsEqual(frame, { x: 0, y: 10, width: 95, height: 90 }), "The frame with 5px right border & 10px top border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border & 10px top border is");
 
   // Left 15px border.
   SC.run(function () {
@@ -145,8 +145,8 @@ test("The borderFrame property of the view should be correct for view with useSt
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 15, y: 10, width: 80, height: 90 }, "The frame with 5px right border & 10px top border & 15px left border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border is");
+  ok(SC.rectsEqual(frame, { x: 15, y: 10, width: 80, height: 90 }), "The frame with 5px right border & 10px top border & 15px left border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border & 10px top border & 15px left border is");
 
   // Bottom 20px border.
   SC.run(function () {
@@ -156,8 +156,8 @@ test("The borderFrame property of the view should be correct for view with useSt
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 15, y: 10, width: 80, height: 70 }, "The frame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
+  ok(SC.rectsEqual(frame, { x: 15, y: 10, width: 80, height: 70 }), "The frame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 5px right border & 10px top border & 15px left border & 20px bottom border is");
 
   // 25px border.
   SC.run(function () {
@@ -167,8 +167,35 @@ test("The borderFrame property of the view should be correct for view with useSt
   frame = view.get('frame');
   borderFrame = view.get('borderFrame');
 
-  same(frame, { x: 25, y: 25, width: 50, height: 50 }, "The frame with 25px border is");
-  same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 25px border is");
+  ok(SC.rectsEqual(frame, { x: 25, y: 25, width: 50, height: 50 }), "The frame with 25px border is");
+  ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, width: 100, height: 100 }), "The borderFrame with 25px border is");
 
   pane.destroy();
 });
+
+test("borderFrame on a view with a scale.", function() {
+  var borderFrame,
+    frame,
+    pane;
+
+    SC.run(function() {
+      view.adjust({ border: 2 });
+    });
+
+    frame = view.get('frame');
+    borderFrame = view.get('borderFrame');
+
+    ok(SC.rectsEqual(frame, { x: 2, y: 2, height: 96, width: 96 }), "PRELIM: The unscaled frame with border: 2 is correct.");
+    ok(SC.rectsEqual(borderFrame, { x: 0, y: 0, height: 100, width: 100 }), "PRELIM: The unscaled borderFrame with border: 2 is correct.");
+
+    SC.run(function() {
+      view.adjust({ scale: 0.5 });
+    });
+
+    frame = view.get('frame');
+    borderFrame = view.get('borderFrame');
+
+    ok(SC.rectsEqual(frame, { x: 26, y: 26, height: 48, width: 48 }), "The scaled frame with border: 2 is correct.");
+    ok(SC.rectsEqual(borderFrame, { x: 25, y: 25, height: 50, width: 50 }), "The scaled borderFrame with border: 2 is correct.");
+
+});

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

@@ -22,6 +22,181 @@ module("SC.View:childViewLayout", {
 
 });
 
-test("", function () {
+test("basic VERTICAL_STACK", function () {
+  SC.run(function() {
+    view = SC.View.create({
 
+      childViewLayout: SC.View.VERTICAL_STACK,
+
+      childViewLayoutOptions: {
+        paddingBefore: 10,
+        paddingAfter: 20,
+        spacing: 5
+      },
+      childViews: ['sectionA', 'sectionB', 'sectionC'],
+      layout: { left: 10, right: 10, top: 20 },
+      sectionA: SC.View.design({
+        layout: { height: 100 }
+      }),
+
+      sectionB: SC.View.design({
+        layout: { border: 1, height: 50 }
+      }),
+
+      sectionC: SC.View.design({
+        layout: { left: 10, right: 10, height: 120 }
+      })
+
+    });
+  });
+
+  equals(view.sectionA.layout.top, 10, "sectionA top should be 10");
+  equals(view.sectionB.layout.top, 115, "sectionB top should be 115");
+  equals(view.sectionC.layout.top, 170, "sectionC top should be 170");
+  equals(view.layout.height, 310, "view height should be 310");
+
+});
+
+test("basic HORIZONTAL_STACK", function () {
+  SC.run(function() {
+    view = SC.View.create({
+      childViewLayout: SC.View.HORIZONTAL_STACK,
+      childViewLayoutOptions: {
+        paddingBefore: 10,
+        paddingAfter: 20,
+        spacing: 5
+      },
+      childViews: ['sectionA', 'sectionB', 'sectionC'],
+      layout: { left: 10, bottom: 20, top: 20 },
+
+      sectionA: SC.View.design({
+        layout: { width: 100 }
+      }),
+
+      sectionB: SC.View.design({
+        layout: { border: 1, width: 50 }
+      }),
+
+      sectionC: SC.View.design({
+        layout: { top: 10, bottom: 10, width: 120 }
+      })
+    });
+  });
+
+  equals(view.sectionA.layout.left, 10, "sectionA left should be 10");
+  equals(view.sectionB.layout.left, 115, "sectionB left should be 115");
+  equals(view.sectionC.layout.left, 170, "sectionC left should be 170");
+  equals(view.layout.width, 310, "view width should be 310");
+
+});
+
+test("HORIZONTAL_STACK - with fillRatio", function () {
+  var view = null;
+  SC.run(function() {
+    view = SC.View.create({
+      layout: { height: 10, width: 200 },
+      childViewLayout: SC.View.HORIZONTAL_STACK,
+      childViewLayoutOptions: {
+        resizeToFit: NO,
+        paddingBefore: 10,
+        paddingAfter: 20,
+        spacing: 10
+      },
+      childViews: [ "c1", "c2", "c3", "c4", "c5" ],
+
+      c1: SC.View.create({
+        layout: { height: 10, width: 10 },
+      }),
+      c2: SC.View.create({
+        layout: { height: 10 },
+        fillRatio: 1
+      }),
+      c3: SC.View.create({
+        layout: { height: 10, width: 10 },
+      }),
+      c4: SC.View.create({
+        layout: { height: 10 },
+        fillRatio: 2
+      }),
+      c5: SC.View.create({
+        layout: { height: 10 },
+        border: 1,
+        isVisible: NO
+      }),
+    });
+  });
+
+  equals(view.c1.layout.left, 10, "c1 left should be 10");
+  equals(view.c2.layout.left, 30, "c2 left should be 10");
+  equals(view.c2.get( "borderFrame" ).width, 40, "c2 width should be 40");
+  equals(view.c3.layout.left, 80, "c3 left should be 10");
+  equals(view.c4.layout.left, 100, "c4 left should be 10");
+  equals(view.c4.get( "borderFrame" ).width, 80, "c4 width should be 80");
+
+  SC.run(function() {
+    view.c2.set( "isVisible", NO );
+    view.c4.set( "isVisible", NO );
+    view.c5.set( "isVisible", YES );
+  });
+
+  equals(view.c1.layout.left, 10, "c1 left should be 10");
+  equals(view.c3.layout.left, 30, "c3 left should be 30");
+  equals(view.c5.layout.left, 50, "c5 left should be 50");
+  equals(view.c5.get( "borderFrame" ).width, 130, "being the last child, c5 will extend to fill the available space, width should be 130");
+});
+
+
+test("VERTICAL_STACK - with fillRatio", function () {
+  var view = null;
+  SC.run(function() {
+    view = SC.View.create({
+      layout: { width: 10, height: 200 },
+      childViewLayout: SC.View.VERTICAL_STACK,
+      childViewLayoutOptions: {
+        resizeToFit: NO,
+        paddingBefore: 10,
+        paddingAfter: 20,
+        spacing: 10
+      },
+      childViews: [ "c1", "c2", "c3", "c4", "c5" ],
+
+      c1: SC.View.create({
+        layout: { width: 10, height: 10 },
+      }),
+      c2: SC.View.create({
+        layout: { width: 10 },
+        fillRatio: 1
+      }),
+      c3: SC.View.create({
+        layout: { width: 10, height: 10 },
+      }),
+      c4: SC.View.create({
+        layout: { width: 10 },
+        fillRatio: 2
+      }),
+      c5: SC.View.create({
+        layout: { width: 10 },
+        border: 1,
+        isVisible: NO
+      }),
+    });
+  });
+
+  equals(view.c1.layout.top, 10, "c1 top should be 10");
+  equals(view.c2.layout.top, 30, "c2 top should be 10");
+  equals(view.c2.get( "borderFrame" ).height, 40, "c2 height should be 40");
+  equals(view.c3.layout.top, 80, "c3 top should be 10");
+  equals(view.c4.layout.top, 100, "c4 top should be 10");
+  equals(view.c4.get( "borderFrame" ).height, 80, "c4 height should be 80");
+
+  SC.run(function() {
+    view.c2.set( "isVisible", NO );
+    view.c4.set( "isVisible", NO );
+    view.c5.set( "isVisible", YES );
+  });
+
+  equals(view.c1.layout.top, 10, "c1 top should be 10");
+  equals(view.c3.layout.top, 30, "c3 top should be 30");
+  equals(view.c5.layout.top, 50, "c5 top should be 50");
+  equals(view.c5.get( "borderFrame" ).height, 130, "being the last child, c5 will extend to fill the available space, height should be 130");
 });