X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/test/unit/widgets/layout/VBoxLayout.js diff --git a/test/unit/widgets/layout/VBoxLayout.js b/test/unit/widgets/layout/VBoxLayout.js deleted file mode 100644 index bf2d557d..00000000 --- a/test/unit/widgets/layout/VBoxLayout.js +++ /dev/null @@ -1,453 +0,0 @@ -/*! - * 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