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.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({
165 buildFakeChild({flex: 1, getHeight: function() {return 10;}}),
166 buildFakeChild({flex: 1, getHeight: function() {return 20;}}),
167 buildFakeChild({flex: 1, getHeight: function() {return 30;}}),
168 buildFakeChild({flex: 1, getHeight: function() {return 40;}})
177 testTop: function() {
178 this.layout = buildLayout({
182 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
185 assert.areEqual(0, boxes[0].top);
186 assert.areEqual(0, boxes[1].top);
187 assert.areEqual(0, boxes[2].top);
188 assert.areEqual(0, boxes[3].top);
191 testMiddle: function() {
192 this.layout = buildLayout({
196 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
199 assert.areEqual(45, boxes[0].top);
200 assert.areEqual(40, boxes[1].top);
201 assert.areEqual(35, boxes[2].top);
202 assert.areEqual(30, boxes[3].top);
205 testStretch: function() {
206 this.layout = buildLayout({
210 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
213 assert.areEqual(0, boxes[0].top);
214 assert.areEqual(0, boxes[1].top);
215 assert.areEqual(0, boxes[2].top);
216 assert.areEqual(0, boxes[3].top);
218 assert.areEqual(100, boxes[0].height);
219 assert.areEqual(100, boxes[1].height);
220 assert.areEqual(100, boxes[2].height);
221 assert.areEqual(100, boxes[3].height);
224 testStretchMax: function() {
225 this.layout = buildLayout({
229 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
232 assert.areEqual(0, boxes[0].top);
233 assert.areEqual(0, boxes[1].top);
234 assert.areEqual(0, boxes[2].top);
235 assert.areEqual(0, boxes[3].top);
237 assert.areEqual(40, boxes[0].height);
238 assert.areEqual(40, boxes[1].height);
239 assert.areEqual(40, boxes[2].height);
240 assert.areEqual(40, boxes[3].height);
244 suite.add(new Y.Test.Case({
249 buildFakeChild({getSize: function() {return {height: 10, width: 10};}}),
250 buildFakeChild({getSize: function() {return {height: 10, width: 20};}}),
251 buildFakeChild({getSize: function() {return {height: 10, width: 30};}}),
252 buildFakeChild({getSize: function() {return {height: 10, width: 40};}})
261 testPackStart: function() {
262 this.layout = buildLayout({
266 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
269 assert.areEqual(0, boxes[0].left);
270 assert.areEqual(10, boxes[1].left);
271 assert.areEqual(30, boxes[2].left);
272 assert.areEqual(60, boxes[3].left);
275 testPackCenter: function() {
276 this.layout = buildLayout({
280 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
283 assert.areEqual(150, boxes[0].left);
284 assert.areEqual(160, boxes[1].left);
285 assert.areEqual(180, boxes[2].left);
286 assert.areEqual(210, boxes[3].left);
289 testPackEnd: function() {
290 this.layout = buildLayout({
294 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
297 assert.areEqual(300, boxes[0].left);
298 assert.areEqual(310, boxes[1].left);
299 assert.areEqual(330, boxes[2].left);
300 assert.areEqual(360, boxes[3].left);
303 testWidthPropertyDominatesGetWidth: function() {
304 var layout = buildLayout({
315 margins: {top: 0, left: 0, right: 0, bottom: 0},
316 getHeight: function() {return 10;},
317 getWidth: function() {return 10;}
323 margins: {top: 0, left: 0, right: 0, bottom: 0},
324 getHeight: function() {return 10;},
326 //NOTE: this should be ignored by HBox because we have a different configured width property
327 getWidth: function() {return 10;}
333 margins: {top: 0, left: 0, right: 0, bottom: 0},
334 getHeight: function() {return 10;},
335 getWidth: function() {return 10;}
344 var calcs = layout.calculateChildBoxes(items, targetSize),
347 assert.areEqual(0, boxes[0].left);
348 assert.areEqual(510, boxes[1].left);
349 assert.areEqual(610, boxes[2].left);
353 suite.add(new Y.Test.Case({
354 name: 'meta data from calculated box sizes',
357 this.layout = buildLayout();
360 buildFakeChild({getHeight: function() {return 50;}, flex: 1}),
361 buildFakeChild({getHeight: function() {return 60;}, flex: 1}),
362 buildFakeChild({getHeight: function() {return 10;}, flex: 1}),
363 buildFakeChild({getHeight: function() {return 80;}, flex: 1})
372 testMaxHeight: function() {
373 var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
376 assert.areEqual(80, meta.maxHeight);
380 suite.add(new Y.Test.Case({
381 name: 'update innerCt size',
384 this.layout = buildLayout({
394 //fake the values that are calculated during onLayout
395 this.layoutTargetLastSize = {
400 this.childBoxCache = {
407 testMaintainsHeightForAlignStretch: function() {
408 var layout = this.layout,
411 //a fake innerCt element that we can intercept calls to setSize on
413 setSize: function(widthArg, heightArg) {
419 layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
421 assert.areSame(400, width);
422 assert.areSame(100, height);
425 //if aligning middle, increase height to accomodate the tallest child
426 testIncreasesHeightForAlignMiddle: function() {
427 this.layout = buildLayout({
437 var layout = this.layout,
440 //a fake innerCt element that we can intercept calls to setSize on
442 setSize: function(widthArg, heightArg) {
448 layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
450 assert.areSame(400, width);
451 assert.areSame(180, height);