// ========================================================================== // Project: SproutCore - JavaScript Application Framework // Copyright: ©2006-2011 Strobe Inc. and contributors. // ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== // ======================================================================== // 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 }
});

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 border'.fmt(offsetAdjust, offsetAdjust));
equals(SC.pointInElement({x: left + offsetAdjust, y: top + offsetAdjust}, element, 'margin'), values[2], 'point {left: %@, top: %@} within the element\'s margin'.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

});

})();