sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/foundation/tests/views/container/methods.js

@@ -5,6 +5,14 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*global module test htmlbody ok equals same stop start */
+/** @class
+  @extends SC.Theme
+  @since SproutCore 1.1
+*/
+SC.EmptyTheme = SC.Theme.extend({
+  classNames: ["sc-empty"]
+});
+
+SC.Theme.register("sc-empty", SC.EmptyTheme);
 
 module("TODO: Test SC.ContainerView Methods");

data/lib/frameworks/sproutcore/frameworks/foundation/tests/views/container/ui.js

@@ -19,7 +19,16 @@
   pane.add("disabled", SC.ContainerView, {
       isEnabled: NO
     });
-    
+
+  pane.add("nowShowingDefault", SC.ContainerView, {
+      nowShowing: 'start',
+
+      start: SC.LabelView.design({
+        value: 'Start'
+      })
+
+    });
+
     // .add("disabled - single selection", SC.ListView, {
     //   isEnabled: NO,
     //   content: content,
@@ -84,21 +93,25 @@
   test("changing nowShowing", function() {
     var view = pane.view('basic');
     // Set nowShowing to an instantiated object.
-    var viewToAdd = SC.LabelView.create({value: 'Test view.'});
+    var viewToAdd = SC.LabelView.create({value: 'View1'});
     view.set('nowShowing', viewToAdd);
-    ok(view.get('contentView') instanceof SC.View, 'contentView changes as intended when an instantiated view is passed to nowShowing');
+    equals(view.get('contentView').get('value'), 'View1', 'contentView changes as intended when an instantiated view is passed to nowShowing');
     
     // Set nowShowing to an uninstantiated object.
-    viewToAdd = SC.LabelView.design({value: 'Test view.'});
+    viewToAdd = SC.LabelView.design({value: 'View2'});
     view.set('nowShowing', viewToAdd);
-    ok(view.get('contentView') instanceof SC.View, 'contentView changes as intended when an uninstantiated view (class) is passed to nowShowing');
+    equals(view.get('contentView').get('value'), 'View2', 'contentView changes as intended when an uninstantiated view (class) is passed to nowShowing');
     
     // Set nowShowing to a non-view object.
     viewToAdd = SC.Object;
     view.set('nowShowing', viewToAdd);
     equals(view.get('contentView'), null, 'contentView changes to null when nowShowing is set to a non-view');
     
-    // Set nowShowing to a string.  (How, here?) (No idea.)
+    // Set nowShowing to a string.
+    var viewForString = SC.LabelView.create({value: 'View3'});
+    view.set('label', viewForString);
+    view.set('nowShowing', 'label');
+    equals(view.get('contentView').get('value'), 'View3', 'contentView changes as intended when an instantiated view is passed to nowShowing');
     
     // Set nowShowing to a nonexistent string.
     viewToAdd = 'NonexistentNamespace.NonexistentViewClass';
@@ -112,4 +125,16 @@
     
   });
 
+  test("default nowShowing", function(){
+    var view = pane.view("nowShowingDefault");
+    view.awake();
+
+    var contentView = view.get('contentView');
+
+    // contentView should reflect nowShowing
+    ok(contentView, "should have contentView");
+    equals(contentView.get('value'), 'Start', 'contentView value should be "Start"');
+
+  });
+
 })();

data/lib/frameworks/sproutcore/frameworks/foundation/tests/views/image/ui.js

