3 name: Element.Dimensions
9 describe('Element.Dimensions', function(){
11 var div, relDiv, absDiv, scrollDiv, tallDiv;
13 beforeEach(function(){
14 div = new Element('div', {
15 id: 'ElementDimensionsTest',
21 border: '1px solid black',
30 }).inject($(document.body));
32 relDiv = new Element('div', {
38 border: '1px solid green',
47 absDiv = new Element('div', {
53 border: '1px solid red',
62 scrollDiv = new Element('div', {
72 }).inject($(document.body));
74 tallDiv = new Element('div', {
83 describe('Element.getSize', function(){
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);
92 describe("SVG dimensions", function(){
93 if (!document.addEventListener) return; // IE8- has no support for svg anyway, so this spec does not apply
97 'xmlns': 'http://www.w3.org/2000/svg',
100 viewBox: '0 0 512 512'
106 points: "107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"
112 points: "256,480.523 376.03,447.246 404.27,130.894 256,130.894"
118 points: "107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"
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"
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"
135 d: "M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"
140 d: "M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"
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"
150 d: "M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"
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"
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"
167 svgElements.each(function (e, i){
168 var thisElement = document.createElementNS('http://www.w3.org/2000/svg', e.el);
169 thisElement.setProperties(e.prop);
171 svgContainer = thisElement
172 $(document.body).adopt(thisElement);
175 svgContainer.adopt(thisElement);
177 var svgElement = document.getElement('svg');
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();
186 describe('Element.getPosition', function(){
188 it('should measure the x and y position of the element', function(){
189 expect(div.getPosition()).to.eql({x: 102, y: 102});
192 it('should measure the x and y position of the element relative to another', function(){
193 expect(relDiv.getPosition(div)).to.eql({x: 8, y: 8});
196 it('should match subpixels if needed', function(){
197 var oddSizedDiv = new Element('div', {
202 visibility: 'hidden',
203 position: 'relative',
207 }).inject($(document.body));
209 var insideOddSizedDiv = new Element('div', {
214 visibility: 'hidden',
217 }).inject(oddSizedDiv);
219 expect(insideOddSizedDiv.getPosition(oddSizedDiv).x)
220 .to.equal(insideOddSizedDiv.getBoundingClientRect().left - oddSizedDiv.getBoundingClientRect().left);
225 describe('Element.getCoordinates', function(){
227 it('should return the coordinates relative to parent', function(){
228 expect(absDiv.getCoordinates(relDiv)).to.eql({left:15, top:15, width:22, height:22, right:37, bottom:37});
233 describe('Element.getScrollSize', function(){
235 it('should return the scrollSize', function(){
236 expect(scrollDiv.getScrollSize()).to.eql({x:200, y:200});
241 describe('Element.scrollTo', function(){
243 it('should scroll the element', function(){
244 expect(scrollDiv.scrollTo(20, 20).getScroll()).to.eql({x:20, y:20});
249 afterEach(function(){
250 [div, relDiv, absDiv, scrollDiv, tallDiv].each(function(el){
257 describe('Element.getOffsetParent', function(){
259 var container, offsetParent, wrapper, child, table, td;
261 beforeEach(function(){
262 container = new Element('div');
264 offsetParent = new Element('div', {
265 styles: {position: 'relative'}
266 }).inject(container);
268 wrapper = new Element('div', {
270 }).inject(offsetParent);
272 child = new Element('div').inject(wrapper);
274 table = new Element('table').inject(offsetParent);
276 td = new Element('td').inject(new Element('tr').inject(table));
278 container.inject(document.body);
282 it('Should return the right offsetParent', function(){
284 expect(child.getOffsetParent()).to.equal(offsetParent);
288 it('Should return body for elements with body as offsetParent', function(){
290 expect(offsetParent.getOffsetParent()).to.equal(document.body);
294 it('Should return a table element for td-elements', function(){
296 expect(td.getOffsetParent()).to.equal(table);
300 it('Should return a td element for elements with position:static inside a td', function(){
304 expect(child.getOffsetParent()).to.equal(td);
308 it('Should not return a td element for elements with a position other than static inside a td', function(){
310 child.setStyle('position', 'absolute');
312 expect(child.getOffsetParent()).to.equal(offsetParent);
316 it('Should return null for elements with position:fixed', function(){
318 table.setStyle('position', 'fixed');
320 expect(table.getOffsetParent()).to.equal(null);
324 it('Should return null for the body element', function(){
326 expect($(document.body).getOffsetParent()).to.equal(null);
330 afterEach(function(){