4 scrollTopSupport = function() {
5 var support = win.scrollTop( 1 ).scrollTop() === 1;
7 scrollTopSupport = function() {
15 win.scrollTop( 0 ).scrollLeft( 0 );
19 TestHelpers.testJshint( "position" );
21 test( "my, at, of", function() {
24 $( "#elx" ).position({
30 deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "left top, left top" );
32 $( "#elx" ).position({
38 deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "left top, left bottom" );
40 $( "#elx" ).position({
46 deepEqual( $( "#elx" ).offset(), { top: 55, left: 50 }, "left, bottom" );
48 $( "#elx" ).position({
54 deepEqual( $( "#elx" ).offset(), { top: 45, left: 50 }, "left foo, bar baz" );
57 test( "multiple elements", function() {
60 var elements = $( "#el1, #el2" ),
61 result = elements.position({
67 expected = { top: 10, left: 4 };
69 deepEqual( result, elements );
70 elements.each(function() {
71 deepEqual( $( this ).offset(), expected );
75 test( "positions", function() {
85 start = { left: 4, top: 4 },
88 $.each( [ 0, 1 ], function( my ) {
89 $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
90 $.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
91 var _my = my ? horizontal + " " + vertical : "left top",
92 _at = !my ? horizontal + " " + vertical : "left top";
99 deepEqual( el.offset(), {
100 top: start.top + offsets[ vertical ] * (my ? -1 : 1),
101 left: start.left + offsets[ horizontal ] * (my ? -1 : 1)
102 }, "Position via " + QUnit.jsDump.parse({ my: _my, at: _at }) );
108 test( "of", function() {
109 expect( 9 + (scrollTopSupport() ? 1 : 0) );
113 $( "#elx" ).position({
119 deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "selector" );
121 $( "#elx" ).position({
127 deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "jQuery object" );
129 $( "#elx" ).position({
132 of: $( "#parentx" )[ 0 ],
135 deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "DOM element" );
137 $( "#elx" ).position({
143 deepEqual( $( "#elx" ).offset(), {
144 top: $( document ).height() - 10,
145 left: $( document ).width() - 10
148 $( "#elx" ).position({
154 deepEqual( $( "#elx" ).offset(), {
155 top: $( document ).height() - 10,
156 left: $( document ).width() - 10
157 }, "document as jQuery object" );
161 $( "#elx" ).position({
167 deepEqual( $( "#elx" ).offset(), {
168 top: win.height() - 10,
169 left: win.width() - 10
172 $( "#elx" ).position({
178 deepEqual( $( "#elx" ).offset(), {
179 top: win.height() - 10,
180 left: win.width() - 10
181 }, "window as jQuery object" );
183 if ( scrollTopSupport() ) {
184 win.scrollTop( 500 ).scrollLeft( 200 );
185 $( "#elx" ).position({
191 deepEqual( $( "#elx" ).offset(), {
192 top: win.height() + 500 - 10,
193 left: win.width() + 200 - 10
194 }, "window, scrolled" );
195 win.scrollTop( 0 ).scrollLeft( 0 );
198 event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
199 $( "#elx" ).position({
205 deepEqual( $( "#elx" ).offset(), {
208 }, "event - left top, left top" );
210 event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } );
211 $( "#elx" ).position({
217 deepEqual( $( "#elx" ).offset(), {
220 }, "event - left top, right bottom" );
223 test( "offsets", function() {
226 $( "#elx" ).position({
228 at: "left+10 bottom+10",
232 deepEqual( $( "#elx" ).offset(), { top: 70, left: 50 }, "offsets in at" );
234 $( "#elx" ).position({
235 my: "left+10 top-10",
240 deepEqual( $( "#elx" ).offset(), { top: 50, left: 50 }, "offsets in my" );
242 $( "#elx" ).position({
244 at: "left+50% bottom-10%",
248 deepEqual( $( "#elx" ).offset(), { top: 58, left: 50 }, "percentage offsets in at" );
250 $( "#elx" ).position({
251 my: "left-30% top+50%",
256 deepEqual( $( "#elx" ).offset(), { top: 65, left: 37 }, "percentage offsets in my" );
258 $( "#elx" ).position({
259 my: "left-30.001% top+50.0%",
264 deepEqual( $( "#elx" ).offset(), { top: 65, left: 37 }, "decimal percentage offsets in my" );
266 $( "#elx" ).position({
267 my: "left+10.4 top-10.6",
272 deepEqual( $( "#elx" ).offset(), { top: 49, left: 50 }, "decimal offsets in my" );
274 $( "#elx" ).position({
275 my: "left+right top-left",
276 at: "left-top bottom-bottom",
280 deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "invalid offsets" );
283 test( "using", function() {
287 elems = $( "#el1, #el2" ),
288 of = $( "#parentx" ),
289 expectedPosition = { top: 60, left: 60 },
306 important: "vertical"
308 originalPosition = elems.position({
317 at: "center+10 bottom",
319 using: function( position, feedback ) {
320 deepEqual( this, elems[ count ], "correct context for call #" + count );
321 deepEqual( position, expectedPosition, "correct position for call #" + count );
322 deepEqual( feedback.element.element[ 0 ], elems[ count ] );
323 delete feedback.element.element;
324 deepEqual( feedback, expectedFeedback );
329 elems.each(function() {
330 deepEqual( $( this ).offset(), originalPosition, "elements not moved" );
334 function collisionTest( config, result, msg ) {
335 var elem = $( "#elx" ).position( $.extend({
340 deepEqual( elem.offset(), result, msg );
343 function collisionTest2( config, result, msg ) {
344 collisionTest( $.extend({
347 }, config ), result, msg );
350 test( "collision: fit, no collision", function() {
362 at: "right+2 bottom+3"
369 // Currently failing in IE8 due to the iframe used by TestSwarm
370 if ( !/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ) ) {
371 test( "collision: fit, collision", function() {
372 expect( 2 + (scrollTopSupport() ? 1 : 0) );
389 if ( scrollTopSupport() ) {
390 win.scrollTop( 300 ).scrollLeft( 200 );
396 }, "window scrolled" );
398 win.scrollTop( 0 ).scrollLeft( 0 );
403 test( "collision: flip, no collision", function() {
415 at: "right+2 bottom+3"
422 test( "collision: flip, collision", function() {
441 test( "collision: flipfit, no collision", function() {
452 collision: "flipfit",
453 at: "right+2 bottom+3"
460 test( "collision: flipfit, collision", function() {
471 collision: "flipfit",
479 test( "collision: none, no collision", function() {
491 at: "right+2 bottom+3"
498 test( "collision: none, collision", function() {
517 test( "collision: fit, with margin", function() {
540 test( "collision: flip, with margin", function() {
571 test( "within", function() {
580 }, "fit - right bottom" );
588 }, "fit - left top" );
596 }, "flip - right bottom" );
604 }, "flip - left top" );
612 }, "flipfit - right bottom" );
620 }, "flipfit - left top" );
623 test( "with scrollbars", function() {
626 $( "#scrollx" ).css({
642 $( "#scrollx" ).css({
646 var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );
653 top: 90 - scrollbarInfo.height,
654 left: 90 - scrollbarInfo.width
657 $( "#scrollx" ).css({
668 }, "auto, no scroll" );
670 $( "#scrollx" ).css({
672 }).append( $("<div>").height(300).width(300) );
679 top: 90 - scrollbarInfo.height,
680 left: 90 - scrollbarInfo.width
681 }, "auto, with scroll" );
684 test( "fractions", function() {
687 $( "#fractions-element" ).position({
690 of: "#fractions-parent",
693 deepEqual( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" );
696 test( "bug #5280: consistent results (avoid fractional values)", function() {
699 var wrapper = $( "#bug-5280" ),
700 elem = wrapper.children(),
701 offset1 = elem.position({
707 offset2 = elem.position({
713 deepEqual( offset1, offset2 );