@@ -9,51 +9,461 @@
 
 htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
 (function() {
-  var appleURL='http://photos4.meetupstatic.com/photos/event/4/6/9/9/600_4518073.jpeg';
+  var logoURL = "http://www.sproutcore.com/assets/images/logo.png";
+  var sampleURLs = [ "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/zion-hiker-the-sweetie-hiking-in-zion-narrows_w725_h544.jpg",
+"http://www.public-domain-image.com/cache/people-public-domain-images-pictures/children-kids-public-domain-images-pictures/children-playing_w562_h725.jpg",
+"http://www.public-domain-image.com/cache/architecture-public-domain-images-pictures/fountain-public-domain-images-pictures/water-fountain-in-park_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/winter-at-bryce-canyon_w725_h544.jpg", "http://www.public-domain-image.com/cache/fauna-animals-public-domain-images-pictures/prairie-dog-public-domain-images-pictures/prairie-dog-pups_w725_h483.jpg", "http://www.public-domain-image.com/cache/fauna-animals-public-domain-images-pictures/prairie-dog-public-domain-images-pictures/prairie-rattlesnake-crotalus-viridis_w725_h484.jpg", "http://www.public-domain-image.com/cache/fauna-animals-public-domain-images-pictures/tigers-public-domain-images-pictures/bengal-tiger_w725_h486.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/field-public-domain-images-pictures/wooden-logs-in-field_w725_h483.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/field-public-domain-images-pictures/wheat-yellow-in-field_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/field-public-domain-images-pictures/vineyards_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/autumn-public-domain-images-pictures/old-trees-with-leaves-on-ground-in-autumn_w725_h484.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/yaki-point-at-the-grand-canyon_w725_h547.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/grand-canyons-overlook-railings-pointing_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/coast-public-domain-images-pictures/sand-ocean-tidepools-sea-swimming-swimmers-waves_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/coast-public-domain-images-pictures/waves-breaking-rocks_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/sand-public-domain-images-pictures/sand-footstep_w725_h482.jpg"];
 
   var pane = SC.ControlTestPane.design()
-    .add("image_not_loaded", SC.ImageView, { 
-      value: null, layout : {width: 200, height: 300}
+    .add("image_not_loaded", SC.ImageView, {
+      value: null, layout : { width: 200, height: 300 },
+      useCanvas: NO
     })
-    .add("image_loaded", SC.ImageView, { 
-      value: appleURL, status:'loaded', layout : {width: 200, height: 300}
-    });
-    
-    pane.show();
-
-
-    module('SC.ImageView ui', pane.standardSetup());
-  
-  
-    test("Verify that all the rendering properties of an image that is being loaded are correct", function() {
-      var view = pane.view('image_not_loaded');
-
-      ok(view.get('isVisibleInWindow'), 'image_not_loaded is visible in window');
-
-      view.set('value', appleURL);
-      ok(view.get('status') !== 'loaded', 'PRECOND - status should not be loaded (status=%@)'.fmt(view.get('status')));
-     
-      var url = view.$().attr('src')
-  ok((url.indexOf('base64')!=-1) || (url.indexOf('blank.gif')!=-1), "The src should be blank URL. url = %@".fmt(url));    
-    });
-    
-    test("Verify that all the rendering properties of an image that is loaded are correct", function() {
-      ok(pane.view('image_loaded').get('isVisibleInWindow'), 'image_loaded is visible in window');
-      equals(pane.view('image_loaded').$().attr('src'), appleURL, "should be the same url");    
-    });
-    
-    test("Verify that the tooltip is correctly being set as both the title and attribute (disabling localization for this test)", function() {
-      var imageView = pane.view('image_loaded');
-      var testToolTip = 'This is a test tooltip';
-      
-      SC.RunLoop.begin();
-      imageView.set('localization', NO);
-      imageView.set('toolTip', testToolTip);
-      SC.RunLoop.end();
-      
-      ok((imageView.$().attr('title') === testToolTip), "The title attribute should be set to \"" + testToolTip + "\"");
-      ok((imageView.$().attr('alt') === testToolTip), "The alt attribute should be set to \"" + testToolTip + "\"");
-    });
-    
+    .add("image_loaded", SC.ImageView, {
+      value: logoURL, layout : { width: 200, height: 300 },
+      useImageQueue: NO,
+      useCanvas: NO
+    })
+    .add('sprite_image', SC.ImageView, {
+      layout: { width: 200, height: 300 },
+      value: 'sprite-class',
+      useCanvas: NO
+    })
+    .add('image_canvas', SC.ImageView, {
+      layout: { width: 200, height: 300 },
+      useCanvas: YES,
+      value: logoURL
+    })
+    .add('image_holder', SC.View, {
+      layout: { width: 200, height: 200 }
+    });
+
+  pane.show();
+
+  module('SC.ImageView ui', pane.standardSetup());
+
+  test("Verify that all the rendering properties of an image that is being loaded are correct", function() {
+    var imageView = pane.view('image_not_loaded'),
+        url;
+
+    ok(imageView.get('isVisibleInWindow'), 'image_not_loaded is visible in window');
+
+    imageView.set('value', logoURL);
+    ok(imageView.get('status') !== SC.IMAGE_STATE_LOADED, 'PRECOND - status should not be loaded (status=%@)'.fmt(imageView.get('status')));
+    ok(imageView.get('status') === SC.IMAGE_STATE_LOADING, 'PRECOND - status should be loading (status=%@)'.fmt(imageView.get('status')));
+
+    url = imageView.$('img').attr('src');
+    ok((url.indexOf('base64')!=-1) || (url.indexOf('blank.gif')!=-1), "The src should be blank URL. url = %@".fmt(url));
+  });
+
+  test("Verify that all the rendering properties of an image that is loaded are correct", function() {
+    var imageView = pane.view('image_loaded'),
+        imgEl;
+
+    ok(imageView.get('isVisibleInWindow'), 'image_loaded is visible in window');
+
+    imageView.addObserver('status', this, function() {
+      equals(SC.IMAGE_STATE_LOADED, imageView.get('status'), 'status should be loaded');
+
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        imgEl = imageView.$('img');
+        equals(logoURL, imgEl.attr('src'), "img src should be set to logoURL");
+
+        window.start(); // continue the tests
+        }, 100);
+    });
+
+    stop();
+  });
+
+  test("Verify that the tooltip is correctly being set as both the title and attribute (disabling localization for this test)", function() {
+    var imageView = pane.view('image_loaded'),
+        testToolTip = 'This is a test tooltip',
+        imgEl;
+
+    imageView.set('localization', NO);
+    imageView.set('toolTip', testToolTip);
+
+    imageView.addObserver('status', this, function() {
+      setTimeout(function() {
+        imgEl = imageView.$('img');
+        equals(imgEl.attr('title'), testToolTip, "title attribute");
+        equals(imgEl.attr('alt'), testToolTip, "alt attribute");
+
+        window.start(); // continue the tests
+      }, 100);
+    });
+
+    stop();
+  });
+
+  test("Verify sprite image class", function() {
+    var imageView = pane.view('sprite_image'),
+        imgEl;
+
+    imgEl = imageView.$('img');
+
+    ok(imgEl.hasClass('sprite-class'), "The class value should be on the img element");
+  });
+
+  test("Verify canvas rendering and properties", function() {
+    var view = pane.view('image_canvas'),
+        canvasEl = view.$();
+
+    equals(canvasEl.attr('width'), 200, "The width of the canvas element should be set");
+    equals(canvasEl.attr('height'), 300, "The height of the canvas element should be set");
+  });
+
+  test("Using imageQueue", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView1,
+        imageView2;
+
+    // Set the first view to load in the background (ie. it should load last although it was created first)
+    imageView1 = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      canLoadInBackground: YES
+    });
+    imageView2 = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      canLoadInBackground: NO
+    });
+
+    stop();
+
+    // The second image should load first and the first not be loaded yet
+    imageView2.addObserver('status', this, function() {
+      equals(imageView2.get('status'), SC.IMAGE_STATE_LOADED, 'imageView2 status');
+      equals(imageView1.get('status'), SC.IMAGE_STATE_LOADING, 'imageView1 status');
+    });
+
+    imageView1.addObserver('status', this, function() {
+      equals(imageView2.get('status'), SC.IMAGE_STATE_LOADED, 'imageView2 status');
+      equals(imageView1.get('status'), SC.IMAGE_STATE_LOADED, 'imageView1 status');
+
+      window.start(); // starts the test runner
+    });
+
+    imageHolder.appendChild(imageView1);
+    imageHolder.appendChild(imageView2);
+  });
+
+  test("Scaling images (img)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView,
+        imgEl;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 90 },
+      useCanvas: NO
+    });
+
+    stop();
+
+    // Default is SC.FILL
+    imageView.addObserver('status', this, function() {
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        imgEl = imageView.$('img');
+
+        equals(imgEl.css('width'), "588px", "SC.FILL width");
+        equals(imgEl.css('height'), "90px", "SC.FILL height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.SCALE_NONE);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('width'), "294px", "SC.SCALE_NONE width");
+        equals(imgEl.css('height'), "60px", "SC.SCALE_NONE height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.FILL_PROPORTIONALLY);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('width'), "588px", "SC.FILL_PROPORTIONALLY width");
+        equals(imgEl.css('height'), "120px", "SC.FILL_PROPORTIONALLY height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.BEST_FIT);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('width'), "441px", "SC.BEST_FIT width");
+        equals(imgEl.css('height'), "90px", "SC.BEST_FIT height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.BEST_FIT_DOWN_ONLY);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('width'), "294px", "SC.BEST_FIT_DOWN_ONLY width (larger frame)");
+        equals(imgEl.css('height'), "60px", "SC.BEST_FIT_DOWN_ONLY height (larger frame)");
+
+        SC.RunLoop.begin();
+        imageView.set('layout', { top: 0, left: 0, width: 147, height: 90 });
+        SC.RunLoop.end();
+
+        equals(imgEl.css('width'), "147px", "SC.BEST_FIT_DOWN_ONLY width (smaller size frame)");
+        equals(imgEl.css('height'), "30px", "SC.BEST_FIT_DOWN_ONLY height (smaller size frame)");
+
+        window.start(); // starts the test runner
+      }, 100);
+    });
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Scaling images (canvas)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView,
+        innerFrame;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 90 }
+    });
+
+    stop();
+
+    imageView.addObserver('status', this, function() {
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        innerFrame = imageView.get('innerFrame');
+
+        // Default is SC.FILL
+        equals(innerFrame.width, 588, "SC.FILL width");
+        equals(innerFrame.height, 90, "SC.FILL height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.SCALE_NONE);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 294, "SC.SCALE_NONE width");
+        equals(innerFrame.height, 60, "SC.SCALE_NONE height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.FILL_PROPORTIONALLY);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 588, "SC.FILL_PROPORTIONALLY width");
+        equals(innerFrame.height, 120, "SC.FILL_PROPORTIONALLY height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.BEST_FIT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 441, "SC.BEST_FIT width");
+        equals(innerFrame.height, 90, "SC.BEST_FIT height");
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.BEST_FIT_DOWN_ONLY);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 294, "SC.BEST_FIT_DOWN_ONLY width (larger frame)");
+        equals(innerFrame.height, 60, "SC.BEST_FIT_DOWN_ONLY height (larger frame)");
+
+        SC.RunLoop.begin();
+        imageView.set('layout', { top: 0, left: 0, width: 147, height: 90 });
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 147, "SC.BEST_FIT_DOWN_ONLY width (smaller size frame)");
+        equals(innerFrame.height, 30, "SC.BEST_FIT_DOWN_ONLY height (smaller size frame)");
+
+        window.start(); // starts the test runner
+      }, 200);
+    });
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (img)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView,
+        imgEl;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 120 },
+      useCanvas: NO,
+      scale: SC.SCALE_NONE
+    });
+
+    stop();
+
+    // Default is SC.FILL
+    imageView.addObserver('status', this, function() {
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        imgEl = imageView.$('img');
+
+        // Default is SC.ALIGN_CENTER
+        equals(imgEl.css('top'), "30px", "SC.ALIGN_CENTER top");
+        equals(imgEl.css('left'), "147px", "SC.ALIGN_CENTER left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP_LEFT);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP_LEFT top");
+        equals(imgEl.css('left'), "0px", "SC.ALIGN_TOP_LEFT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP top");
+        equals(imgEl.css('left'), "147px", "SC.ALIGN_TOP left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP_RIGHT);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP_RIGHT top");
+        equals(imgEl.css('left'), "294px", "SC.ALIGN_TOP_RIGHT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_RIGHT);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "30px", "SC.ALIGN_RIGHT top");
+        equals(imgEl.css('left'), "294px", "SC.ALIGN_RIGHT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM_RIGHT);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM_RIGHT top");
+        equals(imgEl.css('left'), "294px", "SC.ALIGN_BOTTOM_RIGHT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM top");
+        equals(imgEl.css('left'), "147px", "SC.ALIGN_BOTTOM left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM_LEFT);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM_LEFT top");
+        equals(imgEl.css('left'), "0px", "SC.ALIGN_BOTTOM_LEFT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_LEFT);
+        SC.RunLoop.end();
+
+        equals(imgEl.css('top'), "30px", "SC.ALIGN_LEFT top");
+        equals(imgEl.css('left'), "0px", "SC.ALIGN_LEFT left");
+
+        window.start(); // starts the test runner
+      }, 100);
+    });
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (canvas)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView,
+        innerFrame;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 120 },
+      scale: SC.SCALE_NONE
+    });
+
+    stop();
+
+    // Default is SC.FILL
+    imageView.addObserver('status', this, function() {
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        innerFrame = imageView.get('innerFrame');
+
+        // Default is SC.ALIGN_CENTER
+        equals(innerFrame.y, 30, "SC.ALIGN_CENTER top");
+        equals(innerFrame.x, 147, "SC.ALIGN_CENTER left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP_LEFT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 0, "SC.ALIGN_TOP_LEFT top");
+        equals(innerFrame.x, 0, "SC.ALIGN_TOP_LEFT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 0, "SC.ALIGN_TOP top");
+        equals(innerFrame.x, 147, "SC.ALIGN_TOP left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP_RIGHT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 0, "SC.ALIGN_TOP_RIGHT top");
+        equals(innerFrame.x, 294, "SC.ALIGN_TOP_RIGHT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_RIGHT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 30, "SC.ALIGN_RIGHT top");
+        equals(innerFrame.x, 294, "SC.ALIGN_RIGHT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM_RIGHT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 60, "SC.ALIGN_BOTTOM_RIGHT top");
+        equals(innerFrame.x, 294, "SC.ALIGN_BOTTOM_RIGHT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 60, "SC.ALIGN_BOTTOM top");
+        equals(innerFrame.x, 147, "SC.ALIGN_BOTTOM left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM_LEFT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 60, "SC.ALIGN_BOTTOM_LEFT top");
+        equals(innerFrame.x, 0, "SC.ALIGN_BOTTOM_LEFT left");
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_LEFT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 30, "SC.ALIGN_LEFT top");
+        equals(innerFrame.x, 0, "SC.ALIGN_LEFT left");
+
+        window.start(); // starts the test runner
+      }, 200);
+    });
+
+    imageHolder.appendChild(imageView);
+  });
 })();
-  
+