Specs/Element/Element.Dimensions.js

   1 /*
   2 ---
   3 name: Element.Dimensions
   4 requires: ~
   5 provides: ~
   6 ...
   7 */
   8
   9 describe('Element.Dimensions', function(){
  10
  11         var div, relDiv, absDiv, scrollDiv, tallDiv;
  12
  13         beforeEach(function(){
  14                 div = new Element('div', {
  15                         id: 'ElementDimensionsTest',
  16                         styles: {
  17                                 width: 100,
  18                                 height: 100,
  19                                 margin: 2,
  20                                 padding: 3,
  21                                 border: '1px solid black',
  22                                 visibility: 'hidden',
  23                                 display: 'block',
  24                                 position: 'absolute',
  25                                 top: 100,
  26                                 left: 100,
  27                                 overflow: 'hidden',
  28                                 zIndex: 1
  29                         }
  30                 }).inject($(document.body));
  31
  32                 relDiv = new Element('div', {
  33                         styles: {
  34                                 width: 50,
  35                                 height: 50,
  36                                 margin: 5,
  37                                 padding: 5,
  38                                 border: '1px solid green',
  39                                 visibility: 'hidden',
  40                                 position: 'relative',
  41                                 overflow: 'hidden',
  42                                 'float': 'left',
  43                                 'display': 'inline'
  44                         }
  45                 }).inject(div);
  46
  47                 absDiv = new Element('div', {
  48                         styles: {
  49                                 width: 10,
  50                                 height: 10,
  51                                 margin: 5,
  52                                 padding: 5,
  53                                 border: '1px solid red',
  54                                 visibility: 'hidden',
  55                                 position: 'absolute',
  56                                 top: 10,
  57                                 left: 10,
  58                                 overflow: 'hidden'
  59                         }
  60                 }).inject(relDiv);
  61
  62                 scrollDiv = new Element('div', {
  63                         styles: {
  64                                 width: 100,
  65                                 height: 100,
  66                                 overflow: 'scroll',
  67                                 visibility: 'hidden',
  68                                 position: 'absolute',
  69                                 top: 0,
  70                                 left: 0
  71                         }
  72                 }).inject($(document.body));
  73
  74                 tallDiv = new Element('div', {
  75                         styles: {
  76                                 width: 200,
  77                                 height: 200,
  78                                 visibility: 'hidden'
  79                         }
  80                 }).inject(scrollDiv);
  81         });
  82
  83         describe('Element.getSize', function(){
  84
  85                 it('should measure the width and height of the element', function(){
  86                         expect(div.getSize().x).to.equal(108);
  87                         expect(div.getSize().y).to.equal(108);
  88                 });
  89
  90         });
  91
  92         describe("SVG dimensions", function(){
  93                 if (!document.addEventListener) return; // IE8- has no support for svg anyway, so this spec does not apply
  94                 var svgElements = [{
  95                         el: 'svg',
  96                         prop: {
  97                                 'xmlns': 'http://www.w3.org/2000/svg',
  98                                 height: '200px',
  99                                 width: '142px',
 100                                 viewBox: '0 0 512 512'
 101                         }
 102                 }, {
 103                         el: 'polygon',
 104                         prop: {
 105                                 fill: "#E44D26",
 106                                 points: "107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"
 107                         }
 108                 }, {
 109                         el: 'polygon',
 110                         prop: {
 111                                 fill: "#F16529",
 112                                 points: "256,480.523 376.03,447.246 404.27,130.894 256,130.894"
 113                         }
 114                 }, {
 115                         el: 'polygon',
 116                         prop: {
 117                                 fill: "#E44D26",
 118                                 points: "107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"
 119                         }
 120                 }, {
 121                         el: 'polygon',
 122                         prop: {
 123                                 fill: "#EBEBEB",
 124                                 points: "256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"
 125                         }
 126                 }, {
 127                         el: 'polygon',
 128                         prop: {
 129                                 fill: "#EBEBEB",
 130                                 points: "256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"
 131                         }
 132                 }, {
 133                         el: 'path',
 134                         prop: {
 135                                 d: "M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"
 136                         }
 137                 }, {
 138                         el: 'path',
 139                         prop: {
 140                                 d: "M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"
 141                         }
 142                 }, {
 143                         el: 'path',
 144                         prop: {
 145                                 d: "M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"
 146                         }
 147                 }, {
 148                         el: 'path',
 149                         prop: {
 150                                 d: "M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"
 151                         }
 152                 }, {
 153                         el: 'polygon',
 154                         prop: {
 155                                 fill: "#FFFFFF",
 156                                 points: "255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"
 157                         }
 158                 }, {
 159                         el: 'polygon',
 160                         prop: {
 161                                 fill: "#FFFFFF",
 162                                 points: "255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"
 163                         }
 164                 }];
 165
 166                 var svgContainer;
 167                 svgElements.each(function (e, i){
 168                         var thisElement = document.createElementNS('http://www.w3.org/2000/svg', e.el);
 169                         thisElement.setProperties(e.prop);
 170                         if (i == 0){
 171                                 svgContainer = thisElement
 172                                 $(document.body).adopt(thisElement);
 173                                 return
 174                         };
 175                         svgContainer.adopt(thisElement);
 176                 });
 177                 var svgElement = document.getElement('svg');
 178
 179                 it("should get the correct height and width of a svg element", function(){
 180                         expect(svgElement.getSize().y).to.equal(200);
 181                         expect(svgElement.getSize().x).to.equal(142);
 182                         svgElement.destroy();
 183                 });
 184         });
 185
 186         describe('Element.getPosition', function(){
 187
 188                 it('should measure the x and y position of the element', function(){
 189                         expect(div.getPosition()).to.deep.equal({x: 102, y: 102});
 190                 });
 191
 192                 it('should measure the x and y position of the element relative to another', function(){
 193                         expect(relDiv.getPosition(div)).to.deep.equal({x: 8, y: 8});
 194                 });
 195
 196                 it('should match subpixels if needed', function(){
 197                         var oddSizedDiv = new Element('div', {
 198                                 styles: {
 199                                         width: 51,
 200                                         height: 51,
 201                                         margin: 5,
 202                                         visibility: 'hidden',
 203                                         position: 'relative',
 204                                         overflow: 'hidden',
 205                                         'float': 'left'
 206                                 }
 207                         }).inject($(document.body));
 208
 209                         var insideOddSizedDiv = new Element('div', {
 210                                 styles: {
 211                                         width: 10,
 212                                         height: 10,
 213                                         margin: 5.5,
 214                                         visibility: 'hidden',
 215                                         overflow: 'hidden'
 216                                 }
 217                         }).inject(oddSizedDiv);
 218
 219                         expect(insideOddSizedDiv.getPosition(oddSizedDiv).x)
 220                                 .to.equal(insideOddSizedDiv.getBoundingClientRect().left - oddSizedDiv.getBoundingClientRect().left);
 221                 });
 222
 223         });
 224
 225         describe('Element.getCoordinates', function(){
 226
 227                 it('should return the coordinates relative to parent', function(){
 228                         expect(absDiv.getCoordinates(relDiv)).to.deep.equal({left:15, top:15, width:22, height:22, right:37, bottom:37});
 229                 });
 230
 231         });
 232
 233         describe('Element.getScrollSize', function(){
 234
 235                 it('should return the scrollSize', function(){
 236                         expect(scrollDiv.getScrollSize()).to.deep.equal({x:200, y:200});
 237                 });
 238
 239         });
 240
 241         describe('Element.scrollTo', function(){
 242
 243                 it('should scroll the element', function(){
 244                         expect(scrollDiv.scrollTo(20, 20).getScroll()).to.deep.equal({x:20, y:20});
 245                 });
 246
 247         });
 248
 249         afterEach(function(){
 250                 [div, relDiv, absDiv, scrollDiv, tallDiv].each(function(el){
 251                         $(el).destroy();
 252                 });
 253         });
 254
 255 });
 256
 257 describe('Element.getOffsetParent', function(){
 258
 259         var container, offsetParent, wrapper, child, table, td;
 260
 261         beforeEach(function(){
 262                 container = new Element('div');
 263
 264                 offsetParent = new Element('div', {
 265                         styles: {position: 'relative'}
 266                 }).inject(container);
 267
 268                 wrapper = new Element('div', {
 269                         styles: {height: 0}
 270                 }).inject(offsetParent);
 271
 272                 child = new Element('div').inject(wrapper);
 273
 274                 table = new Element('table').inject(offsetParent);
 275
 276                 td = new Element('td').inject(new Element('tr').inject(table));
 277
 278                 container.inject(document.body);
 279
 280         });
 281
 282         it('Should return the right offsetParent', function(){
 283
 284                 expect(child.getOffsetParent()).to.equal(offsetParent);
 285
 286         });
 287
 288         it('Should return body for elements with body as offsetParent', function(){
 289
 290                 expect(offsetParent.getOffsetParent()).to.equal(document.body);
 291
 292         });
 293
 294         it('Should return a table element for td-elements', function(){
 295
 296                 expect(td.getOffsetParent()).to.equal(table);
 297
 298         });
 299
 300         it('Should return a td element for elements with position:static inside a td', function(){
 301
 302                 child.inject(td);
 303
 304                 expect(child.getOffsetParent()).to.equal(td);
 305
 306         });
 307
 308         it('Should not return a td element for elements with a position other than static inside a td', function(){
 309
 310                 child.setStyle('position', 'absolute');
 311
 312                 expect(child.getOffsetParent()).to.equal(offsetParent);
 313
 314         });
 315
 316         it('Should return null for elements with position:fixed', function(){
 317
 318                 table.setStyle('position', 'fixed');
 319
 320                 expect(table.getOffsetParent()).to.equal(null);
 321
 322         });
 323
 324         it('Should return null for the body element', function(){
 325
 326                 expect($(document.body).getOffsetParent()).to.equal(null);
 327
 328         });
 329
 330         afterEach(function(){
 331                 container.destroy();
 332         });
 333
 334 });