sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/scroll/ui.js

@@ -5,18 +5,22 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*global module test ok equals same stop start */
+/*global module, test, ok, equals, expect, stop, start */
 
-(function() {
+(function () {
     var appleURL="http://photos4.meetupstatic.com/photos/event/4/6/9/9/600_4518073.jpeg";
-    var iv=SC.ImageView.design({value: appleURL, layout: {height:400, width:400}});
+    var iv = SC.ImageView.design({value: appleURL, layout: { height:400, width:400 }});
     var pane = SC.ControlTestPane.design({ height: 100 })
     .add("basic", SC.ScrollView, {
 
     })
 
     .add("basic2", SC.ScrollView, {
-        contentView: iv
+        contentView: SC.View.extend({
+          layout: { height: 400, width: 400 },
+          backgroundColor: 'lightblue',
+          wantsAcceleratedLayer: true
+        })
     })
 
     .add("basic3", SC.ScrollView, {
@@ -26,28 +30,51 @@
       autohidesVerticalScroller: NO
     })
 
+    .add("basic same size content", SC.ScrollView, {
+      horizontalOverlay: YES,
+      verticalOverlay: YES,
+      contentView: SC.View.extend({
+        layout: { height: 100 },
+        backgroundColor: 'lightblue'
+      })
+    })
+
     .add("disabled", SC.ScrollView, {
       isEnabled: NO
     })
 
-    .add("verticalScrollerBottom",SC.ScrollView, {
+    .add("verticalScrollerLayout",SC.ScrollView, {
       contentView: iv,
       hasHorizontalScroller : NO,
-      verticalScrollerBottom: 16,
+      verticalScrollerLayout: { right: 0, top: 0, bottom: 16 },
       isVerticalScrollerVisible: YES,
       autohidesVerticalScroller: NO
 
     })
     .add("aria-attributes", SC.ScrollView, {
       contentView: iv
+    })
+
+    .add("overlaidScrollers", SC.ScrollView, {
+      verticalOverlay: YES,
+      horizontalOverlay: YES
+    })
+
+    .add("overlaid touch scrollers", SC.ScrollView, {
+      contentView: iv,
+      verticalOverlay: YES,
+      verticalScrollerView: SC.OverlayScrollerView,
+      horizontalOverlay: YES,
+      horizontalScrollerView: SC.OverlayScrollerView
     });
 
+
   // ..........................................................
   // TEST VIEWS
   //
   module('SC.ScrollView UI', pane.standardSetup());
 
-  test("basic", function() {
+  test("Basic presence of child views.", function() {
     var view = pane.view('basic');
     ok(!view.$().hasClass('disabled'), 'should not have disabled class');
     ok(!view.$().hasClass('sel'), 'should not have sel class');
@@ -70,55 +97,84 @@
     ok(verticalScrollerView, 'default scroll view has a vertical scroller');
   });
 
-  test("basic2", function() {
-    var view = pane.view('basic2');
+  test("Basic class names, offsets and CSS transforms", function() {
+    var view = pane.view('basic2'),
+      contentView = view.get('contentView'),
+      elem = contentView.getPath('layer'),
+      transformAttr = SC.browser.experimentalStyleNameFor('transform'),
+      transformTemplate = 'translateX(%@px) translateY(%@px) translateZ(%@px) scale(%@)';
+
+    // CLASS
     ok(view.$().hasClass('sc-scroll-view'), 'should have sc-scroll-view class');
 
+    // HORIZONTAL SCROLLER
     var horizontalScrollerView = view.get('horizontalScrollerView');
     ok(view.get('hasHorizontalScroller'), 'default scroll view wants a horizontal scroller');
     ok(horizontalScrollerView, 'default scroll view has a horizontal scroller');
     ok(horizontalScrollerView.$().hasClass('sc-horizontal'), 'should have sc-horizontal class');
-    var maxHScroll = view.maximumHorizontalScrollOffset();
+    var maxHScroll = view.get('maximumHorizontalScrollOffset');
     ok((maxHScroll > 0), 'Max horizontal scroll should be greater than zero');
 
+    // VERTICAL SCROLLER
     var verticalScrollerView = view.get('verticalScrollerView');
     ok(view.get('hasVerticalScroller'), 'default scroll view wants a vertical scroller');
     ok(verticalScrollerView, 'default scroll view has a vertical scroller');
     ok(verticalScrollerView.$().hasClass('sc-vertical'), 'should have sc-vertical class');
-    var maxVScroll = view.maximumVerticalScrollOffset();
+    var maxVScroll = view.get('maximumVerticalScrollOffset');
     ok((maxVScroll > 0), 'Max vertical scroll should be greater than zero');
 
-    view.scrollTo(0,100);
-    SC.RunLoop.begin().end();
-    var elem = view.get('containerView').$()[0];
-    equals(elem.scrollTop, 100, 'vertical scrolling should adjust scrollTop of container view');
+    // SCROLLING VERTICALLY
+    SC.run(function() {
+      view.scrollTo(0,100);
+    });
+    equals(view.get('verticalScrollOffset'), 100, 'Vertical scrolling should adjust verticalScrollOffset');
+    if (SC.platform.get('supportsCSSTransforms')) {
+      equals(elem.style[transformAttr], transformTemplate.fmt(0, -100, 0, 1), 'Vertical scrolling should adjust transform on the contentView layer');
+    }
+    // TODO: Simulate unsupported browser and test fallback (containerView's marginTop)
+
+    // SCROLLING HORIZONTALLY
+    SC.run(function() {
+      view.scrollTo(50,0);
+    });
+    equals(view.get('horizontalScrollOffset'), 50, 'horizontal scrolling should adjust horizontalScrollOffset');
+    if (SC.platform.get('supportsCSSTransforms')) {
+      equals(elem.style[transformAttr], transformTemplate.fmt(-50, 0, 0, 1), 'Horizontal scrolling should adjust transform on the contentView layer.');
+    }
+    // TODO: Simulate unsupported browser and test fallback (containerView's marginLeft)
+
+    // ADJUSTING CONTENT LAYOUT WHILE SCROLLED SHOULD STAY CENTERED
+    // Reproducing this bug requires that there be no adjustment already scheduled.
+    SC.run(function() {
+      contentView.adjust('height', 450);
+    });
 
-    view.scrollTo(50,0);
-    SC.RunLoop.begin().end();
-    elem = view.get('containerView').$()[0];
-    equals(elem.scrollLeft, 50, 'horizontal scrolling should adjust scrollLeft of container view');
+    if (SC.platform.get('supportsCSSTransforms')) {
+      equals(elem.style[transformAttr], transformTemplate.fmt(-50, 0, 0, 1), 'Adjusting content size should not affect scroll transform positioning');
+    }
+    // TODO: Simulate unsupported browser and test fallback (containerView's marginLeft)
   });
 
-  test("basic3", function() {
+  test("Basic scroller visibility", function() {
     var view = pane.view('basic3');
-    view.set('isHorizontalScrollerVisible',NO);
-    ok(!view.get('canScrollHorizontal'),'cannot scroll in horizontal direction');
-    ok(view.$().hasClass('sc-scroll-view'), 'should have sc-scroll-view class');
+
+    SC.run(function() { view.set('isHorizontalScrollerVisible', NO); });
+    ok(!view.get('canScrollHorizontal'), 'cannot scroll in horizontal direction');
     var horizontalScrollerView = view.get('horizontalScrollerView');
     ok(view.get('hasHorizontalScroller'), 'default scroll view wants a horizontal scroller');
     ok(horizontalScrollerView, 'default scroll view has a horizontal scroller');
     ok(horizontalScrollerView.$().hasClass('sc-horizontal'), 'should have sc-horizontal class');
-    var maxHScroll = view.maximumHorizontalScrollOffset();
-    equals(maxHScroll , 0, 'Max horizontal scroll should be equal to zero');
+    // var maxHScroll = view.get('maximumHorizontalScrollOffset');
+    // equals(maxHScroll , 0, 'Max horizontal scroll should be equal to zero');
 
-    view.set('isVerticalScrollerVisible',NO);
+    SC.run(function() { view.set('isVerticalScrollerVisible', NO); });
     ok(!view.get('canScrollVertical'),'cannot scroll in vertical direction');
     var verticalScrollerView = view.get('verticalScrollerView');
     ok(view.get('hasVerticalScroller'), 'default scroll view wants a vertical scroller');
     ok(verticalScrollerView, 'default scroll view has a vertical scroller');
     ok(verticalScrollerView.$().hasClass('sc-vertical'), 'should have sc-vertical class');
-    var maxVScroll = view.maximumVerticalScrollOffset();
-    equals(maxVScroll ,0, 'Max vertical scroll should be equal to zero');
+    // var maxVScroll = view.get('maximumVerticalScrollOffset');
+    // equals(maxVScroll, 0, 'Max vertical scroll should be equal to zero');
   });
 
   test("disabled", function() {
@@ -128,25 +184,32 @@
    });
 
    test("non-zero bottom in vertical scrollbar", function() {
-      var view = pane.view('verticalScrollerBottom');
-      equals(view.get('verticalScrollerBottom'),16, "should have verticalScrollerBottom as ");
+      var view = pane.view('verticalScrollerLayout');
       var scroller = view.get('verticalScrollerView') ;
-      ok(scroller, 'should have vertical scroller view ');
+      ok(scroller, 'should have vertical scroller view');
       equals(scroller.get('layout').bottom,16, 'should have layout.bottom of scroller as ');
       equals(scroller.$()[0].style.bottom,'16px', 'should have style.bottom of scroller as ');
     });
 
-   test('ScrollView should readjust scrollTop/scrollLeft if layer changes', function() {
-     var view = pane.view('basic2'), cv = view.get('contentView'), container = view.get('containerView') ;
-     view.scrollTo(10, 10);
-     SC.RunLoop.begin().end();
-     equals(container.get('layer').scrollLeft, 10, 'precond - scrollLeft is set to 10');
-     equals(container.get('layer').scrollTop, 10, 'precond- scrollTop is set to 10');
-     cv.replaceLayer();
-     SC.RunLoop.begin().end();
-     equals(container.get('layer').scrollLeft, 10, 'scrollLeft should be readjusted to 10');
-     equals(container.get('layer').scrollTop, 10, 'scrollTop should be readjust to 10');
-   });
+   test('ScrollView should readjust scroll transform if layer changes', function() {
+     var view = pane.view('basic2'), cv = view.get('contentView'),
+      prevTransform;
+
+    // Get the previous style transform.
+    SC.run(function() {
+      view.scrollTo(10, 10);
+      view._sc_repositionContentViewUnfiltered(); // This method is PRIVATE. (Called here to cheat, synchronously testing an asynchronous operation.)
+    });
+    prevTransform = cv.get('layer').style[SC.browser.experimentalStyleNameFor('transform')];
+
+    SC.run(cv.replaceLayer, cv);
+
+    equals(cv.get('layer').style[SC.browser.experimentalStyleNameFor('transform')],
+      prevTransform,
+      'The new layer has had the scroll transform style applied');
+
+    // TODO: Simulate transform-not-supported environment and test fallback (marginTop/Left)
+  });
 
   test('Scroller views of scroll view should have aria attributes set', function() {
     var view = pane.view("aria-attributes"),
@@ -156,15 +219,121 @@
 
     equals(horizontalScrollerView.$().attr('aria-controls'), contentView.get('layerId'), "horizontalScroller has aria-controls set");
     equals(verticalScrollerView.$().attr('aria-controls'), contentView.get('layerId'), "verticalScroller has aria-controls set");
+
     equals(horizontalScrollerView.$().attr('aria-orientation'), 'horizontal', "horizontalScroller has aria-orientation set");
     equals(verticalScrollerView.$().attr('aria-orientation'), 'vertical', "verticalScroller has aria-orientation set");
+
     equals(horizontalScrollerView.$().attr('aria-valuemin'), 0, "horizontalScroller has aria-valuemin set");
     equals(verticalScrollerView.$().attr('aria-valuemin'), 0, "verticalScroller has aria-valuemin set");
-    equals(horizontalScrollerView.$().attr('aria-valuemax'), view.get('maximumHorizontalScrollOffset') - horizontalScrollerView.get('scrollbarThickness'), "horizontalScroller has aria-valuemax set");
-    equals(verticalScrollerView.$().attr('aria-valuemax'), view.get('maximumVerticalScrollOffset') - verticalScrollerView.get('scrollbarThickness'), "verticalScroller has aria-valuemax set");
+
+    equals(horizontalScrollerView.$().attr('aria-valuemax'), view.get('maximumHorizontalScrollOffset'), "horizontalScroller has aria-valuemax set");
+    equals(verticalScrollerView.$().attr('aria-valuemax'), view.get('maximumVerticalScrollOffset'), "verticalScroller has aria-valuemax set");
+
     equals(horizontalScrollerView.$().attr('aria-valuenow'), view.get('horizontalScrollOffset'), "horizontalScroller has aria-valuenow set");
-    equals(verticalScrollerView.$().attr('aria-valuenow'), view.get('horizontalScrollOffset'), "verticalScroller has aria-valuenow set");
+    equals(verticalScrollerView.$().attr('aria-valuenow'), view.get('verticalScrollOffset'), "verticalScroller has aria-valuenow set");
 
+    // Aria max-value should change when the content's size is adjusted.
+    var previousHeight = contentView.getPath('layout.height');
+    SC.run(function() {
+      contentView.adjust('height', previousHeight + 50);
+    });
+    equals(verticalScrollerView.$().attr('aria-valuemax'), view.get('maximumVerticalScrollOffset'), 'Changing the maximum scroll offset changes the aria-maxvalue');
+
+  });
+
+  test('Scroller fading', function() {
+    var view = pane.view('overlaid touch scrollers'),
+        verticalScroller = view.get('verticalScrollerView'),
+        opac;
+
+    stop(2000);
+    expect(2);
+    SC.RunLoop.begin();
+    verticalScroller.fadeOut(0.1);
+    SC.RunLoop.end();
+    setTimeout(function() {
+      opac = verticalScroller.$().css('opacity');
+      equals(opac, '0', 'after fadeout, scroller opacity should equal zero');
+      SC.RunLoop.begin();
+      verticalScroller.fadeIn(0.1);
+      view._sc_repositionContentViewUnfiltered(); // This method is PRIVATE. (Called here to cheat, synchronously testing an asynchronous operation.)
+      SC.RunLoop.end();
+      setTimeout(function() {
+        opac = verticalScroller.$().css('opacity');
+        equals(opac, '0.5', 'after fadein, scroller opacity should equal 0.5');
+        start();
+      }, 200);
+
+    }, 1000);
+  });
+
+  test('ScrollView-directed scroller fading', function() {
+    var view = pane.view('overlaid touch scrollers'),
+        verticalScroller = view.get('verticalScrollerView'),
+        opac;
+
+    stop(2000);
+    expect(2);
+    SC.RunLoop.begin();
+    view._sc_fadeOutHorizontalScroller();
+    view._sc_fadeOutVerticalScroller();
+    SC.RunLoop.end();
+    setTimeout(function() {
+      opac = verticalScroller.$().css('opacity');
+      equals(opac, '0', 'after fadeout, scroller opacity should equal zero');
+      SC.RunLoop.begin();
+      view._sc_fadeInHorizontalScroller();
+      view._sc_fadeInVerticalScroller();
+      SC.RunLoop.end();
+      setTimeout(function() {
+        opac = verticalScroller.$().css('opacity');
+        equals(opac, '0.5', 'after fadeout, scroller opacity should equal 0.5');
+        start();
+      }, 200);
+
+    }, 1000);
+  });
+
+  test('Adjusting contentView', function() {
+    var view = pane.view('basic same size content');
+
+    ok(!view.get('canScrollVertical'), "PRELIM: Can't scroll vertical.");
+
+    SC.run(function() {
+      view.contentView.adjust('height', 200);
+    });
+
+    ok(view.get('canScrollVertical'), "Can now scroll vertical.");
+  });
+
+  test('Replacing contentView', function() {
+    var view = pane.view('basic2'),
+      newContent;
+
+    // Replacing the content view.
+    SC.run(function() {
+      newContent = SC.View.create({ backgroundColor: 'blue' });
+    });
+    equals(newContent.get('viewState'), SC.View.UNRENDERED, 'PRELIM: New view is unrendered');
+
+    SC.run(function() {
+      view.set('contentView', newContent);
+    });
+    ok(view.getPath('containerView.contentView') === newContent, 'New content has been successfully loaded into the container view.');
+    equals(newContent.get('viewState'), SC.View.ATTACHED_SHOWN, 'New content has been rendered and attached.');
+
+    // Replacing the content view on an unrendered view.
+    SC.run(function() {
+      view = SC.ScrollView.create();
+      newContent = SC.View.create({ backgroundColor: 'pink' });
+      view.set('contentView', newContent);
+    });
+    ok(view.getPath('containerView.contentView') === newContent, "New content has been successfully loaded into the unrendered view's container view.");
+
+    SC.run(function() {
+      view._doRender();
+    });
+    equals(newContent.get('viewState'), SC.View.UNATTACHED_BY_PARENT, 'New content renders along with the rest of the view');
   });
 
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/scroller.js

@@ -42,17 +42,17 @@ module("SC.ScrollerView",{
   }
 });
 
-test('value', function() {
+test('value & displayValue', function() {
   equals(view1.get('maximum'), 100, 'precond - view has maximum of 100');
   equals(view1.get('minimum'), 10, 'precond - view has a minimum of 10');
   view1.set('value', 300);
-  equals(view1.get('value'), view1.get('maximum'), 'value is set to maximum if attempting to set higher than maximum');
+  equals(view1.get('displayValue'), view1.get('maximum'), 'displayValue is set to maximum if attempting to set value higher than maximum');
   view1.set('maximum', 50);
-  equals(view1.get('value'), view1.get('maximum'), 'value should change if maximum changes');
+  equals(view1.get('displayValue'), view1.get('maximum'), 'displayValue should change if maximum changes');
   view1.set('value', 0);
-  equals(view1.get('value'), view1.get('minimum'), 'value is set to minimum if attempt to set lower than minimum');
+  equals(view1.get('displayValue'), view1.get('minimum'), 'displayValue is set to minimum if attempt to set value lower than minimum');
   view1.set('minimum', 15);
-  equals(view1.get('value'), view1.get('minimum'), 'value should change if minimum changes');
+  equals(view1.get('displayValue'), view1.get('minimum'), 'displayValue should change if minimum changes');
 });
 
 test('isEnabled', function() {

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/segmented/methods.js

@@ -5,39 +5,42 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*global module test htmlbody ok equals same stop start */
+/*global module, test, ok, equals */
 
 var iconURL = sc_static("sproutcore-32.png");
 var pane, view;
 
 module("SC.SegmentedView", {
   setup: function() {
-    SC.RunLoop.begin();
-    pane = SC.MainPane.create({
-      childViews: [
-        SC.SegmentedView.extend({
-          items: [
-          { value: "Item1", icon: iconURL },
-          { value: "Item2", icon: iconURL },
-          { value: "Item3", icon: iconURL }],
-          itemTitleKey: 'value',
-          itemValueKey: 'value',
-          itemIconKey: 'icon',
-          itemActionKey: 'action',
-          value: "Item1 Item3".w(),
-          allowsEmptySelection: NO,
-          layout: { height: 25, width: 400 }
-        })]
+    SC.run(function () {
+      pane = SC.MainPane.create({
+        childViews: [
+          SC.SegmentedView.extend({
+            items: [
+            { value: "Item1", icon: iconURL, width: 100 },
+            { value: "Item2", icon: iconURL, width: 100 },
+            { value: "Item3", icon: iconURL, width: 100 }],
+            itemTitleKey: 'value',
+            itemValueKey: 'value',
+            itemIconKey: 'icon',
+            itemWidthKey: 'width',
+            itemActionKey: 'action',
+            value: "Item1 Item3".w(),
+            allowsEmptySelection: NO,
+            layout: { height: 25, width: 400 }
+          })]
+      });
+      pane.append(); // make sure there is a layer...
     });
-    pane.append(); // make sure there is a layer...
-    SC.RunLoop.end();
 
     view = pane.childViews[0];
   },
 
   teardown: function() {
-    pane.remove();
-    pane = view = null ;
+    SC.run(function () {
+      pane.destroy();
+      pane = view = null;
+    });
   }
 });
 
@@ -55,7 +58,7 @@ test("Check that properties are mapped correctly", function() {
   equals(childViews[0].value, "Item1", 'Computed properties should match');
   equals(childViews[0].isEnabled, true, 'Computed properties should match');
   equals(childViews[0].icon, iconURL, 'Computed properties should match');
-  equals(childViews[0].width, null, 'Computed properties should match');
+  equals(childViews[0].width, 100, 'Computed properties should match');
   equals(childViews[0].toolTip, null, 'Computed properties should match');
   equals(childViews[0].index, 0, 'Computed properties should match');
 });
@@ -96,3 +99,51 @@ test("Check the values of value", function() {
   view.triggerItemAtIndex(2);
   equals(view.get('value'), null, "the value should go to null if allowsMultipleSelection is false and allowsEmptySelection is true.");
 });
+
+// Test that if the clientX & clientY are over an element, that the proper index of that view is returned.
+// Note: the test segmented view is centered by default and the items are only 50px wide.
+test('displayItemIndexForEvent(evt)', function () {
+  var evt = {};
+
+  // Check not over the view.
+  evt.target = view.get('layer');
+  evt.clientX = 500;
+  evt.clientY = 500;
+  equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 500,500 which is not over the view element at all should return");
+
+  // Check not over any child elements but in view at 0,0. This tests a special accessibility fix-up where events at 0,0
+  // are converted into a point over an element, because WebKit sends clientX & client& of 0,0 for accessibility events.
+  evt.target = view.get('layer');
+  evt.clientX = 0;
+  evt.clientY = 0;
+  equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 0,0 which is not over any child elements, but is over the view element should return");
+
+  // Check not over any child elements but in view at 1,1.
+  evt.clientX = 1;
+  evt.clientY = 1;
+  equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 1,1 which is not over any child elements, but is over the view element should return");
+
+  // Check over first child element.
+  evt.target = view.get('childViews')[0].get('layer');
+  evt.clientX = 51;
+  evt.clientY = 0;
+  equals(view.displayItemIndexForEvent(evt), 0, "Clicking at 0,51 which is over the first child element should return");
+
+  // Check over second child element.
+  evt.target = view.get('childViews')[1].get('layer');
+  evt.clientX = 151;
+  evt.clientY = 0;
+  equals(view.displayItemIndexForEvent(evt), 1, "Clicking at 0,151 which is over the second child element should return");
+
+  // Check over third child element.
+  evt.target = view.get('childViews')[2].get('layer');
+  evt.clientX = 251;
+  evt.clientY = 0;
+  equals(view.displayItemIndexForEvent(evt), 2, "Clicking at 0,251 which is over the third child element should return");
+
+  // Check past third child element.
+  evt.target = view.get('layer');
+  evt.clientX = 351;
+  evt.clientY = 0;
+  equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 0,351 which is past the third child element should return");
+});