3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * Tests Ext.data.Store functionality
12 var suite = Ext.test.session.getSuite('Ext.layout.VBoxLayout'),
15 function buildFakeChild(config) {
16 config = config || {};
19 getWidth: function() {
22 getHeight: function() {
42 function buildLayout(config) {
43 config = config || {};
54 return new Ext.layout.VBoxLayout(config);
57 suite.add(new Y.Test.Case({
58 name: 'calculating flexed box sizes',
61 this.layout = buildLayout();
64 buildFakeChild({flex: 1}),
65 buildFakeChild({flex: 1}),
66 buildFakeChild({flex: 1}),
67 buildFakeChild({flex: 1})
76 testEqualFlexHeights: function() {
77 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
80 assert.areEqual(100, boxes[0].height);
81 assert.areEqual(100, boxes[1].height);
82 assert.areEqual(100, boxes[2].height);
83 assert.areEqual(100, boxes[3].height);
86 testDifferentFlexWidths: function() {
88 buildFakeChild({flex: 1}),
89 buildFakeChild({flex: 2}),
90 buildFakeChild({flex: 3}),
91 buildFakeChild({flex: 4})
94 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
97 assert.areEqual(40, boxes[0].height);
98 assert.areEqual(80, boxes[1].height);
99 assert.areEqual(120, boxes[2].height);
100 assert.areEqual(160, boxes[3].height);
103 testMarginsAccountedFor: function() {
105 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
106 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
107 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}}),
108 buildFakeChild({flex: 1, margins: {left: 0, right: 0, top: 10, bottom: 10}})
111 var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
114 assert.areEqual(80, boxes[0].height);
115 assert.areEqual(80, boxes[1].height);
116 assert.areEqual(80, boxes[2].height);
117 assert.areEqual(80, boxes[3].height);
120 testPaddingAccountedFor: function() {
121 this.layout = buildLayout({
130 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
133 //400px available internally, minus 20px total left + right padding = 380 / 4
134 assert.areEqual(95, boxes[0].height);
135 assert.areEqual(95, boxes[1].height);
136 assert.areEqual(95, boxes[2].height);
137 assert.areEqual(95, boxes[3].height);
140 //one of the items is passed both a width and a flex - the flex should be ignored
141 testHeightDominatesFlex: function() {
143 buildFakeChild({flex: 1, height: 250, getHeight: function() {return 250;}}),
144 buildFakeChild({flex: 1}),
145 buildFakeChild({flex: 1}),
146 buildFakeChild({flex: 1})
149 var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
152 assert.areEqual(250, boxes[0].height);
153 assert.areEqual(50, boxes[1].height);
154 assert.areEqual(50, boxes[2].height);
155 assert.areEqual(50, boxes[3].height);
158 testHeightPropertyDominatesGetHeight: function() {
159 var layout = buildLayout({
170 margins: {top: 0, left: 0, right: 0, bottom: 0},
171 getHeight: function() {return 10;},
172 getWidth: function() {return 10;}
178 margins: {top: 0, left: 0, right: 0, bottom: 0},
179 getWidth: function() {return 10;},
181 //NOTE: this should be ignored by HBox because we have a different configured width property
182 getHeight: function() {return 10;}
188 margins: {top: 0, left: 0, right: 0, bottom: 0},
189 getHeight: function() {return 10;},
190 getWidth: function() {return 10;}
199 var calcs = layout.calculateChildBoxes(items, targetSize),
202 assert.areEqual(0, boxes[0].top);
203 assert.areEqual(510, boxes[1].top);
204 assert.areEqual(610, boxes[2].top);
208 suite.add(new Y.Test.Case({
213 buildFakeChild({flex: 1, getWidth: function() {return 10;}}),
214 buildFakeChild({flex: 1, getWidth: function() {return 20;}}),
215 buildFakeChild({flex: 1, getWidth: function() {return 30;}}),
216 buildFakeChild({flex: 1, getWidth: function() {return 40;}})
225 testLeft: function() {
226 this.layout = buildLayout({
230 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
233 assert.areEqual(0, boxes[0].left);
234 assert.areEqual(0, boxes[1].left);
235 assert.areEqual(0, boxes[2].left);
236 assert.areEqual(0, boxes[3].left);
239 testMiddle: function() {
240 this.layout = buildLayout({
244 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
247 assert.areEqual(45, boxes[0].left);
248 assert.areEqual(40, boxes[1].left);
249 assert.areEqual(35, boxes[2].left);
250 assert.areEqual(30, boxes[3].left);
253 testStretch: function() {
254 this.layout = buildLayout({
258 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
261 assert.areEqual(0, boxes[0].left);
262 assert.areEqual(0, boxes[1].left);
263 assert.areEqual(0, boxes[2].left);
264 assert.areEqual(0, boxes[3].left);
266 assert.areEqual(100, boxes[0].width);
267 assert.areEqual(100, boxes[1].width);
268 assert.areEqual(100, boxes[2].width);
269 assert.areEqual(100, boxes[3].width);
272 testStretchMax: function() {
273 this.layout = buildLayout({
277 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
280 assert.areEqual(0, boxes[0].left);
281 assert.areEqual(0, boxes[1].left);
282 assert.areEqual(0, boxes[2].left);
283 assert.areEqual(0, boxes[3].left);
285 assert.areEqual(40, boxes[0].width);
286 assert.areEqual(40, boxes[1].width);
287 assert.areEqual(40, boxes[2].width);
288 assert.areEqual(40, boxes[3].width);
292 suite.add(new Y.Test.Case({
297 buildFakeChild({getSize: function() {return {width: 10, height: 10};}}),
298 buildFakeChild({getSize: function() {return {width: 10, height: 20};}}),
299 buildFakeChild({getSize: function() {return {width: 10, height: 30};}}),
300 buildFakeChild({getSize: function() {return {width: 10, height: 40};}})
309 testPackStart: function() {
310 this.layout = buildLayout({
314 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
317 assert.areEqual(0, boxes[0].top);
318 assert.areEqual(10, boxes[1].top);
319 assert.areEqual(30, boxes[2].top);
320 assert.areEqual(60, boxes[3].top);
323 testPackCenter: function() {
324 this.layout = buildLayout({
328 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
331 assert.areEqual(150, boxes[0].top);
332 assert.areEqual(160, boxes[1].top);
333 assert.areEqual(180, boxes[2].top);
334 assert.areEqual(210, boxes[3].top);
337 testPackEnd: function() {
338 this.layout = buildLayout({
342 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
345 assert.areEqual(300, boxes[0].top);
346 assert.areEqual(310, boxes[1].top);
347 assert.areEqual(330, boxes[2].top);
348 assert.areEqual(360, boxes[3].top);
352 suite.add(new Y.Test.Case({
353 name: 'meta data from calculated box sizes',
356 this.layout = buildLayout();
359 buildFakeChild({getWidth: function() {return 50;}, flex: 1}),
360 buildFakeChild({getWidth: function() {return 60;}, flex: 1}),
361 buildFakeChild({getWidth: function() {return 10;}, flex: 1}),
362 buildFakeChild({getWidth: function() {return 80;}, flex: 1})
371 testMaxHeight: function() {
372 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
375 assert.areEqual(80, meta.maxWidth);
379 suite.add(new Y.Test.Case({
380 name: 'update innerCt size',
383 this.layout = buildLayout({
393 //fake the values that are calculated during onLayout
394 this.layoutTargetLastSize = {
399 this.childBoxCache = {
406 testMaintainsWidthForAlignStretch: function() {
407 var layout = this.layout,
410 //a fake innerCt element that we can intercept calls to setSize on
412 setSize: function(widthArg, heightArg) {
418 layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
420 assert.areSame(100, width);
421 assert.areSame(400, height);
424 //if aligning middle, increase height to accomodate the tallest child
425 testIncreasesWidthForAlignMiddle: function() {
426 this.layout = buildLayout({
436 var layout = this.layout,
439 //a fake innerCt element that we can intercept calls to setSize on
441 setSize: function(widthArg, heightArg) {
447 layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
449 assert.areSame(180, width);
450 assert.areSame(400, height);