From b093b6f6f74e20f37689cc9a9447e2f2ae75c2f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Mon, 23 Apr 2012 15:52:06 -0400 Subject: [PATCH] Position tests: Simplify logic and reduce tests. --- tests/unit/position/position.html | 24 +- tests/unit/position/position_core.js | 403 +++++++------- tests/unit/position/position_core_within.js | 540 ------------------- tests/unit/position/position_deprecated.html | 25 +- 4 files changed, 227 insertions(+), 765 deletions(-) delete mode 100644 tests/unit/position/position_core_within.js diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 396e3e13e..518e1f960 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -19,7 +19,6 @@ - @@ -39,21 +38,20 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6 -->
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
+
-
-
-
+
+
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 5c86e7887..7a9a35132 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,13 +1,24 @@ (function( $ ) { -function scrollTopSupport() { - $( window ).scrollTop( 1 ); - return $( window ).scrollTop() === 1; -} +var win = $( window ), + scrollTopSupport = function() { + var support = win.scrollTop( 1 ).scrollTop() === 1; + win.scrollTop( 0 ); + scrollTopSupport = function() { + return support; + }; + return support; + }; -module( "position" ); +module( "position", { + setup: function() { + win.scrollTop( 0 ).scrollLeft( 0 ); + } +}); test( "my, at, of", function() { + expect( 4 ); + $( "#elx" ).position({ my: "left top", at: "left top", @@ -42,6 +53,8 @@ test( "my, at, of", function() { }); test( "multiple elements", function() { + expect( 3 ); + var elements = $( "#el1, #el2" ), result = elements.position({ my: "left top", @@ -58,8 +71,9 @@ test( "multiple elements", function() { }); test( "positions", function() { - var definitions = [], - offsets = { + expect( 18 ); + + var offsets = { left: 0, center: 3, right: 6, @@ -68,33 +82,32 @@ test( "positions", function() { }, start = { left: 4, top: 4 }, el = $( "#el1" ); + $.each( [ 0, 1 ], function( my ) { $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) { $.each( [ "left", "center", "right" ], function( hindex, horizontal ) { - definitions.push({ - my: my ? horizontal + " " + vertical : "left top", - at: !my ? horizontal + " " + vertical : "left top", - result: { - top: my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ], - left: my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ] - } + var _my = my ? horizontal + " " + vertical : "left top", + _at = !my ? horizontal + " " + vertical : "left top"; + el.position({ + my: _my, + at: _at, + of: "#parent", + collision: "none" }); + deepEqual( el.offset(), { + top: start.top + offsets[ vertical ] * (my ? -1 : 1), + left: start.left + offsets[ horizontal ] * (my ? -1 : 1) + }, "Position via " + QUnit.jsDump.parse({ my: _my, at: _at }) ); }); }); }); - $.each( definitions, function( index, definition ) { - el.position({ - my: definition.my, - at: definition.at, - of: "#parent", - collision: "none" - }); - deepEqual( el.offset(), definition.result, - "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); - }); }); test( "of", function() { + expect( 9 + (scrollTopSupport() ? 1 : 0) ); + + var event; + $( "#elx" ).position({ my: "left top", at: "left top", @@ -141,7 +154,7 @@ test( "of", function() { left: $( document ).width() - 10 }, "document as jQuery object" ); - $( window ).scrollTop( 0 ); + win.scrollTop( 0 ); $( "#elx" ).position({ my: "right bottom", @@ -150,23 +163,23 @@ test( "of", function() { collision: "none" }); deepEqual( $( "#elx" ).offset(), { - top: $( window ).height() - 10, - left: $( window ).width() - 10 + top: win.height() - 10, + left: win.width() - 10 }, "window" ); $( "#elx" ).position({ my: "right bottom", at: "right bottom", - of: $( window ), + of: win, collision: "none" }); deepEqual( $( "#elx" ).offset(), { - top: $( window ).height() - 10, - left: $( window ).width() - 10 + top: win.height() - 10, + left: win.width() - 10 }, "window as jQuery object" ); if ( scrollTopSupport() ) { - $( window ).scrollTop( 500 ).scrollLeft( 200 ); + win.scrollTop( 500 ).scrollLeft( 200 ); $( "#elx" ).position({ my: "right bottom", at: "right bottom", @@ -174,13 +187,13 @@ test( "of", function() { collision: "none" }); deepEqual( $( "#elx" ).offset(), { - top: $( window ).height() + 500 - 10, - left: $( window ).width() + 200 - 10 + top: win.height() + 500 - 10, + left: win.width() + 200 - 10 }, "window, scrolled" ); - $( window ).scrollTop( 0 ).scrollLeft( 0 ); + win.scrollTop( 0 ).scrollLeft( 0 ); } - var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); $( "#elx" ).position({ my: "left top", at: "left top", @@ -206,6 +219,8 @@ test( "of", function() { }); test( "offsets", function() { + expect( 4 ); + $( "#elx" ).position({ my: "left top", at: "left+10 bottom+10", @@ -272,7 +287,7 @@ function collisionTest( config, result, msg ) { var elem = $( "#elx" ).position( $.extend({ my: "left top", at: "right bottom", - of: window + of: "#parent" }, config ) ); deepEqual( elem.offset(), result, msg ); } @@ -284,239 +299,225 @@ function collisionTest2( config, result, msg ) { }, config ), result, msg ); } -test( "collision: fit, no offset", function() { +test( "collision: fit, no collision", function() { + expect( 2 ); + collisionTest({ collision: "fit" - }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" ); + }, { + top: 10, + left: 10 + }, "no offset" ); + + collisionTest({ + collition: "fit", + at: "right+2 bottom+3" + }, { + top: 13, + left: 12 + }, "with offset" ); +}); + +test( "collision: fit, collision", function() { + expect( 2 + (scrollTopSupport() ? 1 : 0) ); collisionTest2({ collision: "fit" - }, { top: 0, left: 0 }, "left top" ); -}); - -test( "collision: fit, with offset", function() { - collisionTest({ - collision: "fit", - at: "right+2 bottom+3" - }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom"); + }, { + top: 0, + left: 0 + }, "no offset" ); collisionTest2({ collision: "fit", at: "left+2 top+3" - }, { top: 0, left: 0 }, "left top, positive offset" ); + }, { + top: 0, + left: 0 + }, "with offset" ); - collisionTest2({ - collision: "fit", - at: "left-2 top-3" - }, { top: 0, left: 0 }, "left top, negative offset" ); -}); - -test( "collision: fit, window scrolled", function() { if ( scrollTopSupport() ) { - var win = $( window ); win.scrollTop( 300 ).scrollLeft( 200 ); - collisionTest({ - collision: "fit", - at: "left-100 top-100" - }, { top: 300, left: 200 }, "top left" ); - collisionTest2({ - collision: "fit", - at: "right+100 bottom+100" - }, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" ); + collision: "fit" + }, { + top: 300, + left: 200 + }, "window scrolled" ); win.scrollTop( 0 ).scrollLeft( 0 ); } }); -test( "collision: flip, no offset", function() { +test( "collision: flip, no collision", function() { + expect( 2 ); + collisionTest({ collision: "flip" - }, { top: $( window ).height(), left: $( window ).width() }, "left top" ); + }, { + top: 10, + left: 10 + }, "no offset" ); - collisionTest2({ - collision: "flip" - }, { top: -10, left: -10 }, "right bottom" ); -}); - -test( "collision: flip, with offset", function() { collisionTest({ collision: "flip", at: "right+2 bottom+3" - }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "left top, with offset added" ); + }, { + top: 13, + left: 12 + }, "with offset" ); +}); + +test( "collision: flip, collision", function() { + expect( 2 ); + + collisionTest2({ + collision: "flip" + }, { + top: 10, + left: 10 + }, "no offset" ); collisionTest2({ collision: "flip", at: "left+2 top+3" - }, { top: -7, left: -8 }, "bottom, positive offset" ); - - collisionTest2({ - collision: "flip", - at: "left-2 top-3" - }, { top: -13, left: -12 }, "right bottom, negative offset" ); + }, { + top: 7, + left: 8 + }, "with offset" ); }); -test( "collision: none, no offset", function() { +test( "collision: none, no collision", function() { + expect( 2 ); + collisionTest({ collision: "none" - }, { top: $( window ).height(), left: $( window ).width() }, "left top" ); + }, { + top: 10, + left: 10 + }, "no offset" ); - collisionTest2({ - collision: "none" - }, { top: -10, left: -10 }, "moved to the right bottom" ); -}); - -test( "collision: none, with offset", function() { collisionTest({ collision: "none", at: "right+2 bottom+3" - }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, with offset added" ); + }, { + top: 13, + left: 12 + }, "with offset" ); +}); + +test( "collision: none, collision", function() { + expect( 2 ); + + collisionTest2({ + collision: "none" + }, { + top: -6, + left: -6 + }, "no offset" ); collisionTest2({ collision: "none", at: "left+2 top+3" - }, { top: -7, left: -8 }, "left top, positive offset" ); - - collisionTest2({ - collision: "none", - at: "left-2 top-3" - }, { top: -13, left: -12 }, "left top, negative offset" ); + }, { + top: -3, + left: -4 + }, "with offset" ); }); test( "collision: fit, with margin", function() { - $( "#elx" ).css( "margin", 10 ); - - collisionTest({ - collision: "fit" - }, { top: $( window ).height() - 20, left: $( window ).width() - 20 }, "right bottom" ); - - collisionTest2({ - collision: "fit" - }, { top: 10, left: 10 }, "left top" ); + expect( 2 ); $( "#elx" ).css({ - "margin-left": 5, - "margin-top": 5 + marginTop: 6, + marginLeft: 4 }); collisionTest({ collision: "fit" - }, { top: $( window ).height() - 20, left: $( window ).width() - 20 }, "right bottom" ); + }, { + top: 10, + left: 10 + }, "right bottom" ); collisionTest2({ collision: "fit" - }, { top: 5, left: 5 }, "left top" ); - - $( "#elx" ).css({ - "margin-right": 15, - "margin-bottom": 15 - }); - - collisionTest({ - collision: "fit" - }, { top: $( window ).height() - 25, left: $( window ).width() - 25 }, "right bottom" ); - - collisionTest2({ - collision: "fit" - }, { top: 5, left: 5 }, "left top" ); + }, { + top: 6, + left: 4 + }, "left top" ); }); test( "collision: flip, with margin", function() { - $( "#elx" ).css( "margin", 10 ); + expect( 3 ); + + $( "#elx" ).css({ + marginTop: 6, + marginLeft: 4 + }); collisionTest({ - collision: "flip", - at: "left top" - }, { top: 0, left: 0 }, "left top" ); + collision: "flip" + }, { + top: 10, + left: 10 + }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { + top: 10, + left: 10 + }, "right bottom" ); collisionTest2({ collision: "flip", - at: "right bottom" - }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" ); + my: "left top" + }, { + top: 0, + left: 4 + }, "right bottom" ); }); -test( "addClass: flipped left", function() { - var elem = $( "#elx" ).position( { - my: "left center", - of: window, - collision: "flip", - at: "right center" - }); +test( "within", function() { + expect( 4 ); - deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' ); + collisionTest({ + within: "#within", + collision: "fit" + }, { + top: 4, + left: 2 + }, "fit - right bottom" ); - elem.position({ - my: "right center", - of: window, - collision: "flip", - at: "left center" - }); + collisionTest2({ + within: "#within", + collision: "fit" + }, { + top: 2, + left: 0 + }, "fit - left top" ); - deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); -}); + collisionTest({ + within: "#within", + collision: "flip" + }, { + top: 10, + left: -6 + }, "fit - right bottom" ); -test( "addClass: flipped top", function() { - var elem = $( "#elx" ).position( { - my: "left top", - of: window, - collision: "flip", - at: "right bottom" - }); - - deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' ); - - elem.position( { - my: "left bottom", - of: window, - collision: "flip", - at: "right top" - }); - - deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); -}); - -test( "addClass: flipped right", function() { - var elem = $( "#elx" ).position( { - my: "right center", - of: window, - collision: "flip", - at: "left center" - }); - - deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' ); - - elem.position( { - my: "left center", - of: window, - collision: "flip", - at: "right center" - }); - - deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); - -}); - -test( "addClass: flipped bottom", function() { - var elem = $( "#elx" ).position( { - my: "left bottom", - of: window, - collision: "flip", - at: "right top" - }); - - deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' ); - - elem.position( { - my: "left top", - of: window, - collision: "flip", - at: "right bottom" - }); - - deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); + collisionTest2({ + within: "#within", + collision: "flip" + }, { + top: 10, + left: -6 + }, "fit - left top" ); }); test( "fractions", function() { + expect( 1 ); + $( "#fractions-element" ).position({ my: "left top", at: "left top", @@ -527,6 +528,8 @@ test( "fractions", function() { }); test( "bug #5280: consistent results (avoid fractional values)", function() { + expect( 1 ); + var wrapper = $( "#bug-5280" ), elem = wrapper.children(), offset1 = elem.position({ diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js deleted file mode 100644 index 187408c61..000000000 --- a/tests/unit/position/position_core_within.js +++ /dev/null @@ -1,540 +0,0 @@ -(function( $ ) { - -function scrollTopSupport() { - $( window ).scrollTop( 1 ); - return $( window ).scrollTop() === 1; -} - -module( "position - within", { - setup: function(){ - $("#within-container").css({"width": "70px", "height": "70px", "top": "20px", "left": "20px", "position": "relative"}).show(); - } -}); - -var addTop = -20, - addLeft = -20; - -$.fn.addOffsets = function() { - var elOffset = this.offset(), - offset = $("#within-container").offset(); - - elOffset.top -= offset.top; - elOffset.left -= offset.left; - - return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; -}; - -test( "my, at, of", function() { - var within = $("#within-container"); - - $( "#elx" ).position({ - my: "left top", - at: "left top", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); - - $( "#elx" ).position({ - my: "left top", - at: "left bottom", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); - - $( "#elx" ).position({ - my: "left", - at: "bottom", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); - - $( "#elx" ).position({ - my: "left foo", - at: "bar baz", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); -}); - -test( "multiple elements", function() { - var elements = $( "#el1, #el2" ), - result = elements.position({ - my: "left top", - at: "left bottom", - of: "#parent", - collision: "none", - within: $("#within-container") - }), - expected = { top: addTop + 10, left: addLeft + 4 }; - - deepEqual( result, elements ); - elements.each(function() { - deepEqual( $( this ).addOffsets(), expected ); - }); -}); - -test( "positions", function() { - var definitions = [], - offsets = { - left: 0, - center: 3, - right: 6, - top: 0, - bottom: 6 - }, - start = { left: 4, top: 4 }, - el = $( "#el1" ); - $.each( [ 0, 1 ], function( my ) { - $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) { - $.each( [ "left", "center", "right" ], function( hindex, horizontal ) { - definitions.push({ - my: my ? horizontal + " " + vertical : "left top", - at: !my ? horizontal + " " + vertical : "left top", - result: { - top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]), - left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ]) - } - }); - }); - }); - }); - $.each( definitions, function( index, definition ) { - el.position({ - my: definition.my, - at: definition.at, - of: "#parent", - collision: "none", - within: $("#within-container") - }); - deepEqual( el.addOffsets(), definition.result, - "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); - }); -}); - -test( "of", function() { - var event, - within = $( "#within-container" ); - - $( "#elx" ).position({ - my: "left top", - at: "left top", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); - - $( "#elx" ).position({ - my: "left top", - at: "left bottom", - of: $( "#parentx"), - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); - - $( "#elx" ).position({ - my: "left top", - at: "left top", - of: $( "#parentx" )[ 0 ], - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); - - event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); - $( "#elx" ).position({ - my: "left top", - at: "left top", - of: event, - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).offset(), { - top: 300, - left: 200 - }, "event - left top, left top" ); - - event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } ); - $( "#elx" ).position({ - my: "left top", - at: "right bottom", - of: event, - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).offset(), { - top: 600, - left: 400 - }, "event - left top, right bottom" ); -}); - -test( "within:offsets", function() { - var within = $("#within-container"); - - $( "#elx" ).position({ - my: "left top", - at: "left+10 bottom+10", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); - - $( "#elx" ).position({ - my: "left+10 top-10", - at: "left bottom", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); - - $( "#elx" ).position({ - my: "left top", - at: "left+50% bottom-10%", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); - - $( "#elx" ).position({ - my: "left-30% top+50%", - at: "left bottom", - of: "#parentx", - collision: "none", - within: within - }); - deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); -}); - -test( "using", function() { - expect( 6 ); - - var within = $( "#within-container" ), - count = 0, - elems = $( "#el1, #el2" ), - expectedPosition = { top: addTop + 40, left: addLeft + 40 }, - originalPosition = elems.position({ - my: "right bottom", - at: "right bottom", - of: "#parentx", - collision: "none", - within: within - }).addOffsets(); - - elems.position({ - my: "left top", - at: "left top", - of: "#parentx", - using: function( position ) { - position.top -= within.offset().top; - position.left -= within.offset().left; - deepEqual( this, elems[ count ], "correct context for call #" + count ); - deepEqual( position, expectedPosition, "correct position for call #" + count ); - count++; - }, - within: within - }); - - elems.each(function() { - deepEqual( $( this ).addOffsets(), originalPosition, "elements not moved" ); - }); -}); - -function collisionTest( config, result, msg ) { - var within = $( "#within-container" ), - elem = $( "#elx" ).position( $.extend({ - my: "left top", - at: "right bottom", - of: "#parentx", - within: within - }, config ) ); - - deepEqual( elem.addOffsets(), result, msg ); -} - -function collisionTest2( config, result, msg ) { - collisionTest( $.extend({ - my: "right bottom", - at: "left top" - }, config ), result, msg ); -} - -test( "collision: fit, no offset", function() { - var within = $("#within-container"), - of = $("#parentx"); - - collisionTest({ - collision: "fit" - }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom" ); - - collisionTest2({ - collision: "fit" - }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); -}); - - -test( "collision: fit, with offset", function() { - var within = $("#within-container"), - of = $("#parentx"); - - collisionTest({ - collision: "fit", - at: "right+2 bottom+3" - }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom"); - - collisionTest2({ - collision: "fit", - at: "left+2 top+3" - }, { top: addTop + of.position().top - 7, left: addLeft + of.position().left - 8 }, "left top, positive offset" ); - - collisionTest2({ - collision: "fit", - at: "left-2 top-3" - }, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "left top, negative offset" ); -}); - -test( "collision: none, within scrolled", function() { - if ( scrollTopSupport() ) { - var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}), - of = $("#parentx"); - within.scrollTop( 300 ).scrollLeft( 150 ); - - collisionTest({ - collision: "none", - at: "left-100 top-100" - }, { top: of.offset().top + addTop - 100 - of.height(), left: of.offset().left + addLeft - 100 - of.width() }, "top left" ); - collisionTest2({ - collision: "none", - at: "right+100 bottom+100" - }, { top: of.offset().top + addTop + 100 - 10, left: of.offset().left + addLeft + 100 - 10 }, "right bottom" ); - within.scrollTop( 0 ).scrollLeft( 0 ); - } -}); - -test( "collision: flip, no offset", function() { - var within = $("#within-container"), - of = $("#parentx"); - - collisionTest({ - collision: "flip" - }, { top: addTop + of.position().top + of.height(), left: addLeft + of.position().left + of.width() }, "left top" ); - - collisionTest2({ - collision: "flip" - }, { top: addTop + of.position().top - 10, left: addTop + of.position().top - 10 }, "right bottom" ); -}); - -test( "collision: flip, with offset", function() { - var within = $("#within-container"), - of = $("#parentx"); - - collisionTest({ - collision: "flip", - at: "right+2 bottom+3" - }, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "left top, with offset added" ); - - collisionTest2({ - collision: "flip", - at: "left+2 top+3" - }, { top: addTop + of.position().top - 10 + 3, left: addLeft + of.position().left - 10 + 2 }, "right bottom, positive offset" ); - - collisionTest2({ - collision: "flip", - at: "left-2 top-3" - }, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "right bottom, negative offset" ); -}); - -test( "collision: none, no offset", function() { - var within = $("#within-container"), - of = $("#parentx"); - - collisionTest({ - collision: "none" - }, { top: addTop + of.position().top + of.height(), left: addLeft + of.position().left + of.width() }, "left top" ); - - collisionTest2({ - collision: "none" - }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "right bottom" ); -}); - -test( "collision: none, with offset", function() { - var within = $("#within-container"), - of = $("#parentx"); - - collisionTest({ - collision: "none", - at: "right+2 bottom+3" - }, { top: addTop + of.position().top + of.height() + 3, left: addLeft + of.position().left + of.width() + 2 }, "right bottom, with offset added" ); - - collisionTest2({ - collision: "none", - at: "left+2 top+3" - }, { top: addTop + of.position().top - 7, left: addTop + of.position().top - 8 }, "left top, positive offset" ); - - collisionTest2({ - collision: "none", - at: "left-2 top-3" - }, { top: addTop + of.position().top - 13, left: addTop + of.position().top - 12 }, "left top, negative offset" ); -}); - -test( "collision: fit, with margin", function() { - var within = $("#within-container"), - of = $("#parentx"); - - $( "#elx" ).css( "margin", 10 ); - - collisionTest({ - collision: "fit" - }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); - - collisionTest2({ - collision: "fit" - }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); - - $( "#elx" ).css({ - "margin-left": 5, - "margin-top": 5 - }); - - collisionTest({ - collision: "fit" - }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); - - collisionTest2({ - collision: "fit" - }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); - - $( "#elx" ).css({ - "margin-right": 15, - "margin-bottom": 15 - }); - - collisionTest({ - collision: "fit" - }, { top: addTop + of.position().top + of.height() - 15 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 15 - $.position.getScrollInfo( within ).width }, "right bottom" ); - - collisionTest2({ - collision: "fit" - }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); -}); - -test( "collision: flip, with margin", function() { - var within = $("#within-container"), - of = $("#parentx"); - - $( "#elx" ).css( "margin", 10 ); - - collisionTest({ - collision: "flip" - }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" ); - - collisionTest2({ - collision: "flip" - }, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "right bottom" ); - - $( "#elx" ).css( "margin", 0 ); -}); - -test( "addClass: flipped left", function() { - var within = $("#within-container"), - elem = $( "#elx" ).position( { - my: "left center", - of: within[0], - within: within, - collision: "flip", - at: "right center" - }); - - deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' ); - - elem.position({ - my: "right center", - of: within[0], - within: within, - collision: "flip", - at: "left center" - }); - - deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); -}); - -test( "addClass: flipped top", function() { - var within = $("#within-container"), - elem = $( "#elx" ).position( { - my: "left top", - of: within[0], - within: within, - collision: "flip", - at: "right bottom" - }); - - deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' ); - - elem.position( { - my: "left bottom", - of: within[0], - within: within, - collision: "flip", - at: "right top" - }); - - deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); -}); - -test( "addClass: flipped right", function() { - var within = $("#within-container"), - elem = $( "#elx" ).position( { - my: "right center", - of: within[0], - within: within, - collision: "flip", - at: "left center" - }); - - deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' ); - - elem.position( { - my: "left center", - of: within[0], - within: within, - collision: "flip", - at: "right center" - }); - - deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); - -}); - -test( "addClass: flipped bottom", function() { - var within = $("#within-container"), - elem = $( "#elx" ).position( { - my: "left bottom", - of: window, - collision: "flip", - at: "right top" - }); - - deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' ); - - elem.position( { - my: "left top", - of: window, - collision: "flip", - at: "right bottom" - }); - - deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); -}); - -}( jQuery ) ); diff --git a/tests/unit/position/position_deprecated.html b/tests/unit/position/position_deprecated.html index 2a7769107..8794812a8 100644 --- a/tests/unit/position/position_deprecated.html +++ b/tests/unit/position/position_deprecated.html @@ -33,25 +33,26 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6 .height() returns the greater of the height and line-height --> -
+
-
+
-
-
-
-
+
+
+
+
-
+
-
-
-
+
+
+
-
-
+
+
+