sproutit-sproutcore 1.0.20090721145251 → 1.0.20090721145280

data/frameworks/sproutcore/frameworks/deprecated/tests/views/classic_view/frame.rhtml

@@ -1,357 +0,0 @@
-<% # ========================================================================
-   # SC.ClassicView Frame/Rects Unit Test
-   #
-   # This test validates the various frame properties for a view given 
-   # different configurations.
-   #
-   # ========================================================================
-%>
-<% content_for('final') do %>
-
-<script>
-
-Test.context("CASE 1: Auto-layout view with no padding & no border", {
-  
-  "frame should reflect current offset settings": function() {
-    var el = this.v.rootElement ;
-    var f = { x: el.offsetTop, y: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight };
-    // console.log(this.v.get('frame').x) ;
-    // console.log('this.frame', this.v.get('frame')) ;
-    SC.rectsEqual(f, this.v.get('frame')).shouldEqual(true) ;
-  },
-  
-  "frame should change when CSS changed": function() {
-    var origFrame = this.v.get('frame') ;
-    
-    this.v.addClassName('half') ;
-    this.v.viewFrameDidChange() ;
-
-    SC.rectsEqual(this.v.get('frame'), origFrame).shouldEqual(false) ;    
-    
-    // remove the class.  make sure we have restored the frame
-    this.v.removeClassName('half') ; //reset 
-    this.v.viewFrameDidChange() ; 
-    SC.rectsEqual(this.v.get('frame'), origFrame).shouldEqual(true) ;    
-  },
-  
-  "setting frame should change style, even if it does not impact actual value": function() {
-    var f = this.v.get('frame') ;
-    var ret = this.v.set('frame', { x: 10, y: 10 }) ;
-
-    // it should change the style though
-    this.v.getStyle('left').shouldEqual('10px');  
-    this.v.getStyle('top').shouldEqual('10px');  
-
-    // change the top & left.  Since the layout is static here, this should not actually 
-    // change anything.
-    SC.rectsEqual(ret, f).shouldEqual(true) ;
-  },
-  
-  setup: function() { this.v = SC.page.get('case1'); }
-  
-});
-// 
-// CASE 2: Manual-layout of view
-Test.context("CASE 2: Manual-layout of view", {
-
-  "frame should reflect current offset settings at first": function() {
-    var el = this.v.rootElement ;
-    var f = { x: el.offsetTop, y: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight };
-    SC.rectsEqual(f, this.v.get('frame')).shouldEqual(true) ;
-  },
-
-  "should get absolute positioning": function() {
-    this.v.getStyle('position').shouldEqual('absolute') ;  
-  },
-  
-  "frame should reflect set values exactly": function() {
-    var f = { x: 10, y: 10, width: 20, height: 20 } ;
-    var ret = this.v.set('frame', f);
-    SC.rectsEqual(f,ret).shouldEqual(true) ;
-    SC.rectsEqual(this.v.get('frame'), f).shouldEqual(true) ;
-  },
-  
-  "actual offset should reflect set values exactly": function() {
-    var f = { x: 10, y: 10, width: 20, height: 20 } ;
-    var ret = this.v.set('frame', f);
-    var el = this.v.rootElement;
-    el.offsetLeft.shouldEqual(10) ;
-    el.offsetTop.shouldEqual(10) ;
-    el.offsetWidth.shouldEqual(20) ;
-    el.offsetHeight.shouldEqual(20) ;
-  },
-  
-  "applying CSS class should not change frame": function() {
-    var f = this.v.get('frame') ;
-    this.v.addClassName('half') ;
-    SC.rectsEqual(this.v.get('frame'),f).shouldEqual(true) ;  
-  },
-  
-  "getting frame should cache the value": function() {
-    f = this.v.get('frame') ;
-    this.assertNotNull(this.v._frame) ;
-  },
-  
-  setup: function() { this.v = SC.page.get('case2'); }
-  
-});
-
-// CASE 3: Manual-layout View with padding & border
-Test.context("CASE 3: Manual-layout of view with padding & border", {
-
-  "frame size should include padding and border": function() {
-    var f = v.get('frame') ;
-    var el = v.rootElement ;
-
-    //debugger ;
-    equals(Math.round(v.get('styleWidth')), f.width-24, 'width') ;
-    equals(Math.round(v.get('styleHeight')), f.height-24, 'height') ;
-  },
-  
-  "changing frame size should subtract padding and border": function() {
-    this.v.set('frame', { width: 50, height: 50 }) ;
-    var f = this.v.get('frame') ;
-    f.width.shouldEqual(50) ;
-    f.height.shouldEqual(50);
-    
-    var el = this.v.rootElement ;
-    Math.round(parseFloat(el.getStyle('width'),0)).shouldEqual(f.width - 24) ;
-    Math.round(parseFloat(el.getStyle('height'),0)).shouldEqual(f.height - 24) ;
-  },
-  
-  setup: function() { this.v = SC.page.get('case3'); }
-  
-}) ;
-
-// CASE 4: Child view inside of view with overflow = hidden
-// NOTE: Cases 4,5 & 6 test a specific bug in FireFox.
-Test.context("CASE 4: Absolute positioned Child view inside of view with overflow = hidden", {
-
-  "frame origin should be 0,0 & size should match owner's innerFrame": function() {
-    var vf = this.v.get('innerFrame') ;
-    var f = this.v.child.get('frame') ;
-    f.x.shouldEqual(0) ;
-    f.y.shouldEqual(0) ;
-    f.width.shouldEqual(62) ;
-  },
-  
-  "nested frame origin should be 0,0 inside of parent": function() {
-    var f = this.v.child.nestedChild.get('frame') ;
-    f.x.shouldEqual(0) ;
-    f.y.shouldEqual(0) ;
-  },
-  
-  "setting child frame should reflect in new frame value": function() {
-    this.v.child.set('frame', { x: 10, y: 10 }) ;
-    var f = this.v.child.get('frame') ;
-    f.x.shouldEqual(10) ;
-    f.y.shouldEqual(10) ;
-  },
-  
-  setup: function() { this.v = SC.page.get('case4'); }
-  
-}) ;
-
-// CASE 5: Child view inside of view with overflow = hidden
-Test.context("CASE 5: Non-positioned Child view inside of view with overflow = hidden", {
-
-  "frame origin should be 0,0 & size should match owner's innerFrame": function() {
-    SC.DEBUGIT = YES ;
-    var vf = this.v.get('innerFrame') ;
-    var f = this.v.child.get('frame') ;
-    f.x.shouldEqual(0) ;
-    f.y.shouldEqual(0) ;
-    f.width.shouldEqual(vf.width) ;
-    SC.DEBUGIT = NO ;
-  },
-  
-  "nested frame origin should be 1,1 to account for border offset of parent": function() {
-    var f = this.v.child.nestedChild.get('frame') ;
-    f.x.shouldEqual(1) ;
-    f.y.shouldEqual(1) ;
-  },
-  
-  "setting child frame should not move child frame": function() {
-    this.v.child.set('frame', { x: 10, y: 10 }) ;
-    var f = this.v.child.get('frame') ;
-    f.x.shouldEqual(0) ;
-    f.y.shouldEqual(0) ;
-  },
-  
-  setup: function() { this.v = SC.page.get('case5'); }
-  
-}) ;
-
-Test.context("CASE 6: Relative positioned Child view inside of view with overflow = hidden", {
-
-  "frame origin should be 0,0 & size should match owner's innerFrame": function() {
-    var vf = this.v.get('innerFrame') ;
-    var f = this.v.child.get('frame') ;
-    f.x.shouldEqual(0) ;
-    f.y.shouldEqual(0) ;
-    f.width.shouldEqual(62) ;
-  },
-  
-  "nested frame origin should be 0,0 inside of parent": function() {
-    var f = this.v.child.nestedChild.get('frame') ;
-    f.x.shouldEqual(0) ;
-    f.y.shouldEqual(0) ;
-  },
-  
-  "setting child frame should reflect in new frame value that includes borders": function() {
-    this.v.child.set('frame', { x: 10, y: 10 }) ;
-    var f = this.v.child.get('frame') ;
-    f.x.shouldEqual(10) ;
-    f.y.shouldEqual(10) ;
-  },
-  
-  setup: function() { this.v = SC.page.get('case6'); }
-  
-}) ;
-
-Test.context("CASE 7: Create view (not in the window)", {
-
-  "frame should be 10,10,30,30 even though it is not on screen": function() {
-    var f = { x: 10, y: 10, width: 30, height: 30 };
-    var vf = this.v.get('frame') ;
-    SC.rectsEqual(f,vf).shouldEqual(true) ;
-  },
-
-  "resizing frame should update frame": function() {
-    var f = { x: 20, y: 20, width: 40, height: 40 } ;
-    this.v.set('frame', f) ;
-    var vf = this.v.get('frame') ;
-    SC.rectsEqual(f,vf).shouldEqual(true) ;
-  },
-  
-  setup: function() { this.v = SC.ClassicView.extend({
-    emptyElement: '<div style="width: 30px; height: 30px; left: 10px; top: 10px; position: absolute;"></div>'
-  }).create(); }
-  
-}) ;
-
-main = function() { SC.page.awake(); };
-
-</script>
-
-<% end %>
-
-<% # Create the views for the various use cases. %>
-<% content_for('page_javascript') do %>
-<script>
-</script>
-<% end %>
-
-<% content_for('body') do %>
-
-<style>
-
-.case { background-color: white; }
-.case .child { border: 1px red solid; }
-
-.base {
-  float: left;
-  width: 200px;
-  height: 100px;
-  border: 1px #aaa solid;
-  position: relative;
-  margin: 2px;
-}
-
-.cases { position: absolute; bottom: 0 ; left: 0; right: 0; border-top: 1px #ccc solid; }
-
-.base label {
-  position: absolute;
-  bottom: 4px;
-  left: 4px;
-}
-
-.half { width: 50%; }
-
-.case2, .case3 { position: absolute; }
-
-.case3 {
-  border: 2px red solid ;
-  padding: 10px;
-}
-
-.case4 { 
-  overflow: hidden; 
-  position: relative; 
-  border-left: 5px blue solid; 
-  height: 60px;
-}
-
-.case5 { 
-  overflow: auto; 
-  position: relative; 
-  border-left: 5px blue solid; 
-  height: 60px;
-}
-
-.case4 .child {
-  position: absolute;
-  width: 60px;
-}
-
-.case6 .child {
-  position: relative;
-  width: 60px;
-}
-
-.nested_child { border: 1px green solid; }
-
-</style>
-
-<div class="cases">
-<div class="base">
-<label>Case 1</label>
-<% view :case1, :class => 'case' do %>
-  <%= view :child, :outlet => true, :inner_html => 'Child' %>
-<% end %>
-</div>
-
-<div class="base">
-  <label>Case 2</label>
-<% view :case2, :class => 'case' do %>
-  <%= view :child, :outlet => true, :inner_html => 'Child' %>
-<% end %>
-</div>
-
-<div class="base">
-  <label>Case 3</label>
-<% view :case3, :class => 'case' do %>
-  <%= view :child, :outlet => true, :inner_html => 'Child' %>
-<% end %>
-</div>
-
-<div class="base">
-  <label>Case 4</label>
-<% view :case4, :class => 'case' do %>
-  <% view :child, :outlet => true do %>
-    <%= view :nested_child, :outlet => true, :inner_html => 'Nested' %>
-  <% end %>
-<% end %>
-</div>
-
-<div class="base">
-  <label>Case 5</label>
-<% view :case5, :class => 'case' do %>
-  <% view :child, :outlet => true do %>
-    <%= view :nested_child, :outlet => true, :inner_html => 'Nested' %>
-  <% end %>
-<% end %>
-</div>
-
-<div class="base">
-  <label>Case 6</label>
-<% view :case6, :class => 'case' do %>
-  <% view :child, :outlet => true do %>
-    <%= view :nested_child, :outlet => true, :inner_html => 'Nested' %>
-  <% end %>
-<% end %>
-</div>
-
-</div>
-
-<% end %>

data/frameworks/sproutcore/frameworks/deprecated/tests/views/classic_view/isVisibleInWindow.rhtml

@@ -1,147 +0,0 @@
-<% # ========================================================================
-   # SC.ClassicView isVisibleInWindow Unit Test
-   # ========================================================================
-%>
-<% content_for('final') do %>
-
-<script>
-
-var FRAME = { x: 10, y: 10, width: 30, height: 30 } ;
-
-Test.context("CASE 1: View created outside of window", {
-
-  "initial isVisibleInWindow should be false": function() {
-    v.get('isVisibleInWindow').shouldEqual(false) ;
-  },
-  
-  "adding to window should make it true": function() {
-    SC.page.get('root').get('isVisibleInWindow').shouldEqual(true) ;
-    
-    SC.page.get('root').appendChild(v) ;
-    v.get('isVisibleInWindow').shouldEqual(true) ;
-  },
-
-  "removing from window should make it false again": function() {
-    SC.page.get('root').appendChild(v) ;
-    v.get('isVisibleInWindow').shouldEqual(true) ;
-    
-    v.removeFromParent() ;
-    v.get('isVisibleInWindow').shouldEqual(false) ;
-  },
-  
-  setup: function() { 
-    v = SC.ClassicView.extend({
-      emptyElement: '<div class="case"></div>'
-    }).create(); 
-  }
-  
-});
-
-Test.context("CASE 2: View in body", {
-
-  "initial isVisibleInWindow should be true": function() {
-    v.get('isVisibleInWindow').shouldEqual(true) ;
-  },
-  
-  "moving to another view in window should still be true": function() {
-    SC.page.get('root').appendChild(v) ;
-    v.get('isVisibleInWindow').shouldEqual(true) ;
-  },
-
-  "removing from window should make it false": function() {
-    v.removeFromParent() ;
-    v.get('isVisibleInWindow').shouldEqual(false) ;
-
-    // readd to window
-    SC.page.get('root').appendChild(v) ;
-  },
-  
-  "moving to a view that is offscreen should make it false": function() {
-    v.get('isVisibleInWindow').shouldEqual(true) ;
-    offscreen.appendChild(v) ;
-    v.get('isVisibleInWindow').shouldEqual(false) ;
-  },
-  
-  setup: function() { 
-    v = SC.page.get('case2');
-    offscreen = SC.ClassicView.create() ; 
-  }
-});
-
-Test.context("CASE 3: View created in resources", {
-
-  "initial isVisibleInWindow should be YES": function() {
-    v.get('isVisibleInWindow').shouldEqual(YES) ;
-  },
-  
-  "moving to a visible view in window should be true": function() {
-    SC.page.get('root').appendChild(v) ;
-    v.get('isVisibleInWindow').shouldEqual(true) ;
-  },
-
-  "removing from window should make it false": function() {
-    v.removeFromParent() ;
-    v.get('isVisibleInWindow').shouldEqual(false) ;
-  },
-  
-  "moving to a view that is offscreen should make it false": function() {
-    offscreen.appendChild(v) ;
-    v.get('isVisibleInWindow').shouldEqual(false) ;
-  },
-  
-  setup: function() { 
-    v = SC.page.get('case3');
-    offscreen = SC.ClassicView.create() ; 
-  }
-
-});
-
-main = function() { SC.page.awake(); };
-
-</script>
-
-<% end %>
-
-<% content_for('body') do %>
-
-<style>
-
-.case { background-color: white; }
-.case .child { border: 1px red solid; }
-
-.base {
-  float: left;
-  width: 200px;
-  height: 100px;
-  border: 1px #aaa solid;
-  position: relative;
-  margin: 2px;
-}
-
-.cases { position: absolute; bottom: 0 ; left: 0; right: 0; border-top: 1px #ccc solid; }
-
-.base label {
-  position: absolute;
-  bottom: 4px;
-  left: 4px;
-}
-
-.nested_child { border: 1px green solid; }
-
-.case { 
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  width: 30px;
-  height: 30px;
-}
-
-</style>
-
-<%= view :case2, :class => 'case', :inner_html => 'Case' %>
-
-<%= view :root %>
-
-<% end %>
-
-<%= view :case3, :class => 'case', :inner_html => 'Case' %>