test/unit/widgets/layout/HBoxLayout.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.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.HBoxLayout'),
  13         assert = Y.Assert;
  14
  15     function buildFakeChild(config) {
  16         config = config || {};
  17
  18         Ext.applyIf(config, {
  19             // width: 10,
  20             getWidth: function() {
  21                 return 10;
  22             },
  23             getHeight: function() {
  24                 return 10;
  25             },
  26             getSize: function() {
  27                 return {
  28                     height: 10,
  29                     width : 10
  30                 };
  31             },
  32             margins: {
  33                 top   : 0,
  34                 right : 0,
  35                 bottom: 0,
  36                 left  : 0
  37             }
  38         });
  39
  40         return config;
  41     }
  42
  43     function buildLayout(config) {
  44         config = config || {};
  45
  46         Ext.applyIf(config, {
  47             padding: {
  48                 top   : 0,
  49                 right : 0,
  50                 bottom: 0,
  51                 left  : 0
  52             }
  53         });
  54
  55         return new Ext.layout.HBoxLayout(config);
  56     };
  57
  58     suite.add(new Y.Test.Case({
  59         name: 'calculating flexed box sizes',
  60
  61         setUp: function() {
  62             this.layout = buildLayout();
  63
  64             this.items = [
  65                 buildFakeChild({flex: 1}),
  66                 buildFakeChild({flex: 1}),
  67                 buildFakeChild({flex: 1}),
  68                 buildFakeChild({flex: 1})
  69             ];
  70
  71             this.targetSize = {
  72                 height: 100,
  73                 width : 400
  74             };
  75         },
  76
  77         testEqualFlexWidths: function() {
  78             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
  79                 boxes = calcs.boxes;
  80
  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);
  85         },
  86
  87         testDifferentFlexWidths: function() {
  88             this.items = [
  89                 buildFakeChild({flex: 1}),
  90                 buildFakeChild({flex: 2}),
  91                 buildFakeChild({flex: 3}),
  92                 buildFakeChild({flex: 4})
  93             ];
  94
  95             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
  96                 boxes = calcs.boxes;
  97
  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);
 102         },
 103
 104         testMarginsAccountedFor: function() {
 105             var items = [
 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}})
 110             ];
 111
 112             var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
 113                 boxes = calcs.boxes;
 114
 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);
 119         },
 120
 121         testPaddingAccountedFor: function() {
 122             this.layout = buildLayout({
 123                 padding: {
 124                     top   : 10,
 125                     right : 10,
 126                     bottom: 10,
 127                     left  : 10
 128                 }
 129             });
 130
 131             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 132                 boxes = calcs.boxes;
 133
 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);
 139         },
 140
 141         //one of the items is passed both a width and a flex - the flex should be ignored
 142         testWidthDominatesFlex: function() {
 143             var items = [
 144                 buildFakeChild({flex: 1, width: 250, getWidth: function() {return 250;}}),
 145                 buildFakeChild({flex: 1}),
 146                 buildFakeChild({flex: 1}),
 147                 buildFakeChild({flex: 1})
 148             ];
 149
 150             var calcs = this.layout.calculateChildBoxes(items, this.targetSize),
 151                 boxes = calcs.boxes;
 152
 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);
 157         }
 158     }));
 159
 160     suite.add(new Y.Test.Case({
 161         name: 'aligning',
 162
 163         setUp: function() {
 164             this.items = [
 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;}})
 169             ];
 170
 171             this.targetSize = {
 172                 height: 100,
 173                 width : 400
 174             };
 175         },
 176
 177         testTop: function() {
 178             this.layout = buildLayout({
 179                 align: 'top'
 180             });
 181
 182             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 183                 boxes = calcs.boxes;
 184
 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);
 189         },
 190
 191         testMiddle: function() {
 192             this.layout = buildLayout({
 193                 align: 'middle'
 194             });
 195
 196             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 197                 boxes = calcs.boxes;
 198
 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);
 203         },
 204
 205         testStretch: function() {
 206             this.layout = buildLayout({
 207                 align: 'stretch'
 208             });
 209
 210             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 211                 boxes = calcs.boxes;
 212
 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);
 217
 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);
 222         },
 223
 224         testStretchMax: function() {
 225             this.layout = buildLayout({
 226                 align: 'stretchmax'
 227             });
 228
 229             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 230                 boxes = calcs.boxes;
 231
 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);
 236
 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);
 241         }
 242     }));
 243
 244     suite.add(new Y.Test.Case({
 245         name: 'packing',
 246
 247         setUp: function() {
 248             this.items = [
 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};}})
 253             ];
 254
 255             this.targetSize = {
 256                 height: 100,
 257                 width : 400
 258             };
 259         },
 260
 261         testPackStart: function() {
 262             this.layout = buildLayout({
 263                 pack: 'start'
 264             });
 265
 266             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 267                 boxes = calcs.boxes;
 268
 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);
 273         },
 274
 275         testPackCenter: function() {
 276             this.layout = buildLayout({
 277                 pack: 'center'
 278             });
 279
 280             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 281                 boxes = calcs.boxes;
 282
 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);
 287         },
 288
 289         testPackEnd: function() {
 290             this.layout = buildLayout({
 291                 pack: 'end'
 292             });
 293
 294             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 295                 boxes = calcs.boxes;
 296
 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);
 301         },
 302
 303         testWidthPropertyDominatesGetWidth: function() {
 304             var layout = buildLayout({
 305                 pack : 'start',
 306                 align: 'stretch'
 307             });
 308
 309             var items = [
 310                 {
 311                     title: 'Panel 1',
 312                     flex: 1,
 313                     html: 'flex : 1',
 314                     frame: true,
 315                     margins: {top: 0, left: 0, right: 0, bottom: 0},
 316                     getHeight: function() {return 10;},
 317                     getWidth: function() {return 10;}
 318                 }, {
 319                     title: 'Panel 2',
 320                     width: 100,
 321                     html: 'width : 100',
 322                     frame: true,
 323                     margins: {top: 0, left: 0, right: 0, bottom: 0},
 324                     getHeight: function() {return 10;},
 325
 326                     //NOTE: this should be ignored by HBox because we have a different configured width property
 327                     getWidth: function() {return 10;}
 328                 }, {
 329                     title: 'Panel 3',
 330                     flex: 2,
 331                     html: 'flex : 2',
 332                     frame: true,
 333                     margins: {top: 0, left: 0, right: 0, bottom: 0},
 334                     getHeight: function() {return 10;},
 335                     getWidth: function() {return 10;}
 336                 }
 337             ];
 338
 339             var targetSize = {
 340                 height: 630,
 341                 width : 1628
 342             };
 343
 344             var calcs = layout.calculateChildBoxes(items, targetSize),
 345                 boxes = calcs.boxes;
 346
 347             assert.areEqual(0, boxes[0].left);
 348             assert.areEqual(510, boxes[1].left);
 349             assert.areEqual(610, boxes[2].left);
 350         }
 351     }));
 352
 353     suite.add(new Y.Test.Case({
 354         name: 'meta data from calculated box sizes',
 355
 356         setUp: function() {
 357             this.layout = buildLayout();
 358
 359             this.items = [
 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})
 364             ];
 365
 366             this.targetSize = {
 367                 height: 100,
 368                 width : 400
 369             };
 370         },
 371
 372         testMaxHeight: function() {
 373             var calcs = this.layout.calculateChildBoxes(this.items, this.targetSize),
 374                 meta  = calcs.meta;
 375
 376             assert.areEqual(80, meta.maxHeight);
 377         }
 378     }));
 379
 380     suite.add(new Y.Test.Case({
 381         name: 'update innerCt size',
 382
 383         setUp: function() {
 384             this.layout = buildLayout({
 385                 align  : 'stretch',
 386                 padding: {
 387                     top   : 10,
 388                     bottom: 20,
 389                     left  : 0,
 390                     right : 0
 391                 }
 392             });
 393
 394             //fake the values that are calculated during onLayout
 395             this.layoutTargetLastSize = {
 396                 width : 400,
 397                 height: 100
 398             };
 399
 400             this.childBoxCache = {
 401                 meta: {
 402                     maxHeight: 150
 403                 }
 404             };
 405         },
 406
 407         testMaintainsHeightForAlignStretch: function() {
 408             var layout = this.layout,
 409                 width, height;
 410
 411             //a fake innerCt element that we can intercept calls to setSize on
 412             layout.innerCt = {
 413                 setSize: function(widthArg, heightArg) {
 414                     width  = widthArg;
 415                     height = heightArg;
 416                 }
 417             };
 418
 419             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
 420
 421             assert.areSame(400, width);
 422             assert.areSame(100, height);
 423         },
 424
 425         //if aligning middle, increase height to accomodate the tallest child
 426         testIncreasesHeightForAlignMiddle: function() {
 427             this.layout = buildLayout({
 428                 align  : 'middle',
 429                 padding: {
 430                     top   : 10,
 431                     bottom: 20,
 432                     left  : 0,
 433                     right : 0
 434                 }
 435             });
 436
 437             var layout = this.layout,
 438                 width, height;
 439
 440             //a fake innerCt element that we can intercept calls to setSize on
 441             layout.innerCt = {
 442                 setSize: function(widthArg, heightArg) {
 443                     width  = widthArg;
 444                     height = heightArg;
 445                 }
 446             };
 447
 448             layout.updateInnerCtSize(this.layoutTargetLastSize, this.childBoxCache);
 449
 450             assert.areSame(400, width);
 451             assert.areSame(180, height);
 452         }
 453     }));
 454 })();