// ========================================================================== // Project: Showcase // Copyright: ©2012 7x7 Software, Inc. // License: Licensed under MIT license // ========================================================================== /*global module, test, same*/
var view; module(“SC.View#borderFrame”, {
setup: function () { SC.run(function () { view = SC.View.create({ layout: { width: 100, height: 100 } }); }); }, teardown: function () { view.destroy(); view = null; }
});
test(“The borderFrame property of the view should include the borders from the layout.”, function () {
var borderFrame, frame; // No borders. frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 0, y: 0, width: 100, height: 100 }, "The frame without borders is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame without borders is"); // Right 5px border. SC.run(function () { view.adjust('borderRight', 5); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 0, y: 0, width: 95, height: 100 }, "The frame with 5px right border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border is"); // Top 10px border. SC.run(function () { view.adjust('borderTop', 10); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 0, y: 10, width: 95, height: 90 }, "The frame with 5px right border & 10px top border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border is"); // Left 15px border. SC.run(function () { view.adjust('borderLeft', 15); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 15, y: 10, width: 80, height: 90 }, "The frame with 5px right border & 10px top border & 15px left border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border is"); // Bottom 20px border. SC.run(function () { view.adjust('borderBottom', 20); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 15, y: 10, width: 80, height: 70 }, "The frame with 5px right border & 10px top border & 15px left border & 20px bottom border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border & 20px bottom border is"); // 25px border. SC.run(function () { view.set('layout', { width: 100, height: 100, border: 25 }); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 25, y: 25, width: 50, height: 50 }, "The frame with 25px border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 25px border is");
});
test(“The borderFrame property of the view should be correct for view with useStaticLayout.”, function () {
var borderFrame, frame, pane; view.set('useStaticLayout', true); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, null, "The frame with useStaticLayout true is"); same(borderFrame, null, "The borderFrame with useStaticLayout true is"); SC.run(function () { pane = SC.Pane.create({ childViews: [view] }).append(); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 0, y: 0, width: 100, height: 100 }, "The frame with useStaticLayout true after rendering is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with useStaticLayout true after rendering is"); // Right 5px border. SC.run(function () { view.adjust('borderRight', 5); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 0, y: 0, width: 95, height: 100 }, "The frame with 5px right border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border is"); // Top 10px border. SC.run(function () { view.adjust('borderTop', 10); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 0, y: 10, width: 95, height: 90 }, "The frame with 5px right border & 10px top border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border is"); // Left 15px border. SC.run(function () { view.adjust('borderLeft', 15); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 15, y: 10, width: 80, height: 90 }, "The frame with 5px right border & 10px top border & 15px left border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border is"); // Bottom 20px border. SC.run(function () { view.adjust('borderBottom', 20); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 15, y: 10, width: 80, height: 70 }, "The frame with 5px right border & 10px top border & 15px left border & 20px bottom border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 5px right border & 10px top border & 15px left border & 20px bottom border is"); // 25px border. SC.run(function () { view.set('layout', { width: 100, height: 100, border: 25 }); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 25, y: 25, width: 50, height: 50 }, "The frame with 25px border is"); same(borderFrame, { x: 0, y: 0, width: 100, height: 100 }, "The borderFrame with 25px border is"); pane.destroy();
});
test(“borderFrame on a view with a scale.”, function() {
var borderFrame, frame, pane; SC.run(function() { view.adjust({ border: 2 }); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 2, y: 2, height: 96, width: 96 }, "PRELIM: The unscaled frame with border: 2 is correct."); same(borderFrame, { x: 0, y: 0, height: 100, width: 100 }, "PRELIM: The unscaled borderFrame with border: 2 is correct."); SC.run(function() { view.adjust({ scale: 0.5 }); }); frame = view.get('frame'); borderFrame = view.get('borderFrame'); same(frame, { x: 26, y: 26, height: 48, width: 48, scale: 0.5 }, "The scaled frame with border: 2 is correct."); same(borderFrame, { x: 25, y: 25, height: 50, width: 50, scale: 0.5 }, "The scaled borderFrame with border: 2 is correct.");
});