sproutcore 1.6.0.beta.2-x86-mingw32

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

@@ -0,0 +1,512 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            portions copyright @2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same */
+
+(function() {
+  var logoURL = sc_static('images/sproutcore.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 },
+      useCanvas: NO
+    })
+    .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');
+        ok(imgEl.attr('src').indexOf(logoURL) !== 0, "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 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,
+        lastMod1,
+        lastMod2;
+
+    stop();
+
+    // Only allow 1 image at a time
+    SC.imageQueue.loadLimit = 1;
+
+    // Add a random value so that the images appear as unique
+    lastMod1 = Math.round(Math.random() * 100000);
+    lastMod2 = Math.round(Math.random() * 100000);
+
+    // 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=" + lastMod1,
+      canLoadInBackground: YES
+    });
+    imageView2 = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + lastMod2,
+      canLoadInBackground: NO
+    });
+
+    // 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 on imageView2 status change');
+      equals(imageView1.get('status'), SC.IMAGE_STATE_LOADING, 'imageView1 status on imageView2 status change');
+    });
+
+    imageView1.addObserver('status', this, function() {
+      equals(imageView2.get('status'), SC.IMAGE_STATE_LOADED, 'imageView2 status on imageView1 status change');
+      equals(imageView1.get('status'), SC.IMAGE_STATE_LOADED, 'imageView1 status on imageView1 status change');
+
+      window.start(); // starts the test runner
+    });
+
+    imageHolder.appendChild(imageView1);
+    imageHolder.appendChild(imageView2);
+  });
+
+  function testScale(imageView, isImg) {
+    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() {
+        var imgEl,
+            innerFrame,
+            testImg = !imageView.get('useCanvas');
+
+        // Default is SC.FILL
+        innerFrame  = imageView.get('innerFrame');
+        equals(innerFrame.width, 588, "SC.FILL width");
+        equals(innerFrame.height, 90, "SC.FILL height");
+        if (testImg) {
+          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();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 271, "SC.SCALE_NONE width");
+        equals(innerFrame.height, 60, "SC.SCALE_NONE height");
+        if (testImg) {
+          equals(imgEl.css('width'), "271px", "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();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 588, "SC.FILL_PROPORTIONALLY width");
+        equals(innerFrame.height, 130, "SC.FILL_PROPORTIONALLY height");
+        if (testImg) {
+          equals(imgEl.css('width'), "588px", "SC.FILL_PROPORTIONALLY width");
+          equals(imgEl.css('height'), "130px", "SC.FILL_PROPORTIONALLY height");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.BEST_FIT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 407, "SC.BEST_FIT width");
+        equals(innerFrame.height, 90, "SC.BEST_FIT height");
+        if (testImg) {
+          equals(imgEl.css('width'), "407px", "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();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 271, "SC.BEST_FIT_DOWN_ONLY width (larger frame)");
+        equals(innerFrame.height, 60, "SC.BEST_FIT_DOWN_ONLY height (larger frame)");
+        if (testImg) {
+          equals(imgEl.css('width'), "271px", "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();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 147, "SC.BEST_FIT_DOWN_ONLY width (smaller size frame)");
+        equals(innerFrame.height, 33, "SC.BEST_FIT_DOWN_ONLY height (smaller size frame)");
+        if (testImg) {
+          equals(imgEl.css('width'), "147px", "SC.BEST_FIT_DOWN_ONLY width (smaller size frame)");
+          equals(imgEl.css('height'), "33px", "SC.BEST_FIT_DOWN_ONLY height (smaller size frame)");
+        }
+
+        window.start(); // starts the test runner
+      }, 100);
+    });
+  }
+
+  test("Scaling images (img)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 271x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 90 },
+      useCanvas: NO
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Scaling images (img) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // 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,
+      useStaticLayout: YES
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Scaling images (canvas)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // 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 }
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Scaling images (canvas) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // 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 },
+      useStaticLayout: YES
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  function testAlign(imageView) {
+    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() {
+        var imgEl,
+            innerFrame,
+            testImg = !imageView.get('useCanvas');
+
+        // Default is SC.ALIGN_CENTER
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 30, "SC.ALIGN_CENTER top");
+        equals(innerFrame.x, 158.5, "SC.ALIGN_CENTER left");
+        if (testImg) {
+          imgEl = imageView.$('img');
+          equals(imgEl.css('top'), "30px", "SC.ALIGN_CENTER top");
+          equals(imgEl.css('left'), "159px", "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");
+        if (testImg) {
+          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();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 0, "SC.ALIGN_TOP top");
+        equals(innerFrame.x, 158.5, "SC.ALIGN_TOP left");
+        if (testImg) {
+          equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP top");
+          equals(imgEl.css('left'), "159px", "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, 317, "SC.ALIGN_TOP_RIGHT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP_RIGHT top");
+          equals(imgEl.css('left'), "317px", "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, 317, "SC.ALIGN_RIGHT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "30px", "SC.ALIGN_RIGHT top");
+          equals(imgEl.css('left'), "317px", "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, 317, "SC.ALIGN_BOTTOM_RIGHT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM_RIGHT top");
+          equals(imgEl.css('left'), "317px", "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, 158.5, "SC.ALIGN_BOTTOM left");
+        if (testImg) {
+          equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM top");
+          equals(imgEl.css('left'), "159px", "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");
+        if (testImg) {
+          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();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 30, "SC.ALIGN_LEFT top");
+        equals(innerFrame.x, 0, "SC.ALIGN_LEFT left");
+        if (testImg) {
+          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);
+    });
+  }
+
+  test("Aligning images (img)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // 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
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (img) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // 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,
+      useStaticLayout: YES,
+      scale: SC.SCALE_NONE
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (canvas)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // 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
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (canvas) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // 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 },
+      useStaticLayout: YES,
+      scale: SC.SCALE_NONE
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("CSS class is applied for ImageView using a sprite for value", function() {
+    var view = pane.view('sprite_image'),
+        viewElem = view.$('img');
+
+    ok(viewElem.hasClass('sprite-class'), "element given correct class");
+
+    SC.run(function() {
+      view.set('value', 'another-sprite');
+    });
+
+    ok(!viewElem.hasClass('sprite-class'), "When value changed, element has old class removed");
+    ok(viewElem.hasClass('another-sprite'), "When value changed, element has new class added");
+
+    SC.run(function() {
+      view.set('value', null);
+    });
+
+    ok(!viewElem.hasClass('another-sprite'), "When value removed, element has old class removed");
+  });
+})();
+

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

@@ -0,0 +1,173 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            portions copyright @2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same */
+
+var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
+(function() {
+var pane = SC.ControlTestPane.design()
+  .add("basic", SC.LabelView, { 
+    value:'hello'
+  })
+  
+  .add("disabled", SC.LabelView, { 
+    value:'hello',
+    isEnabled: NO
+  })
+  
+  .add("selectable", SC.LabelView, { 
+    value:'hello',
+    isTextSelectable: YES
+  })
+  
+  .add("iconclass", SC.LabelView, {
+    icon: 'icon-class',
+    value: "hello"
+  })
+  
+  .add("centered", SC.LabelView, { 
+     value: "hello",
+     textAlign: SC.ALIGN_CENTER 
+  })
+   
+  .add("centered,icon", SC.LabelView, { 
+     value: "hello",
+     textAlign: SC.ALIGN_CENTER ,
+     icon: iconURL 
+  })
+  
+  .add("regular size", SC.LabelView, { 
+     value: "hello",
+     controlSize: SC.REGULAR_CONTROL_SIZE
+  })
+  
+  .add("small size", SC.LabelView, { 
+     value: "hello",
+     controlSize: SC.SMALL_CONTROL_SIZE
+  })
+  
+  .add("tiny size", SC.LabelView, { 
+     value: "hello",
+     controlSize: SC.TINY_CONTROL_SIZE
+  })
+  
+  .add("bold", SC.LabelView, { 
+     value: "hello",
+     fontWeight: SC.BOLD_WEIGHT
+  })
+   
+  .add("bold height", SC.LabelView, { 
+     value: "hello",
+     fontWeight: SC.BOLD_WEIGHT,
+     height: 16 
+  })
+  
+  .add("editable", SC.LabelView, { 
+     value: "double click me",
+     isEditable: YES
+  });
+
+pane.show(); // add a test to show the test pane
+
+
+module('SC.LabelView ui', {
+  setup: function() {
+    htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
+  },
+  teardown: function(){
+    clearHtmlbody();
+  }
+});
+
+test("Check that all Label are visible", function() {
+  ok(pane.view('basic').get('isVisibleInWindow'), 'basic.isVisibleInWindow should be YES');
+  ok(pane.view('disabled').get('isVisibleInWindow'), 'title.isVisibleInWindow should be YES');
+  ok(pane.view('selectable').get('isVisibleInWindow'), 'icon.isVisibleInWindow should be YES');
+  ok(pane.view('centered').get('isVisibleInWindow'), 'title,icon.isVisibleInWindow should be YES');
+  ok(pane.view('centered,icon').get('isVisibleInWindow'), 'title,icon,disabled.isVisibleInWindow should be YES');
+  ok(pane.view('regular size').get('isVisibleInWindow'), 'title,icon,default.isVisibleInWindow should be YES');
+  ok(pane.view('small size').get('isVisibleInWindow'), 'title.icon,selected.isVisibleInWindow should be YES');
+  ok(pane.view('tiny size').get('isVisibleInWindow'), 'title,toolTip.isVisibleInWindow should be YES');
+  ok(pane.view('bold').get('isVisibleInWindow'), 'title,toolTip.isVisibleInWindow should be YES');
+  ok(pane.view('bold height').get('isVisibleInWindow'), 'title,toolTip.isVisibleInWindow should be YES');
+  ok(pane.view('editable').get('isVisibleInWindow'), 'title,toolTip.isVisibleInWindow should be YES');
+});
+  
+
+test("Check that all labels have the right classes and styles set", function() {
+  var viewElem=pane.view('basic').$();
+  ok(viewElem.hasClass('sc-view'), 'basic.hasClass(sc-view) should be YES');
+  ok(viewElem.hasClass('sc-label-view'), 'basic.hasClass(sc-label-view) should be YES');
+  ok(!viewElem.hasClass('icon'), 'basic.hasClass(icon) should be NO');
+  ok(!viewElem.hasClass('disabled'), 'basic.hasClass(disabled) should be YES');
+  
+  viewElem=pane.view('disabled').$();
+  ok(viewElem.hasClass('sc-view'), 'title.hasClass(sc-view) should be YES');
+  ok(viewElem.hasClass('sc-label-view'), 'title.hasClass(sc-label-view) should be YES');
+  ok(!viewElem.hasClass('icon'), 'title.hasClass(icon) should be NO');
+  ok(viewElem.hasClass('disabled'), 'title.hasClass(disabled) should be NO');
+ 
+  viewElem=pane.view('selectable').$();
+  ok(viewElem.hasClass('sc-view'), 'icon.hasClass(sc-view) should be YES');
+  ok(viewElem.hasClass('sc-label-view'), 'icon.hasClass(sc-label-view) should be YES');
+  ok(viewElem.hasClass('sc-regular-size'), 'icon.hasClass(sc-regular-size) should be YES');
+  ok(!viewElem.hasClass('icon'), 'icon.hasClass(icon) should be YES');
+  ok(!viewElem.hasClass('sel'), 'icon.hasClass(sel) should be NO');
+  ok(!viewElem.hasClass('disabled'), 'icon.hasClass(disabled) should be NO');
+  
+  viewElem = pane.view('iconclass').$();
+  ok(viewElem.hasClass('icon'), 'view element should have "icon" class');
+  ok(viewElem.find('img').hasClass('icon'), 'img element inside view should have "icon" class');
+  
+  viewElem=pane.view('centered').$();
+  ok(viewElem.hasClass('sc-view'), 'title,icon.hasClass(sc-view) should be YES');
+  ok(viewElem.hasClass('sc-label-view'), 'title,icon.hasClass(sc-label-view) should be YES');
+  ok(!viewElem.hasClass('icon'), 'title,icon.hasClass(icon) should be YES');
+  ok(!viewElem.hasClass('disabled'), 'title,icon.hasClass(disabled) should be NO');
+  ok(viewElem.css('textAlign') === 'center', 'centered should have center textAlign');
+ 
+  viewElem=pane.view('centered,icon').$();
+  ok(viewElem.hasClass('sc-view'), 'title,icon,disabled.hasClass(sc-view) should be YES');
+  ok(viewElem.hasClass('sc-label-view'), 'title,icon,disabled.hasClass(sc-label-view) should be YES');
+  ok(viewElem.hasClass('icon'), 'title,icon,disabled.hasClass(icon) should be YES');
+  ok(!viewElem.hasClass('disabled'), 'title,icon,disabled.hasClass(disabled) should be YES');
+  ok(viewElem.css('textAlign') === 'center', 'centered,icon should have center textAlign');
+ 
+  viewElem=pane.view('regular size').$();
+  ok(viewElem.hasClass('sc-view'), 'title,icon,default.hasClass(sc-view) should be YES');
+  ok(viewElem.hasClass('sc-label-view'), 'title,icon,default.hasClass(sc-label-view) should be YES');
+  ok(viewElem.hasClass('sc-regular-size'), 'title,icon,default.hasClass(sc-regular-size) should be YES');
+  ok(!viewElem.hasClass('disabled'), 'title,icon,default.hasClass(disabled) should be NO');
+      
+  viewElem=pane.view('bold').$();
+  ok(viewElem.hasClass('sc-view'), 'title,icon,selected.hasClass(sc-view) should be YES');
+  ok(viewElem.hasClass('sc-label-view'), 'title,icon,selected.hasClass(sc-label-view) should be YES');
+  ok(!viewElem.hasClass('icon'), 'title,icon,selected.hasClass(icon) should be YES');
+  ok(!viewElem.hasClass('disabled'), 'title,icon,selected.hasClass(disabled) should be NO');
+  ok(viewElem[0].style.fontWeight === 'bold', 'bold view should have bold fontWeight');
+   
+});
+
+test("Default styles are set correctly in CSS"
+//, function() {
+  // document.defaultView.getComputedStyle fails when we're running framework-level tests
+  // var viewElem=pane.view('basic').$();
+  // ok(viewElem.css('textAlign') === 'left', 'centered should have center textAlign');
+  // ok(viewElem.css('fontWeight') === 'normal', 'bold view should have bold fontWeight');
+//}
+);
+
+test("Check that the title is set or not and if it is in the appropriate element", function() {
+  var viewElem=pane.view('basic').$();
+  equals(viewElem.text(), 'hello', 'has a value set');
+
+  viewElem=pane.view('centered,icon').$('img');
+  ok((viewElem!==null), 'should have an image corresponding to an icon');
+
+});
+
+})();