Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / test / unit / widgets / layout / VBoxLayout.js
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 /**
8  * Tests Ext.data.Store functionality
9  * @author Ed Spencer
10  */
11 (function() {
12     var suite  = Ext.test.session.getSuite('Ext.layout.VBoxLayout'),
13         assert = Y.Assert;
14     
15     function buildFakeChild(config) {
16         config = config || {};
17               
18         Ext.applyIf(config, {
19             getWidth: function() {
20                 return 10;
21             },
22             getHeight: function() {
23                 return 10;
24             },
25             getSize: function() {
26                 return {
27                     height: 10,
28                     width : 10
29                 };
30             },
31             margins: {
32                 top   : 0,
33                 right : 0,
34                 bottom: 0,
35                 left  : 0
36             }
37         });
38         
39         return config;
40     }
41     
42     function buildLayout(config) {
43         config = config || {};
44               
45         Ext.applyIf(config, {
46             padding: {
47                 top   : 0,
48                 right : 0,
49                 bottom: 0,
50                 left  : 0
51             }
52         });
53         
54         return new Ext.layout.VBoxLayout(config);
55     };
56     
57     suite.add(new Y.Test.Case({
58         name: 'calculating flexed box sizes',
59         
60         setUp: function() {
61             this.layout = buildLayout();
62             
63             this.items = [
64                 buildFakeChild({flex: 1}),
65                 buildFakeChild({flex: 1}),
66                 buildFakeChild({flex: 1}),
67                 buildFakeChild({flex: 1})
68             ];
69             
70             this.targetSize = {
71                 height: 400,
72                 width : 100
73             };
74         },
75         
76         testEqualFlexHeights: function() {
77             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
78                 boxes = calcs.boxes;
79             
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);
84         },
85         
86         testDifferentFlexWidths: function() {
87             this.items = [
88                 buildFakeChild({flex: 1}),
89                 buildFakeChild({flex: 2}),
90                 buildFakeChild({flex: 3}),
91                 buildFakeChild({flex: 4})
92             ];
93             
94             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
95                 boxes = calcs.boxes;
96             
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);
101         },
102         
103         testMarginsAccountedFor: function() {
104             var items = [
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}})
109             ];
110              
111             var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
112                 boxes = calcs.boxes;
113             
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);
118         },
119         
120         testPaddingAccountedFor: function() {
121             this.layout = buildLayout({
122                 padding: {
123                     top   : 10,
124                     right : 10,
125                     bottom: 10,
126                     left  : 10
127                 }
128             });
129             
130             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
131                 boxes = calcs.boxes;
132             
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);
138         },
139         
140         //one of the items is passed both a width and a flex - the flex should be ignored
141         testHeightDominatesFlex: function() {
142             var items = [
143                 buildFakeChild({flex: 1, height: 250, getHeight: function() {return 250;}}),
144                 buildFakeChild({flex: 1}),
145                 buildFakeChild({flex: 1}),
146                 buildFakeChild({flex: 1})
147             ];
148              
149             var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
150                 boxes = calcs.boxes;
151             
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);
156         },
157         
158         testHeightPropertyDominatesGetHeight: function() {
159             var layout = buildLayout({
160                 pack : 'start',
161                 align: 'stretch'
162             });
163             
164             var items = [
165                 {
166                     title: 'Panel 1',
167                     flex: 1,
168                     html: 'flex : 1',
169                     frame: true,
170                     margins: {top: 0, left: 0, right: 0, bottom: 0},
171                     getHeight: function() {return 10;},
172                     getWidth: function() {return 10;}
173                 }, {
174                     title: 'Panel 2',
175                     height: 100,
176                     html: 'width : 100',
177                     frame: true,
178                     margins: {top: 0, left: 0, right: 0, bottom: 0},
179                     getWidth: function() {return 10;},
180                     
181                     //NOTE: this should be ignored by HBox because we have a different configured width property
182                     getHeight: function() {return 10;}
183                 }, {
184                     title: 'Panel 3',
185                     flex: 2,
186                     html: 'flex : 2',
187                     frame: true,
188                     margins: {top: 0, left: 0, right: 0, bottom: 0},
189                     getHeight: function() {return 10;},
190                     getWidth: function() {return 10;}
191                 }
192             ];
193             
194             var targetSize = {
195                 height: 1628,
196                 width : 630
197             };
198             
199             var calcs = layout.calculateChildBoxes(items, targetSize),
200                 boxes = calcs.boxes;
201             
202             assert.areEqual(0, boxes[0].top);
203             assert.areEqual(510, boxes[1].top);
204             assert.areEqual(610, boxes[2].top);
205         }
206     }));
207     
208     suite.add(new Y.Test.Case({
209         name: 'minHeight of items',
210
211         setUp: function() {
212             this.layout = buildLayout();
213
214             this.layout.beforeCt = {
215                 getWidth: function() {
216                     return 0;
217                 },
218                 createChild: Ext.emptyFn
219             };
220
221             this.layout.afterCt = {
222                 getWidth: function() {
223                     return 0;
224                 },
225                 createChild: Ext.emptyFn
226             };
227
228             this.items = [
229                 buildFakeChild({height: 100, minHeight: 100}),
230                 buildFakeChild({height: 200, minHeight: 120}),
231                 buildFakeChild({height: 200, minHeight: 120}),
232                 buildFakeChild({height: 200, minHeight: 120})
233             ];
234         },
235
236         testAvailableWidthIsSufficient: function() {
237             var targetSize = {
238                 height: 700,
239                 width : 25
240             };
241
242             var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
243                 boxes = calcs.boxes;
244
245             assert.areEqual(0,   boxes[0].top);
246             assert.areEqual(100, boxes[1].top);
247             assert.areEqual(300, boxes[2].top);
248             assert.areEqual(500, boxes[3].top);
249
250             assert.areEqual(100, boxes[0].height);
251             assert.areEqual(200, boxes[1].height);
252             assert.areEqual(200, boxes[2].height);
253             assert.areEqual(200, boxes[3].height);
254         },
255
256         testHasShortfall: function() {
257             var targetSize = {
258                 height: 500,
259                 width : 25
260             };
261
262             var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
263                 boxes = calcs.boxes;
264
265             assert.areEqual(100, boxes[0].height);
266             assert.areEqual(133, boxes[1].height);
267             assert.areEqual(133, boxes[2].height);
268             assert.areEqual(134, boxes[3].height);
269
270             assert.areEqual(0,   boxes[0].top);
271             assert.areEqual(100, boxes[1].top);
272             assert.areEqual(233, boxes[2].top);
273             assert.areEqual(366, boxes[3].top);
274         },
275
276         testTooNarrow: function() {
277             var targetSize = {
278                 height: 400,
279                 width : 25
280             };
281
282             var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
283                 boxes = calcs.boxes;
284
285             assert.areEqual(0,   boxes[0].top);
286             assert.areEqual(100, boxes[1].top);
287             assert.areEqual(220, boxes[2].top);
288             assert.areEqual(340, boxes[3].top);
289
290             assert.areEqual(100, boxes[0].height);
291             assert.areEqual(120, boxes[1].height);
292             assert.areEqual(120, boxes[2].height);
293             assert.areEqual(120, boxes[3].height);
294         }
295     }));
296     
297     suite.add(new Y.Test.Case({
298         name: 'aligning',
299         
300         setUp: function() {
301             this.items = [
302                 buildFakeChild({flex: 1, getWidth: function() {return 10;}}),
303                 buildFakeChild({flex: 1, getWidth: function() {return 20;}}),
304                 buildFakeChild({flex: 1, getWidth: function() {return 30;}}),
305                 buildFakeChild({flex: 1, getWidth: function() {return 40;}})
306             ];
307             
308             this.targetSize = {
309                 height: 400,
310                 width : 100
311             };
312         },
313         
314         testLeft: function() {
315             this.layout = buildLayout({
316                 align: 'left'
317             });
318             
319             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
320                 boxes = calcs.boxes;
321             
322             assert.areEqual(0, boxes[0].left);
323             assert.areEqual(0, boxes[1].left);
324             assert.areEqual(0, boxes[2].left);
325             assert.areEqual(0, boxes[3].left);
326         },
327         
328         testMiddle: function() {
329             this.layout = buildLayout({
330                 align: 'center'
331             });
332             
333             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
334                 boxes = calcs.boxes;
335             
336             assert.areEqual(45, boxes[0].left);
337             assert.areEqual(40, boxes[1].left);
338             assert.areEqual(35, boxes[2].left);
339             assert.areEqual(30, boxes[3].left);
340         },
341         
342         testStretch: function() {
343             this.layout = buildLayout({
344                 align: 'stretch'
345             });
346             
347             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
348                 boxes = calcs.boxes;
349             
350             assert.areEqual(0, boxes[0].left);
351             assert.areEqual(0, boxes[1].left);
352             assert.areEqual(0, boxes[2].left);
353             assert.areEqual(0, boxes[3].left);
354             
355             assert.areEqual(100, boxes[0].width);
356             assert.areEqual(100, boxes[1].width);
357             assert.areEqual(100, boxes[2].width);
358             assert.areEqual(100, boxes[3].width);
359         },
360         
361         testStretchMax: function() {
362             this.layout = buildLayout({
363                 align: 'stretchmax'
364             });
365             
366             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
367                 boxes = calcs.boxes;
368             
369             assert.areEqual(0, boxes[0].left);
370             assert.areEqual(0, boxes[1].left);
371             assert.areEqual(0, boxes[2].left);
372             assert.areEqual(0, boxes[3].left);
373             
374             assert.areEqual(40, boxes[0].width);
375             assert.areEqual(40, boxes[1].width);
376             assert.areEqual(40, boxes[2].width);
377             assert.areEqual(40, boxes[3].width);
378         }
379     }));
380     
381     suite.add(new Y.Test.Case({
382         name: 'packing',
383         
384         setUp: function() {
385             this.items = [
386                 buildFakeChild({getSize: function() {return {width: 10, height: 10};}}),
387                 buildFakeChild({getSize: function() {return {width: 10, height: 20};}}),
388                 buildFakeChild({getSize: function() {return {width: 10, height: 30};}}),
389                 buildFakeChild({getSize: function() {return {width: 10, height: 40};}})
390             ];
391             
392             this.targetSize = {
393                 height: 400,
394                 width : 100
395             };
396         },
397         
398         testPackStart: function() {
399             this.layout = buildLayout({
400                 pack: 'start'
401             });
402             
403             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
404                 boxes = calcs.boxes;
405             
406             assert.areEqual(0, boxes[0].top);
407             assert.areEqual(10, boxes[1].top);
408             assert.areEqual(30, boxes[2].top);
409             assert.areEqual(60, boxes[3].top);
410         },
411         
412         testPackCenter: function() {
413             this.layout = buildLayout({
414                 pack: 'center'
415             });
416             
417             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
418                 boxes = calcs.boxes;
419                         
420             assert.areEqual(150, boxes[0].top);
421             assert.areEqual(160, boxes[1].top);
422             assert.areEqual(180, boxes[2].top);
423             assert.areEqual(210, boxes[3].top);
424         },
425         
426         testPackEnd: function() {
427             this.layout = buildLayout({
428                 pack: 'end'
429             });
430             
431             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
432                 boxes = calcs.boxes;
433             
434             assert.areEqual(300, boxes[0].top);
435             assert.areEqual(310, boxes[1].top);
436             assert.areEqual(330, boxes[2].top);
437             assert.areEqual(360, boxes[3].top);
438         }
439     }));
440     
441     suite.add(new Y.Test.Case({
442         name: 'meta data from calculated box sizes',
443         
444         setUp: function() {
445             this.layout = buildLayout();
446             
447             this.items = [
448                 buildFakeChild({getWidth: function() {return 50;}, flex: 1}),
449                 buildFakeChild({getWidth: function() {return 60;}, flex: 1}),
450                 buildFakeChild({getWidth: function() {return 10;}, flex: 1}),
451                 buildFakeChild({getWidth: function() {return 80;}, flex: 1})
452             ];
453             
454             this.targetSize = {
455                 height: 400,
456                 width : 100
457             };
458         },
459         
460         testMaxHeight: function() {
461             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
462                 meta  = calcs.meta;
463             
464             assert.areEqual(80, meta.maxWidth);
465         }
466     }));
467     
468     suite.add(new Y.Test.Case({
469         name: 'update innerCt size',
470         
471         setUp: function() {
472             this.layout = buildLayout({
473                 align  : 'stretch',
474                 padding: {
475                     top   : 0,
476                     bottom: 0,
477                     left  : 10,
478                     right : 20
479                 }
480             });
481             
482             //fake the values that are calculated during onLayout
483             this.layoutTargetLastSize = {
484                 width : 100,
485                 height: 400
486             };
487             
488             this.childBoxCache = {
489                 meta: {
490                     maxWidth: 150
491                 }
492             };
493         },
494         
495         testMaintainsWidthForAlignStretch: function() {
496             var layout = this.layout,
497                 width, height;
498             
499             //a fake innerCt element that we can intercept calls to setSize on
500             layout.innerCt = {
501                 setSize: function(widthArg, heightArg) {
502                     width  = widthArg;
503                     height = heightArg;
504                 }
505             };
506             
507             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
508             
509             assert.areSame(100, width);
510             assert.areSame(400, height);
511         },
512         
513         //if aligning middle, increase height to accomodate the tallest child
514         testIncreasesWidthForAlignMiddle: function() {
515             this.layout = buildLayout({
516                 align  : 'middle',
517                 padding: {
518                     top   : 0,
519                     bottom: 0,
520                     left  : 10,
521                     right : 20
522                 }
523             });
524             
525             var layout = this.layout,
526                 width, height;
527             
528             //a fake innerCt element that we can intercept calls to setSize on
529             layout.innerCt = {
530                 setSize: function(widthArg, heightArg) {
531                     width  = widthArg;
532                     height = heightArg;
533                 }
534             };
535             
536             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
537             
538             assert.areSame(180, width);
539             assert.areSame(400, height);
540         }
541     }));
542 })();