3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * Tests Ext.data.Store functionality
12 var suite = Ext.test.session.getSuite('Ext.layout.HBoxLayout'),
15 function buildFakeChild(config) {
16 config = config || {};
20 getWidth: function() {
23 getHeight: function() {
43 function buildLayout(config) {
44 config = config || {};
55 return new Ext.layout.HBoxLayout(config);
58 suite.add(new Y.Test.Case({
59 name: 'calculating flexed box sizes',
62 this.layout = buildLayout();
65 buildFakeChild({flex: 1}),
66 buildFakeChild({flex: 1}),
67 buildFakeChild({flex: 1}),
68 buildFakeChild({flex: 1})
77 testEqualFlexWidths: function() {
78 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
81 assert.areEqual(100, boxes[0].width);
82 assert.areEqual(100, boxes[1].width);
83 assert.areEqual(100, boxes[2].width);
84 assert.areEqual(100, boxes[3].width);
87 testDifferentFlexWidths: function() {
89 buildFakeChild({flex: 1}),
90 buildFakeChild({flex: 2}),
91 buildFakeChild({flex: 3}),
92 buildFakeChild({flex: 4})
95 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
98 assert.areEqual(40, boxes[0].width);
99 assert.areEqual(80, boxes[1].width);
100 assert.areEqual(120, boxes[2].width);
101 assert.areEqual(160, boxes[3].width);
104 testMarginsAccountedFor: function() {
106 buildFakeChild({flex: 1, margins: {left: 10, right: 10, top: 0, bottom: 0}}),
107 buildFakeChild({flex: 1, margins: {left: 10, right: 10, top: 0, bottom: 0}}),
108 buildFakeChild({flex: 1, margins: {left: 10, right: 10, top: 0, bottom: 0}}),
109 buildFakeChild({flex: 1, margins: {left: 10, right: 10, top: 0, bottom: 0}})
112 var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
115 assert.areEqual(80, boxes[0].width);
116 assert.areEqual(80, boxes[1].width);
117 assert.areEqual(80, boxes[2].width);
118 assert.areEqual(80, boxes[3].width);
121 testPaddingAccountedFor: function() {
122 this.layout = buildLayout({
131 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
134 //400px available internally, minus 20px total left + right padding = 380 / 4
135 assert.areEqual(95, boxes[0].width);
136 assert.areEqual(95, boxes[1].width);
137 assert.areEqual(95, boxes[2].width);
138 assert.areEqual(95, boxes[3].width);
141 //one of the items is passed both a width and a flex - the flex should be ignored
142 testWidthDominatesFlex: function() {
144 buildFakeChild({flex: 1, width: 250, getWidth: function() {return 250;}}),
145 buildFakeChild({flex: 1}),
146 buildFakeChild({flex: 1}),
147 buildFakeChild({flex: 1})
150 var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
153 assert.areEqual(250, boxes[0].width);
154 assert.areEqual(50, boxes[1].width);
155 assert.areEqual(50, boxes[2].width);
156 assert.areEqual(50, boxes[3].width);
160 suite.add(new Y.Test.Case({
161 name: 'minWidth of items',
164 this.layout = buildLayout();
166 this.layout.beforeCt = {
167 getWidth: function() {
170 createChild: Ext.emptyFn
173 this.layout.afterCt = {
174 getWidth: function() {
177 createChild: Ext.emptyFn
181 buildFakeChild({width: 100, minWidth: 100}),
182 buildFakeChild({width: 200, minWidth: 120}),
183 buildFakeChild({width: 200, minWidth: 120}),
184 buildFakeChild({width: 200, minWidth: 120})
188 testAvailableWidthIsSufficient: function() {
194 var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
197 assert.areEqual(0, boxes[0].left);
198 assert.areEqual(100, boxes[1].left);
199 assert.areEqual(300, boxes[2].left);
200 assert.areEqual(500, boxes[3].left);
202 assert.areEqual(100, boxes[0].width);
203 assert.areEqual(200, boxes[1].width);
204 assert.areEqual(200, boxes[2].width);
205 assert.areEqual(200, boxes[3].width);
208 testHasShortfall: function() {
214 var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
217 assert.areEqual(100, boxes[0].width);
218 assert.areEqual(133, boxes[1].width);
219 assert.areEqual(133, boxes[2].width);
220 assert.areEqual(134, boxes[3].width);
222 assert.areEqual(0, boxes[0].left);
223 assert.areEqual(100, boxes[1].left);
224 assert.areEqual(233, boxes[2].left);
225 assert.areEqual(366, boxes[3].left);
228 testTooNarrow: function() {
234 var calcs = this.layout.calculateChildBoxes(this.items, targetSize),
237 assert.areEqual(0, boxes[0].left);
238 assert.areEqual(100, boxes[1].left);
239 assert.areEqual(220, boxes[2].left);
240 assert.areEqual(340, boxes[3].left);
242 assert.areEqual(100, boxes[0].width);
243 assert.areEqual(120, boxes[1].width);
244 assert.areEqual(120, boxes[2].width);
245 assert.areEqual(120, boxes[3].width);
249 suite.add(new Y.Test.Case({
254 buildFakeChild({flex: 1, getHeight: function() {return 10;}}),
255 buildFakeChild({flex: 1, getHeight: function() {return 20;}}),
256 buildFakeChild({flex: 1, getHeight: function() {return 30;}}),
257 buildFakeChild({flex: 1, getHeight: function() {return 40;}})
266 testTop: function() {
267 this.layout = buildLayout({
271 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
274 assert.areEqual(0, boxes[0].top);
275 assert.areEqual(0, boxes[1].top);
276 assert.areEqual(0, boxes[2].top);
277 assert.areEqual(0, boxes[3].top);
280 testMiddle: function() {
281 this.layout = buildLayout({
285 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
288 assert.areEqual(45, boxes[0].top);
289 assert.areEqual(40, boxes[1].top);
290 assert.areEqual(35, boxes[2].top);
291 assert.areEqual(30, boxes[3].top);
294 testStretch: function() {
295 this.layout = buildLayout({
299 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
302 assert.areEqual(0, boxes[0].top);
303 assert.areEqual(0, boxes[1].top);
304 assert.areEqual(0, boxes[2].top);
305 assert.areEqual(0, boxes[3].top);
307 assert.areEqual(100, boxes[0].height);
308 assert.areEqual(100, boxes[1].height);
309 assert.areEqual(100, boxes[2].height);
310 assert.areEqual(100, boxes[3].height);
313 testStretchMax: function() {
314 this.layout = buildLayout({
318 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
321 assert.areEqual(0, boxes[0].top);
322 assert.areEqual(0, boxes[1].top);
323 assert.areEqual(0, boxes[2].top);
324 assert.areEqual(0, boxes[3].top);
326 assert.areEqual(40, boxes[0].height);
327 assert.areEqual(40, boxes[1].height);
328 assert.areEqual(40, boxes[2].height);
329 assert.areEqual(40, boxes[3].height);
333 suite.add(new Y.Test.Case({
338 buildFakeChild({getSize: function() {return {height: 10, width: 10};}}),
339 buildFakeChild({getSize: function() {return {height: 10, width: 20};}}),
340 buildFakeChild({getSize: function() {return {height: 10, width: 30};}}),
341 buildFakeChild({getSize: function() {return {height: 10, width: 40};}})
350 testPackStart: function() {
351 this.layout = buildLayout({
355 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
358 assert.areEqual(0, boxes[0].left);
359 assert.areEqual(10, boxes[1].left);
360 assert.areEqual(30, boxes[2].left);
361 assert.areEqual(60, boxes[3].left);
364 testPackCenter: function() {
365 this.layout = buildLayout({
369 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
372 assert.areEqual(150, boxes[0].left);
373 assert.areEqual(160, boxes[1].left);
374 assert.areEqual(180, boxes[2].left);
375 assert.areEqual(210, boxes[3].left);
378 testPackEnd: function() {
379 this.layout = buildLayout({
383 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
386 assert.areEqual(300, boxes[0].left);
387 assert.areEqual(310, boxes[1].left);
388 assert.areEqual(330, boxes[2].left);
389 assert.areEqual(360, boxes[3].left);
392 testWidthPropertyDominatesGetWidth: function() {
393 var layout = buildLayout({
404 margins: {top: 0, left: 0, right: 0, bottom: 0},
405 getHeight: function() {return 10;},
406 getWidth: function() {return 10;}
412 margins: {top: 0, left: 0, right: 0, bottom: 0},
413 getHeight: function() {return 10;},
415 //NOTE: this should be ignored by HBox because we have a different configured width property
416 getWidth: function() {return 10;}
422 margins: {top: 0, left: 0, right: 0, bottom: 0},
423 getHeight: function() {return 10;},
424 getWidth: function() {return 10;}
433 var calcs = layout.calculateChildBoxes(items, targetSize),
436 assert.areEqual(0, boxes[0].left);
437 assert.areEqual(510, boxes[1].left);
438 assert.areEqual(610, boxes[2].left);
442 suite.add(new Y.Test.Case({
443 name: 'meta data from calculated box sizes',
446 this.layout = buildLayout();
449 buildFakeChild({getHeight: function() {return 50;}, flex: 1}),
450 buildFakeChild({getHeight: function() {return 60;}, flex: 1}),
451 buildFakeChild({getHeight: function() {return 10;}, flex: 1}),
452 buildFakeChild({getHeight: function() {return 80;}, flex: 1})
461 testMaxHeight: function() {
462 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
465 assert.areEqual(80, meta.maxHeight);
469 suite.add(new Y.Test.Case({
470 name: 'update innerCt size',
473 this.layout = buildLayout({
483 //fake the values that are calculated during onLayout
484 this.layoutTargetLastSize = {
489 this.childBoxCache = {
496 testMaintainsHeightForAlignStretch: function() {
497 var layout = this.layout,
500 //a fake innerCt element that we can intercept calls to setSize on
502 setSize: function(widthArg, heightArg) {
508 layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
510 assert.areSame(400, width);
511 assert.areSame(100, height);
514 //if aligning middle, increase height to accomodate the tallest child
515 testIncreasesHeightForAlignMiddle: function() {
516 this.layout = buildLayout({
526 var layout = this.layout,
529 //a fake innerCt element that we can intercept calls to setSize on
531 setSize: function(widthArg, heightArg) {
537 layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
539 assert.areSame(400, width);
540 assert.areSame(180, height);