X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..6a7e4474cba9d8be4b2ec445e10f1691f7277c50:/test/unit/widgets/layout/VBoxLayout.js diff --git a/test/unit/widgets/layout/VBoxLayout.js b/test/unit/widgets/layout/VBoxLayout.js new file mode 100644 index 00000000..bf2d557d --- /dev/null +++ b/test/unit/widgets/layout/VBoxLayout.js @@ -0,0 +1,453 @@ +/*! + * Ext JS Library 3.2.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * Tests Ext.data.Store functionality + * @author Ed Spencer + */ +(function() { + var suite = Ext.test.session.getSuite('Ext.layout.VBoxLayout'), + assert = Y.Assert; + + function buildFakeChild(config) { + config = config || {}; + + Ext.applyIf(config, { + getWidth: function() { + return 10; + }, + getHeight: function() { + return 10; + }, + getSize: function() { + return { + height: 10, + width : 10 + }; + }, + margins: { + top : 0, + right : 0, + bottom: 0, + left : 0 + } + }); + + return config; + } + + function buildLayout(config) { + config = config || {}; + + Ext.applyIf(config, { + padding: { + top : 0, + right : 0, + bottom: 0, + left : 0 + } + }); + + return new Ext.layout.VBoxLayout(config); + }; + + suite.add(new Y.Test.Case({ + name: 'calculating flexed box sizes', + + setUp: function() { + this.layout = buildLayout(); + + this.items = [ + buildFakeChild({flex: 1}), + buildFakeChild({flex: 1}), + buildFakeChild({flex: 1}), + buildFakeChild({flex: 1}) + ]; + + this.targetSize = { + height: 400, + width : 100 + }; + }, + + testEqualFlexHeights: function() { + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(100, boxes[0].height); + assert.areEqual(100, boxes[1].height); + assert.areEqual(100, boxes[2].height); + assert.areEqual(100, boxes[3].height); + }, + + testDifferentFlexWidths: function() { + this.items = [ + buildFakeChild({flex: 1}), + buildFakeChild({flex: 2}), + buildFakeChild({flex: 3}), + buildFakeChild({flex: 4}) + ]; + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(40, boxes[0].height); + assert.areEqual(80, boxes[1].height); + assert.areEqual(120, boxes[2].height); + assert.areEqual(160, boxes[3].height); + }, + + testMarginsAccountedFor: function() { + var items = [ + buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}), + buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}), + buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}), + buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}) + ]; + + var calcs = this.layout.calculateChildBoxes(items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(80, boxes[0].height); + assert.areEqual(80, boxes[1].height); + assert.areEqual(80, boxes[2].height); + assert.areEqual(80, boxes[3].height); + }, + + testPaddingAccountedFor: function() { + this.layout = buildLayout({ + padding: { + top : 10, + right : 10, + bottom: 10, + left : 10 + } + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + //400px available internally, minus 20px total left + right padding = 380 / 4 + assert.areEqual(95, boxes[0].height); + assert.areEqual(95, boxes[1].height); + assert.areEqual(95, boxes[2].height); + assert.areEqual(95, boxes[3].height); + }, + + //one of the items is passed both a width and a flex - the flex should be ignored + testHeightDominatesFlex: function() { + var items = [ + buildFakeChild({flex: 1, height: 250, getHeight: function() {return 250;}}), + buildFakeChild({flex: 1}), + buildFakeChild({flex: 1}), + buildFakeChild({flex: 1}) + ]; + + var calcs = this.layout.calculateChildBoxes(items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(250, boxes[0].height); + assert.areEqual(50, boxes[1].height); + assert.areEqual(50, boxes[2].height); + assert.areEqual(50, boxes[3].height); + }, + + testHeightPropertyDominatesGetHeight: function() { + var layout = buildLayout({ + pack : 'start', + align: 'stretch' + }); + + var items = [ + { + title: 'Panel 1', + flex: 1, + html: 'flex : 1', + frame: true, + margins: {top: 0, left: 0, right: 0, bottom: 0}, + getHeight: function() {return 10;}, + getWidth: function() {return 10;} + }, { + title: 'Panel 2', + height: 100, + html: 'width : 100', + frame: true, + margins: {top: 0, left: 0, right: 0, bottom: 0}, + getWidth: function() {return 10;}, + + //NOTE: this should be ignored by HBox because we have a different configured width property + getHeight: function() {return 10;} + }, { + title: 'Panel 3', + flex: 2, + html: 'flex : 2', + frame: true, + margins: {top: 0, left: 0, right: 0, bottom: 0}, + getHeight: function() {return 10;}, + getWidth: function() {return 10;} + } + ]; + + var targetSize = { + height: 1628, + width : 630 + }; + + var calcs = layout.calculateChildBoxes(items, targetSize), + boxes = calcs.boxes; + + assert.areEqual(0, boxes[0].top); + assert.areEqual(510, boxes[1].top); + assert.areEqual(610, boxes[2].top); + } + })); + + suite.add(new Y.Test.Case({ + name: 'aligning', + + setUp: function() { + this.items = [ + buildFakeChild({flex: 1, getWidth: function() {return 10;}}), + buildFakeChild({flex: 1, getWidth: function() {return 20;}}), + buildFakeChild({flex: 1, getWidth: function() {return 30;}}), + buildFakeChild({flex: 1, getWidth: function() {return 40;}}) + ]; + + this.targetSize = { + height: 400, + width : 100 + }; + }, + + testLeft: function() { + this.layout = buildLayout({ + align: 'left' + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(0, boxes[0].left); + assert.areEqual(0, boxes[1].left); + assert.areEqual(0, boxes[2].left); + assert.areEqual(0, boxes[3].left); + }, + + testMiddle: function() { + this.layout = buildLayout({ + align: 'center' + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(45, boxes[0].left); + assert.areEqual(40, boxes[1].left); + assert.areEqual(35, boxes[2].left); + assert.areEqual(30, boxes[3].left); + }, + + testStretch: function() { + this.layout = buildLayout({ + align: 'stretch' + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(0, boxes[0].left); + assert.areEqual(0, boxes[1].left); + assert.areEqual(0, boxes[2].left); + assert.areEqual(0, boxes[3].left); + + assert.areEqual(100, boxes[0].width); + assert.areEqual(100, boxes[1].width); + assert.areEqual(100, boxes[2].width); + assert.areEqual(100, boxes[3].width); + }, + + testStretchMax: function() { + this.layout = buildLayout({ + align: 'stretchmax' + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(0, boxes[0].left); + assert.areEqual(0, boxes[1].left); + assert.areEqual(0, boxes[2].left); + assert.areEqual(0, boxes[3].left); + + assert.areEqual(40, boxes[0].width); + assert.areEqual(40, boxes[1].width); + assert.areEqual(40, boxes[2].width); + assert.areEqual(40, boxes[3].width); + } + })); + + suite.add(new Y.Test.Case({ + name: 'packing', + + setUp: function() { + this.items = [ + buildFakeChild({getSize: function() {return {width: 10, height: 10};}}), + buildFakeChild({getSize: function() {return {width: 10, height: 20};}}), + buildFakeChild({getSize: function() {return {width: 10, height: 30};}}), + buildFakeChild({getSize: function() {return {width: 10, height: 40};}}) + ]; + + this.targetSize = { + height: 400, + width : 100 + }; + }, + + testPackStart: function() { + this.layout = buildLayout({ + pack: 'start' + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(0, boxes[0].top); + assert.areEqual(10, boxes[1].top); + assert.areEqual(30, boxes[2].top); + assert.areEqual(60, boxes[3].top); + }, + + testPackCenter: function() { + this.layout = buildLayout({ + pack: 'center' + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(150, boxes[0].top); + assert.areEqual(160, boxes[1].top); + assert.areEqual(180, boxes[2].top); + assert.areEqual(210, boxes[3].top); + }, + + testPackEnd: function() { + this.layout = buildLayout({ + pack: 'end' + }); + + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + boxes = calcs.boxes; + + assert.areEqual(300, boxes[0].top); + assert.areEqual(310, boxes[1].top); + assert.areEqual(330, boxes[2].top); + assert.areEqual(360, boxes[3].top); + } + })); + + suite.add(new Y.Test.Case({ + name: 'meta data from calculated box sizes', + + setUp: function() { + this.layout = buildLayout(); + + this.items = [ + buildFakeChild({getWidth: function() {return 50;}, flex: 1}), + buildFakeChild({getWidth: function() {return 60;}, flex: 1}), + buildFakeChild({getWidth: function() {return 10;}, flex: 1}), + buildFakeChild({getWidth: function() {return 80;}, flex: 1}) + ]; + + this.targetSize = { + height: 400, + width : 100 + }; + }, + + testMaxHeight: function() { + var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize), + meta = calcs.meta; + + assert.areEqual(80, meta.maxWidth); + } + })); + + suite.add(new Y.Test.Case({ + name: 'update innerCt size', + + setUp: function() { + this.layout = buildLayout({ + align : 'stretch', + padding: { + top : 0, + bottom: 0, + left : 10, + right : 20 + } + }); + + //fake the values that are calculated during onLayout + this.layoutTargetLastSize = { + width : 100, + height: 400 + }; + + this.childBoxCache = { + meta: { + maxWidth: 150 + } + }; + }, + + testMaintainsWidthForAlignStretch: function() { + var layout = this.layout, + width, height; + + //a fake innerCt element that we can intercept calls to setSize on + layout.innerCt = { + setSize: function(widthArg, heightArg) { + width = widthArg; + height = heightArg; + } + }; + + layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache); + + assert.areSame(100, width); + assert.areSame(400, height); + }, + + //if aligning middle, increase height to accomodate the tallest child + testIncreasesWidthForAlignMiddle: function() { + this.layout = buildLayout({ + align : 'middle', + padding: { + top : 0, + bottom: 0, + left : 10, + right : 20 + } + }); + + var layout = this.layout, + width, height; + + //a fake innerCt element that we can intercept calls to setSize on + layout.innerCt = { + setSize: function(widthArg, heightArg) { + width = widthArg; + height = heightArg; + } + }; + + layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache); + + assert.areSame(180, width); + assert.areSame(400, height); + } + })); +})(); \ No newline at end of file