sproutcore 1.5.0.pre.4.1 → 1.5.0.pre.5

data/lib/frameworks/sproutcore/frameworks/foundation/system/module.js

@@ -62,7 +62,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
     }
 
     if (log) {
-      console.log("SC.Module: Attempting to load '%@'".fmt(moduleName));
+      SC.Logger.log("SC.Module: Attempting to load '%@'".fmt(moduleName));
     }
 
     // If we couldn't find anything in the SC.MODULE_INFO hash, we don't have any record of the
@@ -78,12 +78,12 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
     // If the module is already loaded, execute the callback immediately if SproutCore is loaded,
     // or else as soon as SC has finished loading.
     if (module.isLoaded) {
-      if (log) console.log("SC.Module: Module '%@' already loaded.".fmt(moduleName));
+      if (log) SC.Logger.log("SC.Module: Module '%@' already loaded.".fmt(moduleName));
 
       // If the module has finished loading and we have the string
       // representation, try to evaluate it now.
       if (module.source) {
-        if (log) console.log("SC.Module: Evaluating JavaScript for module '%@'.".fmt(moduleName));
+        if (log) SC.Logger.log("SC.Module: Evaluating JavaScript for module '%@'.".fmt(moduleName));
         this._evaluateStringLoadedModule(module);
       }
 
@@ -101,7 +101,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
     // The module is not yet loaded, so register the callback and, if necessary, begin loading
     // the code.
     else {
-      if (log) console.log("SC.Module: Module '%@' is not loaded, loading now.".fmt(moduleName));
+      if (log) SC.Logger.log("SC.Module: Module '%@' is not loaded, loading now.".fmt(moduleName));
 
       // If this method is called more than once for the same module before it is finished
       // loading, we might have multiple callbacks that need to be executed once it loads.
@@ -146,7 +146,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
 
     if (module.isLoading || module.isLoaded) return;
 
-    if (SC.LOG_MODULE_LOADING) console.log("SC.Module: Prefetching module '%@'.".fmt(moduleName));
+    if (SC.LOG_MODULE_LOADING) SC.Logger.log("SC.Module: Prefetching module '%@'.".fmt(moduleName));
     this._loadDependenciesForModule(moduleName);
     this._loadCSSForModule(moduleName);
     this._loadJavaScriptForModule(moduleName);
@@ -169,7 +169,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
     var idx, len;
 
     if (SC.LOG_MODULE_LOADING) {
-      console.log("SC.Module: Module '%@' is marked for lazy instantiation, instantiating it now…".fmt(moduleName));
+      SC.Logger.log("SC.Module: Module '%@' is marked for lazy instantiation, instantiating it now…".fmt(moduleName));
     }
 
     len = lazyInfo.length;
@@ -178,7 +178,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
       try {
         lazyInfo[idx]();
       } catch(e) {
-        console.error("SC.Module: Failed to lazily instatiate entry for  '%@'".fmt(moduleName));
+        SC.Logger.error("SC.Module: Failed to lazily instatiate entry for  '%@'".fmt(moduleName));
       }
     }
 
@@ -232,7 +232,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
       url = styles[idx] ;
 
       if (url.length > 0) {
-        if (SC.LOG_MODULE_LOADING) console.log("SC.Module: Loading CSS file in '%@' -> '%@'".fmt(moduleName, url));
+        if (SC.LOG_MODULE_LOADING) SC.Logger.log("SC.Module: Loading CSS file in '%@' -> '%@'".fmt(moduleName, url));
         el = document.createElement('link') ;
         el.setAttribute('href', url) ;
         el.setAttribute('rel', "stylesheet") ;
@@ -273,7 +273,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
     }
 
     if (url.length > 0) {
-      if (SC.LOG_MODULE_LOADING) console.log("SC.Module: Loading JavaScript file in '%@' -> '%@'".fmt(moduleName, url));
+      if (SC.LOG_MODULE_LOADING) SC.Logger.log("SC.Module: Loading JavaScript file in '%@' -> '%@'".fmt(moduleName, url));
 
       el = document.createElement('script') ;
       el.setAttribute('type', "text/javascript") ;
@@ -371,7 +371,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
 
             dependents.push(moduleName) ;
 
-            if (log) console.log("SC.Module: '%@' depends on '%@', loading dependency…".fmt(moduleName, requiredModuleName));
+            if (log) SC.Logger.log("SC.Module: '%@' depends on '%@', loading dependency…".fmt(moduleName, requiredModuleName));
 
             // Load dependencies
             SC.Module.loadModule(requiredModuleName) ;
@@ -427,7 +427,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
       var moduleInfo = SC.MODULE_INFO[moduleName], callbacks ;
       if (!moduleInfo) return ; // shouldn't happen, but recover anyway
 
-      if (SC.LOG_MODULE_LOADING) console.log("SC.Module: Module '%@' has completed loading, invoking callbacks.".fmt(moduleName));
+      if (SC.LOG_MODULE_LOADING) SC.Logger.log("SC.Module: Module '%@' has completed loading, invoking callbacks.".fmt(moduleName));
 
       callbacks = moduleInfo.callbacks || [] ;
 
@@ -441,7 +441,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
       var module = moduleInfo[moduleName];
       var log = SC.LOG_MODULE_LOADING;
 
-      if (log) console.log("SC.Module: Evaluating and invoking callbacks for '%@'.".fmt(moduleName));
+      if (log) SC.Logger.log("SC.Module: Evaluating and invoking callbacks for '%@'.".fmt(moduleName));
 
       if (module.source) {
         this._evaluateStringLoadedModule(module);
@@ -466,7 +466,7 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
         dependentName = dependents[idx];
         dependent = moduleInfo[dependentName];
         if (dependent.isLoaded && this._dependenciesMetForModule(dependentName)) {
-          if (log) console.log("SC.Module: Now that %@ has loaded, all dependencies for a dependent %@ are met.".fmt(moduleName, dependentName));
+          if (log) SC.Logger.log("SC.Module: Now that %@ has loaded, all dependencies for a dependent %@ are met.".fmt(moduleName, dependentName));
           this._evaluateAndInvokeCallbacks(dependentName);
         }
       }
@@ -487,16 +487,16 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
     var dependenciesMet;
     var callbacks, targets;
 
-    if (log) console.log("SC.Module: Module '%@' finished loading.".fmt(moduleName));
+    if (log) SC.Logger.log("SC.Module: Module '%@' finished loading.".fmt(moduleName));
 
     if (!module) {
-      if (log) console.log("SC._moduleDidLoad() called for unknown module '@'.".fmt(moduleName));
+      if (log) SC.Logger.log("SC._moduleDidLoad() called for unknown module '@'.".fmt(moduleName));
       module = SC.MODULE_INFO[moduleName] = { isLoaded: YES, isReady: YES } ;
       return;
     }
 
     if (module.isLoaded) {
-      if (log) console.log("SC._moduleDidLoad() called more than once for module '%@'. Skipping.".fmt(moduleName));
+      if (log) SC.Logger.log("SC._moduleDidLoad() called more than once for module '%@'. Skipping.".fmt(moduleName));
       return ;
     }
 
@@ -509,11 +509,11 @@ SC.Module = SC.Object.create(/** @scope SC.Module */ {
       if (dependenciesMet) {
         this._evaluateAndInvokeCallbacks(moduleName);
       } else {
-        if (log) console.log("SC.Module: Dependencies for '%@' not met yet, waiting to evaluate.".fmt(moduleName));
+        if (log) SC.Logger.log("SC.Module: Dependencies for '%@' not met yet, waiting to evaluate.".fmt(moduleName));
       }
     } else {
       delete module.isPrefetching;
-      if (log) console.log("SC.Module: Module '%@' was prefetched, not evaluating until needed.".fmt(moduleName));
+      if (log) SC.Logger.log("SC.Module: Module '%@' was prefetched, not evaluating until needed.".fmt(moduleName));
     }
   },
 

data/lib/frameworks/sproutcore/frameworks/foundation/system/user_defaults.js

@@ -84,7 +84,7 @@ SC.UserDefaults = SC.Object.extend(/** @scope SC.UserDefaults.prototype */ {
       try{
         localStorage.load("SC.UserDefaults");
       }catch(e){
-        console.err("Couldn't load userDefaults in IE7: "+e.description);
+        SC.Logger.error("Couldn't load userDefaults in IE7: "+e.description);
       }
     }else if(this.HTML5DB_noLocalStorage){
       storageSafari3 = this._safari3DB;
@@ -179,7 +179,7 @@ SC.UserDefaults = SC.Object.extend(/** @scope SC.UserDefaults.prototype */ {
         try{
           localStorage[key] = encodedValue;
         }catch(e){
-          console.error("Failed using localStorage. "+e);
+          SC.Logger.error("Failed using localStorage. "+e);
         }
       }
     }
@@ -241,7 +241,7 @@ SC.UserDefaults = SC.Object.extend(/** @scope SC.UserDefaults.prototype */ {
         try{
           delete localStorage[key];
         } catch(e) {
-          console.warn('Deleting local storage encountered a problem. '+e);
+          SC.Logger.warn('Deleting local storage encountered a problem. '+e);
         }
       }
     }
@@ -326,7 +326,7 @@ SC.UserDefaults = SC.Object.extend(/** @scope SC.UserDefaults.prototype */ {
       var myDB;
       try {
         if (!window.openDatabase) {
-          console.error("Trying to load a database with safari version 3.1 "+
+          SC.Logger.error("Trying to load a database with safari version 3.1 "+
                   "to get SC.UserDefaults to work. You are either in a"+
                   " previous version or there is a problem with your browser.");
           return;
@@ -341,7 +341,7 @@ SC.UserDefaults = SC.Object.extend(/** @scope SC.UserDefaults.prototype */ {
 
         }
       } catch(e) {
-        console.error("Trying to load a database with safari version 3.1 "+
+        SC.Logger.error("Trying to load a database with safari version 3.1 "+
                 "to get SC.UserDefaults to work. You are either in a"+
                 " previous version or there is a problem with your browser.");
         return;

data/lib/frameworks/sproutcore/frameworks/foundation/system/utils/misc.js

@@ -70,7 +70,68 @@ SC.mixin( /** @scope SC */ {
       cString = cString + String.fromCharCode(nChar);
     }
     return cString;
-  }
+  },
+
+  /**
+    Determines if the given point is within the given element.
+
+    The test rect will include the element's padding and can be configured to
+    optionally include the border or border and margin.
+
+    @param {Object} point the point as an Object (ie. Hash) in the form { x: value, y: value }.
+    @param {DOMElement|jQuery|String} elem the element to test inclusion within.
+      This is passed to `jQuery()`, so any value supported by `jQuery()` will work.
+    @param {String} includeFlag flag to determine the dimensions of the element to test within.
+      One of either: 'padding', 'border' or 'margin' (default: 'border').
+    @param {String} relativeToFlag flag to determine which relative element to determine offset by.
+      One of either: 'document', 'viewport' or 'parent' (default: 'document').
+    @returns {Boolean} YES if the point is within the element; NO otherwise
+  */
+
+  // Note: This method is the most correct way to test the inclusion of a point within a DOM element.
+  // First, it uses SC.offset which is a slightly improved version of jQuery's offset and much more reliable
+  // than writing your own offset determination code.
+  // Second, the offset must be adjusted to account for the element's left and top border
+  // if not including the border or to account for the left and top margins when including the margins.
+  pointInElement: function(point, elem, includeFlag, relativeToFlag) {
+    var offset,
+        width,
+        height,
+        rect;
 
+    elem = jQuery(elem);
+    includeFlag = includeFlag || 'border';
+
+    // Find the offset
+    offset = SC.offset(elem, relativeToFlag);
+
+    // Find the dimensions
+    if (includeFlag === 'padding') {
+      width = elem.innerWidth();
+      height = elem.innerHeight();
+
+      // Adjust offset to account for top & left borders
+      offset.top += window.parseInt(elem.css('border-top-width').replace('px', ''));
+      offset.left += window.parseInt(elem.css('border-left-width').replace('px', ''));
+    } else {
+      width = elem.outerWidth(includeFlag === 'margin');
+      height = elem.outerHeight(includeFlag === 'margin');
+
+      if (includeFlag === 'margin') {
+        // Adjust offset to account for top & left margins
+        offset.top -= window.parseInt(elem.css('margin-top').replace('px', ''));
+        offset.left -= window.parseInt(elem.css('margin-left').replace('px', ''));
+      }
+    }
+
+    rect = {
+      x: offset.left,
+      y: offset.top,
+      width: width,
+      height: height
+    };
+
+    return SC.pointInRect(point, rect);
+  }
 
 });

data/lib/frameworks/sproutcore/frameworks/foundation/tests/integration/creating_views.js

@@ -6,9 +6,14 @@
 
 /*global module test equals context ok same htmlbody */
 
-module("Create a pane with some custom views and adding it to the window");
-
-htmlbody('<style>.sc-view { border: 1px red solid; z-index: -1; position: absolute; }</style>');
+module("Create a pane with some custom views and adding it to the window", {
+  setup: function(){
+    htmlbody('<style>.sc-view { border: 1px red solid; z-index: -1; position: absolute; }</style>');
+  },
+  teardown: function(){
+    clearHtmlbody();
+  }
+});
 
 test("layer creation and management", function() {
   

data/lib/frameworks/sproutcore/frameworks/foundation/tests/mixins/button/ui.js

@@ -6,9 +6,6 @@
 
 /*global module test equals context ok same */
 
-htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
-
-
 var pane = SC.ControlTestPane.design()
   .add("basic", SC.View.extend(SC.Control, SC.Button, 
     {
@@ -25,7 +22,11 @@ pane.show();
 
 module('SC.Button ui', {
   setup: function() {
+    htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
     var view = pane.view('basic');
+  },
+  teardown: function(){
+    clearHtmlbody();
   }
 });
 

data/lib/frameworks/sproutcore/frameworks/foundation/tests/mixins/editable/ui.js

@@ -6,8 +6,6 @@
 
 /*global module test equals context ok same */
 
-htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
-
 
 var pane = SC.ControlTestPane.design()
   .add("aria-role", SC.FieldView.extend(SC.StaticLayout, SC.Editable, 
@@ -25,7 +23,11 @@ var pane = SC.ControlTestPane.design()
 pane.show();
 module('SC.Editable ui', {
   setup: function() {
+    htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
     var view = pane.view('aria-role');
+  },
+  teardown: function(){
+    clearHtmlbody();
   }
 });
 
@@ -39,4 +41,4 @@ test("should have aria-multiline as YES", function() {
   var view = pane.view('aria-multiline');
   var label = view.$();  
   equals(label.attr('aria-multiline'), 'true', 'aria-multiline should be true');
-});
+});

data/lib/frameworks/sproutcore/frameworks/foundation/tests/mixins/inline_text_field/ui.js

@@ -6,8 +6,6 @@
 
 /*global module test equals context ok same */
 
-htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
-
 
 var pane = SC.ControlTestPane.design()
   .add("aria-role", SC.InlineTextFieldView.extend({
@@ -33,7 +31,11 @@ pane.show();
 
 module('SC.InlineTextFieldView ui', {
   setup: function() {
+    htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
     var view = pane.view('aria-role');
+  },
+  teardown: function(){
+    clearHtmlbody();
   }
 });
 
@@ -59,4 +61,4 @@ test("should have aria-invalid as YES", function() {
   var view = pane.view('aria-invalid');
   var label = view.$();
   equals(label.attr('aria-invalid'), 'true', 'aria-invalid should be true');
-});
+});

data/lib/frameworks/sproutcore/frameworks/foundation/tests/system/cookie.js

@@ -2,13 +2,13 @@
 // SC.Cookie Unit Test
 // ==========================================================================
 
-/*globals module test equals */
+/*globals module test equals createCookie readCookie eraseCookies */
 
-var setCookies = ['cookie', 'cookie2', 'cookie-hashincreate', 'cookie-usingset', 'cookie-2-1', 'cookie-2-2', 'cookie-2-3', 'cookie-expires', 'cookie-destroy', 'cookie-find'];
+var setCookies = ['cookie', 'cookie2', 'cookie-hashincreate', 'cookie-number', 'cookie-usingset', 'cookie-2-1', 'cookie-2-2', 'cookie-2-3', 'cookie-expires', 'cookie-destroy', 'cookie-find'];
 eraseCookies();
 setCookies = [];
 
-if (document.cookie != "") {
+if (document.cookie !== "") {
   SC.Logger.warn("document.cookie not empty -- test results may be contaminated -- %@".fmt(document.cookie));
 }
 
@@ -42,7 +42,7 @@ function readCookie(name) {
 	for(var i=0;i < ca.length;i++) {
 		var c = ca[i];
 		while (c.charAt(0)==' ') c = c.substring(1,c.length);
-		if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length));
+		if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length,c.length));
 	}
 	return null;
 }
@@ -87,6 +87,14 @@ test("Setting a cookie - no write", function() {
   setCookies = ["cookie-nowrite"];
 });
 
+test("Setting a cookie - using an numeral expires", function() {
+  var cookie = SC.Cookie.create({name: "cookie-number", value: "testing value", expires: 1}).write();
+  var result = readCookie('cookie-number');
+  equals(result, "testing value", "value from document.cookie should be 'testing value'");
+  
+  setCookies = ["cookie-number"];
+});
+
 test("Setting 2 cookies", function() {
   var date = new Date();
   date.setTime(date.getTime() + 1000);
@@ -160,4 +168,12 @@ test("find", function() {
   equals(result.get('value'), cookie.get('value'), "cookie values should be equal");
   
   setCookies = ["cookie-find"];
+});
+
+test("Coooooooookie", function() {
+  var cookie = SC.Cookie.create({name: "yummy!"}),
+      FakeCookie = SC.Object.extend();
+  
+  ok(SC.CookieMonster.nomNomNom(cookie) == null, "SC.CookieMonster nom nomed cookie");
+  equals(SC.CookieMonster.nomNomNom(FakeCookie.create()), NO, "SC.CookieMonster doesn't like fake cookies!");
 });

data/lib/frameworks/sproutcore/frameworks/foundation/tests/system/utils/pointInElement.js

@@ -0,0 +1,235 @@
+// ========================================================================
+// SC Miscellaneous Utils Tests - pointInElement
+// ========================================================================
+
+/*global module test htmlbody ok equals same */
+
+
+(function() {
+
+var view;
+
+var CustomView = SC.View.extend({
+  classNames: 'custom'.w(),
+  displayProperties: 'childClasses'.w(),
+
+  render: function(context, firstTime) {
+    context = context.begin().addClass('child').setClass(this.get('childClasses'));
+    context = context.end();
+  }
+});
+
+var pane = SC.ControlTestPane.extend()
+  .add("plain child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("padded child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {padding: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("bordered child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {border: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("margined child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {margin: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("margined positioned child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {absolute: true, margin: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("padded bordered child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {padding: true, border: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("bordered margined child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {border: true, margin: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("padded margined child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {padding: true, margin: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("padded bordered margined child", CustomView, {
+    classNames: ''.w(),
+    childClasses: {padding: true, border: true, margin: true},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  })
+  .add("padded parent plain child", CustomView, {
+    classNames: 'padded'.w(),
+    childClasses: {},
+    layout: { left: 10, top: 10, width: 100, height: 50 }
+  });
+
+pane.show();
+
+
+module("SC.pointInElement()", {
+  setup: function(){
+    htmlbody('<style> .custom { background-color: #BBF; } .padding { padding: 10px !important; } .border { border: 10px red solid !important;} .margin { margin: 10px !important; } .padding-em { padding: 10em !important; } .border-em { border: 10em red solid !important;} .margin-em { margin: 10em !important; } .child { background-color: #AAA; width: 80px; height: 80px; } .absolute { position: absolute; top: 10px; left: 10px; } </style>');
+    pane.standardSetup().setup();
+  },
+  teardown: function(){
+    pane.standardSetup().teardown();
+    clearHtmlbody();
+  }
+});
+
+
+
+function runChecks(element, offsetAdjust, values) {
+  var jqOffset = jQuery(element).offset(),
+      left = jqOffset.left,
+      top = jqOffset.top;
+
+  equals(SC.pointInElement({x: left + offsetAdjust, y: top + offsetAdjust}, element, 'padding'), values[0], 'point {left: %@, top: %@} within the element\'s padding'.fmt(offsetAdjust, offsetAdjust));
+  equals(SC.pointInElement({x: left + offsetAdjust, y: top + offsetAdjust}, element, 'border'), values[1], 'point {left: %@, top: %@} within the element\'s padding'.fmt(offsetAdjust, offsetAdjust));
+  equals(SC.pointInElement({x: left + offsetAdjust, y: top + offsetAdjust}, element, 'margin'), values[2], 'point {left: %@, top: %@} within the element\'s padding'.fmt(offsetAdjust, offsetAdjust));
+}
+
+test("A plain child element", function() {
+  var view = pane.view('plain child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, false]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [true, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [true, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A padded child element", function() {
+  var view = pane.view('padded child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, false]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [true, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [true, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A bordered child element", function() {
+  var view = pane.view('bordered child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, false]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [false, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [false, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A margined child element", function() {
+  var view = pane.view('margined child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, true]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [true, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [true, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A margined positioned child element", function() {
+  var view = pane.view('margined positioned child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, true]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [true, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [true, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A padded bordered child element", function() {
+  var view = pane.view('padded bordered child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, false]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [false, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [false, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A bordered margined child element", function() {
+  var view = pane.view('bordered margined child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, true]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [false, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [false, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A padded margined child element", function() {
+  var view = pane.view('padded margined child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, true]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [true, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [true, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+test("A padded bordered margined child element", function() {
+  var view = pane.view('padded bordered margined child'),
+      parentEl = view.$(),
+      childEl = view.$('.child');
+
+  runChecks(parentEl, -1, [false, false, false]);   // Test 1px off the top left corner of the parent
+  runChecks(parentEl, 0, [true, true, true]);       // Test the top left corner of the parent
+  runChecks(parentEl, 1, [true, true, true]);       // Test 1px in the top left corner of the parent
+  runChecks(childEl, -11, [false, false, false]);   // Test 11px off the top left corner of the child
+  runChecks(childEl, -1, [false, false, true]);    // Test 1px off the top left corner of the child
+  runChecks(childEl, 0, [false, true, true]);        // Test the top left corner of the child
+  runChecks(childEl, 1, [false, true, true]);        // Test 1px in the top left corner of the child
+  runChecks(childEl, 11, [true, true, true]);       // Test 11px in the top left corner of the child
+});
+
+})();