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).toEqual(108);
  87                         expect(div.getSize().y).toEqual(108);
  88                 });
  89
  90         });
  91
  92         describe('Element.getPosition', function(){
  93
  94                 it('should measure the x and y position of the element', function(){
  95                         expect(div.getPosition()).toEqual({x: 102, y: 102});
  96                 });
  97
  98                 it('should measure the x and y position of the element relative to another', function(){
  99                         expect(relDiv.getPosition(div)).toEqual({x: 8, y: 8});
 100                 });
 101
 102         });
 103
 104         describe('Element.getCoordinates', function(){
 105
 106                 it('should return the coordinates relative to parent', function(){
 107                         expect(absDiv.getCoordinates(relDiv)).toEqual({left:15, top:15, width:22, height:22, right:37, bottom:37});
 108                 });
 109
 110         });
 111
 112         describe('Element.getScrollSize', function(){
 113
 114                 it('should return the scrollSize', function(){
 115                         expect(scrollDiv.getScrollSize()).toEqual({x:200, y:200});
 116                 });
 117
 118         });
 119
 120         describe('Element.scrollTo', function(){
 121
 122                 it('should scroll the element', function(){
 123                         expect(scrollDiv.scrollTo(20, 20).getScroll()).toEqual({x:20, y:20});
 124                 });
 125
 126         });
 127
 128         afterEach(function(){
 129                 [div, relDiv, absDiv, scrollDiv, tallDiv].each(function(el){
 130                         $(el).destroy();
 131                 });
 132         });
 133
 134 });
 135
 136 describe('Element.getOffsetParent', function(){
 137
 138         var container, offsetParent, wrapper, child, table, td;
 139
 140         beforeEach(function(){
 141                 container = new Element('div');
 142
 143                 offsetParent = new Element('div', {
 144                         styles: {position: 'relative'}
 145                 }).inject(container);
 146
 147                 wrapper = new Element('div', {
 148                         styles: {height: 0}
 149                 }).inject(offsetParent);
 150
 151                 child = new Element('div').inject(wrapper);
 152
 153                 table = new Element('table').inject(offsetParent);
 154
 155                 td = new Element('td').inject(new Element('tr').inject(table));
 156
 157                 container.inject(document.body);
 158
 159         });
 160
 161         it('Should return the right offsetParent', function(){
 162
 163                 expect(child.getOffsetParent()).toEqual(offsetParent);
 164
 165         });
 166
 167         it('Should return body for elements with body as offsetParent', function(){
 168
 169                 expect(offsetParent.getOffsetParent()).toEqual(document.body);
 170
 171         });
 172
 173         it('Should return a table element for td-elements', function(){
 174
 175                 expect(td.getOffsetParent()).toEqual(table);
 176
 177         });
 178
 179         it('Should return a td element for elements with position:static inside a td', function(){
 180
 181                 child.inject(td);
 182
 183                 expect(child.getOffsetParent()).toEqual(td);
 184
 185         });
 186
 187         it('Should not return a td element for elements with a position other than static inside a td', function(){
 188
 189                 child.setStyle('position', 'absolute');
 190
 191                 expect(child.getOffsetParent()).toEqual(offsetParent);
 192
 193         });
 194
 195         it('Should return null for elements with position:fixed', function(){
 196
 197                 table.setStyle('position', 'fixed');
 198
 199                 expect(table.getOffsetParent()).toBeNull();
 200
 201         });
 202
 203         it('Should return null for the body element', function(){
 204
 205                 expect($(document.body).getOffsetParent()).toBeNull();
 206
 207         });
 208
 209         afterEach(function(){
 210                 container.destroy();
 211         });
 212
 213 });