3 testoffset("absolute", function( jQuery ) {
6 { id: '#absolute-1', top: 1, left: 1 },
7 { id: '#absolute-1-1', top: 5, left: 5 },
8 { id: '#absolute-1-1-1', top: 9, left: 9 },
9 { id: '#absolute-2', top: 20, left: 20 }
11 jQuery.each( tests, function() {
12 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset().top" );
13 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset().left" );
19 { id: '#absolute-1', top: 0, left: 0 },
20 { id: '#absolute-1-1', top: 1, left: 1 },
21 { id: '#absolute-1-1-1', top: 1, left: 1 },
22 { id: '#absolute-2', top: 19, left: 19 }
24 jQuery.each( tests, function() {
25 equals( jQuery( this.id ).position().top, this.top, "jQuery('" + this.id + "').position().top" );
26 equals( jQuery( this.id ).position().left, this.left, "jQuery('" + this.id + "').position().left" );
32 { id: '#absolute-2', top: 30, left: 30 },
33 { id: '#absolute-2', top: 10, left: 10 },
34 { id: '#absolute-2', top: -1, left: -1 },
35 { id: '#absolute-2', top: 19, left: 19 },
36 { id: '#absolute-1-1-1', top: 15, left: 15 },
37 { id: '#absolute-1-1-1', top: 5, left: 5 },
38 { id: '#absolute-1-1-1', top: -1, left: -1 },
39 { id: '#absolute-1-1-1', top: 9, left: 9 },
40 { id: '#absolute-1-1', top: 10, left: 10 },
41 { id: '#absolute-1-1', top: 0, left: 0 },
42 { id: '#absolute-1-1', top: -1, left: -1 },
43 { id: '#absolute-1-1', top: 5, left: 5 },
44 { id: '#absolute-1', top: 2, left: 2 },
45 { id: '#absolute-1', top: 0, left: 0 },
46 { id: '#absolute-1', top: -1, left: -1 },
47 { id: '#absolute-1', top: 1, left: 1 }
49 jQuery.each( tests, function() {
50 jQuery( this.id ).offset({ top: this.top, left: this.left });
51 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset({ top: " + this.top + " })" );
52 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset({ left: " + this.left + " })" );
54 jQuery( this.id ).offset({ top: this.top, left: this.left, using: function( props ) {
60 equals( jQuery( this.id ).offset().top, this.top + 1, "jQuery('" + this.id + "').offset({ top: " + (this.top + 1) + ", using: fn })" );
61 equals( jQuery( this.id ).offset().left, this.left + 1, "jQuery('" + this.id + "').offset({ left: " + (this.left + 1) + ", using: fn })" );
65 testoffset("relative", function( jQuery ) {
66 // IE is collapsing the top margin of 1px
67 var ie = jQuery.browser.msie && parseInt( jQuery.browser.version ) < 8;
71 { id: '#relative-1', top: ie ? 6 : 7, left: 7 },
72 { id: '#relative-1-1', top: ie ? 13 : 15, left: 15 },
73 { id: '#relative-2', top: ie ? 141 : 142, left: 27 }
75 jQuery.each( tests, function() {
76 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset().top" );
77 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset().left" );
83 { id: '#relative-1', top: ie ? 5 : 6, left: 6 },
84 { id: '#relative-1-1', top: ie ? 4 : 5, left: 5 },
85 { id: '#relative-2', top: ie ? 140 : 141, left: 26 }
87 jQuery.each( tests, function() {
88 equals( jQuery( this.id ).position().top, this.top, "jQuery('" + this.id + "').position().top" );
89 equals( jQuery( this.id ).position().left, this.left, "jQuery('" + this.id + "').position().left" );
95 { id: '#relative-2', top: 200, left: 50 },
96 { id: '#relative-2', top: 100, left: 10 },
97 { id: '#relative-2', top: -5, left: -5 },
98 { id: '#relative-2', top: 142, left: 27 },
99 { id: '#relative-1-1', top: 100, left: 100 },
100 { id: '#relative-1-1', top: 5, left: 5 },
101 { id: '#relative-1-1', top: -1, left: -1 },
102 { id: '#relative-1-1', top: 15, left: 15 },
103 { id: '#relative-1', top: 100, left: 100 },
104 { id: '#relative-1', top: 0, left: 0 },
105 { id: '#relative-1', top: -1, left: -1 },
106 { id: '#relative-1', top: 7, left: 7 }
108 jQuery.each( tests, function() {
109 jQuery( this.id ).offset({ top: this.top, left: this.left });
110 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset({ top: " + this.top + " })" );
111 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset({ left: " + this.left + " })" );
113 jQuery( this.id ).offset({ top: this.top, left: this.left, using: function( props ) {
119 equals( jQuery( this.id ).offset().top, this.top + 1, "jQuery('" + this.id + "').offset({ top: " + (this.top + 1) + ", using: fn })" );
120 equals( jQuery( this.id ).offset().left, this.left + 1, "jQuery('" + this.id + "').offset({ left: " + (this.left + 1) + ", using: fn })" );
124 testoffset("static", function( jQuery ) {
125 // IE is collapsing the top margin of 1px
126 var ie = jQuery.browser.msie && parseInt( jQuery.browser.version ) < 8;
130 { id: '#static-1', top: ie ? 6 : 7, left: 7 },
131 { id: '#static-1-1', top: ie ? 13 : 15, left: 15 },
132 { id: '#static-1-1-1', top: ie ? 20 : 23, left: 23 },
133 { id: '#static-2', top: ie ? 121 : 122, left: 7 }
135 jQuery.each( tests, function() {
136 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset().top" );
137 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset().left" );
143 { id: '#static-1', top: ie ? 5 : 6, left: 6 },
144 { id: '#static-1-1', top: ie ? 12 : 14, left: 14 },
145 { id: '#static-1-1-1', top: ie ? 19 : 22, left: 22 },
146 { id: '#static-2', top: ie ? 120 : 121, left: 6 }
148 jQuery.each( tests, function() {
149 equals( jQuery( this.id ).position().top, this.top, "jQuery('" + this.top + "').position().top" );
150 equals( jQuery( this.id ).position().left, this.left, "jQuery('" + this.left +"').position().left" );
156 { id: '#static-2', top: 200, left: 200 },
157 { id: '#static-2', top: 100, left: 100 },
158 { id: '#static-2', top: -2, left: -2 },
159 { id: '#static-2', top: 121, left: 6 },
160 { id: '#static-1-1-1', top: 50, left: 50 },
161 { id: '#static-1-1-1', top: 10, left: 10 },
162 { id: '#static-1-1-1', top: -1, left: -1 },
163 { id: '#static-1-1-1', top: 22, left: 22 },
164 { id: '#static-1-1', top: 25, left: 25 },
165 { id: '#static-1-1', top: 10, left: 10 },
166 { id: '#static-1-1', top: -3, left: -3 },
167 { id: '#static-1-1', top: 14, left: 14 },
168 { id: '#static-1', top: 30, left: 30 },
169 { id: '#static-1', top: 2, left: 2 },
170 { id: '#static-1', top: -2, left: -2 },
171 { id: '#static-1', top: 7, left: 7 }
173 jQuery.each( tests, function() {
174 jQuery( this.id ).offset({ top: this.top, left: this.left });
175 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset({ top: " + this.top + " })" );
176 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset({ left: " + this.left + " })" );
178 jQuery( this.id ).offset({ top: this.top, left: this.left, using: function( props ) {
184 equals( jQuery( this.id ).offset().top, this.top + 1, "jQuery('" + this.id + "').offset({ top: " + (this.top + 1) + ", using: fn })" );
185 equals( jQuery( this.id ).offset().left, this.left + 1, "jQuery('" + this.id + "').offset({ left: " + (this.left + 1) + ", using: fn })" );
189 testoffset("fixed", function( jQuery ) {
190 jQuery.offset.initialize();
193 { id: '#fixed-1', top: 1001, left: 1001 },
194 { id: '#fixed-2', top: 1021, left: 1021 }
196 jQuery.each( tests, function() {
197 if ( jQuery.offset.supportsFixedPosition ) {
198 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset().top" );
199 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset().left" );
201 // need to have same number of assertions
202 ok( true, 'Fixed position is not supported' );
203 ok( true, 'Fixed position is not supported' );
208 { id: '#fixed-1', top: 100, left: 100 },
209 { id: '#fixed-1', top: 0, left: 0 },
210 { id: '#fixed-1', top: -4, left: -4 },
211 { id: '#fixed-2', top: 200, left: 200 },
212 { id: '#fixed-2', top: 0, left: 0 },
213 { id: '#fixed-2', top: -5, left: -5 }
216 jQuery.each( tests, function() {
217 if ( jQuery.offset.supportsFixedPosition ) {
218 jQuery( this.id ).offset({ top: this.top, left: this.left });
219 equals( jQuery( this.id ).offset().top, this.top, "jQuery('" + this.id + "').offset({ top: " + this.top + " })" );
220 equals( jQuery( this.id ).offset().left, this.left, "jQuery('" + this.id + "').offset({ left: " + this.left + " })" );
222 jQuery( this.id ).offset({ top: this.top, left: this.left, using: function( props ) {
228 equals( jQuery( this.id ).offset().top, this.top + 1, "jQuery('" + this.id + "').offset({ top: " + (this.top + 1) + ", using: fn })" );
229 equals( jQuery( this.id ).offset().left, this.left + 1, "jQuery('" + this.id + "').offset({ left: " + (this.left + 1) + ", using: fn })" );
231 // need to have same number of assertions
232 ok( true, 'Fixed position is not supported' );
233 ok( true, 'Fixed position is not supported' );
234 ok( true, 'Fixed position is not supported' );
235 ok( true, 'Fixed position is not supported' );
240 testoffset("table", function( jQuery ) {
241 var ie = jQuery.browser.msie;
243 equals( jQuery('#table-1').offset().top, 6, "jQuery('#table-1').offset().top" );
244 equals( jQuery('#table-1').offset().left, 6, "jQuery('#table-1').offset().left" );
246 equals( jQuery('#th-1').offset().top, 10, "jQuery('#th-1').offset().top" );
247 equals( jQuery('#th-1').offset().left, 10, "jQuery('#th-1').offset().left" );
249 // equals( jQuery('#th-2').offset().top, 10, "jQuery('#th-2').offset().top" );
250 // equals( jQuery('#th-2').offset().left, 116, "jQuery('#th-2').offset().left" );
252 // equals( jQuery('#th-3').offset().top, 10, "jQuery('#th-3').offset().top" );
253 // equals( jQuery('#th-3').offset().left, 222, "jQuery('#th-3').offset().left" );
255 // equals( jQuery('#td-1').offset().top, ie ? 116 : 112, "jQuery('#td-1').offset().top" );
256 // equals( jQuery('#td-1').offset().left, 10, "jQuery('#td-1').offset().left" );
258 // equals( jQuery('#td-2').offset().top, ie ? 116 : 112, "jQuery('#td-2').offset().top" );
259 // equals( jQuery('#td-2').offset().left, 116, "jQuery('#td-2').offset().left" );
261 // equals( jQuery('#td-3').offset().top, ie ? 116 : 112, "jQuery('#td-3').offset().top" );
262 // equals( jQuery('#td-3').offset().left, 222, "jQuery('#td-3').offset().left" );
265 testoffset("scroll", function( jQuery, win ) {
266 var ie = jQuery.browser.msie && parseInt( jQuery.browser.version ) < 8;
268 // IE is collapsing the top margin of 1px
269 equals( jQuery('#scroll-1').offset().top, ie ? 6 : 7, "jQuery('#scroll-1').offset().top" );
270 equals( jQuery('#scroll-1').offset().left, 7, "jQuery('#scroll-1').offset().left" );
272 // IE is collapsing the top margin of 1px
273 equals( jQuery('#scroll-1-1').offset().top, ie ? 9 : 11, "jQuery('#scroll-1-1').offset().top" );
274 equals( jQuery('#scroll-1-1').offset().left, 11, "jQuery('#scroll-1-1').offset().left" );
277 // scroll offset tests .scrollTop/Left
278 equals( jQuery('#scroll-1').scrollTop(), 5, "jQuery('#scroll-1').scrollTop()" );
279 equals( jQuery('#scroll-1').scrollLeft(), 5, "jQuery('#scroll-1').scrollLeft()" );
281 equals( jQuery('#scroll-1-1').scrollTop(), 0, "jQuery('#scroll-1-1').scrollTop()" );
282 equals( jQuery('#scroll-1-1').scrollLeft(), 0, "jQuery('#scroll-1-1').scrollLeft()" );
284 // equals( jQuery('body').scrollTop(), 0, "jQuery('body').scrollTop()" );
285 // equals( jQuery('body').scrollLeft(), 0, "jQuery('body').scrollTop()" );
289 equals( jQuery(win).scrollTop(), 1000, "jQuery(window).scrollTop()" );
290 equals( jQuery(win).scrollLeft(), 1000, "jQuery(window).scrollLeft()" );
292 equals( jQuery(win.document).scrollTop(), 1000, "jQuery(document).scrollTop()" );
293 equals( jQuery(win.document).scrollLeft(), 1000, "jQuery(document).scrollLeft()" );
296 testoffset("body", function( jQuery ) {
297 equals( jQuery('body').offset().top, 1, "jQuery('#body').offset().top" );
298 equals( jQuery('body').offset().left, 1, "jQuery('#body').offset().left" );
301 test("offsetParent", function(){
304 var body = jQuery("body").offsetParent();
305 equals( body.length, 1, "Only one offsetParent found." );
306 equals( body[0], document.body, "The body is its own offsetParent." );
308 var header = jQuery("#qunit-header").offsetParent();
309 equals( header.length, 1, "Only one offsetParent found." );
310 equals( header[0], document.body, "The body is the offsetParent." );
312 var div = jQuery("#nothiddendivchild").offsetParent();
313 equals( div.length, 1, "Only one offsetParent found." );
314 equals( div[0], document.body, "The body is the offsetParent." );
316 jQuery("#nothiddendiv").css("position", "relative");
318 div = jQuery("#nothiddendivchild").offsetParent();
319 equals( div.length, 1, "Only one offsetParent found." );
320 equals( div[0], jQuery("#nothiddendiv")[0], "The div is the offsetParent." );
322 div = jQuery("body, #nothiddendivchild").offsetParent();
323 equals( div.length, 2, "Two offsetParent found." );
324 equals( div[0], document.body, "The body is the offsetParent." );
325 equals( div[1], jQuery("#nothiddendiv")[0], "The div is the offsetParent." );
328 function testoffset(name, fn) {
330 test(name, function() {
331 // pause execution for now
334 // load fixture in iframe
335 var iframe = loadFixture(),
336 win = iframe.contentWindow,
337 interval = setInterval( function() {
338 if ( win && win.jQuery && win.jQuery.isReady ) {
339 clearInterval( interval );
342 // call actual tests passing the correct jQuery isntance to use
343 fn.call( this, win.jQuery, win );
344 document.body.removeChild( iframe );
350 function loadFixture() {
351 var src = './data/offset/' + name + '.html?' + parseInt( Math.random()*1000 ),
352 iframe = jQuery('<iframe />').css({
353 width: 500, height: 500, position: 'absolute', top: -600, left: -600, visiblity: 'hidden'
354 }).appendTo('body')[0];
355 iframe.contentWindow.location = src;