From dc66f02601eb3a46a93e5d08145e9b4580def237 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:50:16 +0000 Subject: [PATCH] Add tests for position's `within` --- tests/unit/position/position.html | 44 +- tests/unit/position/position_core_within.js | 560 ++++++++++++++++++++ tests/visual/position/position_within.html | 1 + 3 files changed, 586 insertions(+), 19 deletions(-) create mode 100644 tests/unit/position/position_core_within.js diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 4f2e87e08..6e4373172 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -16,6 +16,7 @@ + @@ -34,29 +35,34 @@ 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_within.js b/tests/unit/position/position_core_within.js new file mode 100644 index 000000000..0ece93b69 --- /dev/null +++ b/tests/unit/position/position_core_within.js @@ -0,0 +1,560 @@ +(function( $ ) { + +$("#within-container").show(); + +function scrollTopSupport() { + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; +} +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( "within: my, at, of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#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-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); + + $( "#elx" ).position({ + my: "left", + at: "bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); + + $( "#elx" ).position({ + my: "left foo", + at: "bar baz", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); +}); + +test( "within: multiple elements", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var elements = $( "#el1, #el2" ); + var result = elements.position({ + my: "left top", + at: "left bottom", + of: "#parent", + collision: "none", + within: $("#within-container") + }); + + same( result, elements ); + var expected = { top: addTop + 10, left: addLeft + 4 }; + elements.each(function() { + same( $( this ).addOffsets(), expected ); + }); +}); + +test( "within: positions", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var definitions = []; + var offsets = { + left: 0, + center: 3, + right: 6, + top: 0, + bottom: 6 + }; + var start = { left: 4, top: 4 }; + $.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 ]) + } + }); + }); + }); + }); + var el = $( "#el1" ); + $.each( definitions, function( index, definition ) { + el.position({ + my: definition.my, + at: definition.at, + of: "#parent", + collision: "none", + within: $("#within-container") + }); + same( el.addOffsets(), definition.result, + "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); + }); +}); + +test( "within: of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none", + within: $("#within-container") + }); + same( $( "#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-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); + + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: document, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( document ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document as jQuery object" ); + + $( window ).scrollTop( 0 ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( window ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window as jQuery object" ); + + if ( scrollTopSupport() ) { + $( window ).scrollTop( 500 ).scrollLeft( 200 ); + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() + 500 - 10, + left: addLeft + $( window ).width() + 200 - 10 + }, "window, scrolled" ); + $( window ).scrollTop( 0 ).scrollLeft( 0 ); + }*/ + + var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none", + within: $("#within-container") + }); + same( $( "#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-container") + }); + same( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "within:offsets", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#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-container") + }); + same( $( "#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-container") + }); + same( $( "#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-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); +}); + +test( "within: using", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + expect( 6 ); + + var count = 0, + elems = $( "#el1, #el2" ), + expectedPosition = { top: addTop + 40, left: addLeft + 40 }, + originalPosition = elems.position({ + my: "right bottom", + at: "rigt bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }).addOffsets(); + + elems.position({ + my: "left top", + at: "left top", + of: "#parentx", + using: function( position ) { + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; + same( this, elems[ count ], "correct context for call #" + count ); + same( position, expectedPosition, "correct position for call #" + count ); + count++; + }, + within: $("#within-container") + }); + + elems.each(function() { + same( $( this ).addOffsets(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: $("#within-container")[0], + within: $("#within-container") + }, config ) ); + same( elem.addOffsets(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "within: collision: fit, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 0, left: addLeft + 0 }, "left top" ); +}); + + +test( "within: collision: fit, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit", + at: "left+2 top+3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" ); + + collisionTest2({ + collision: "fit", + at: "left-2 top-3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, window scrolled", function() { + if ( scrollTopSupport() ) { + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + + collisionTest({ + collision: "fit", + at: "left-100 top-100" + }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + collisionTest2({ + collision: "fit", + at: "right+100 bottom+100" + }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); + + } + +}); + +test( "within: collision: flip, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip" + }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); +}); + +test( "within: collision: flip, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip", + at: "right+2 bottom+3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" ); + + collisionTest2({ + collision: "flip", + at: "left+2 top+3" + }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + + collisionTest2({ + collision: "flip", + at: "left-2 top-3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); +}); + +test( "within: collision: none, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + + collisionTest2({ + collision: "none" + }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); +}); + +test( "within: collision: none, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" ); + + collisionTest2({ + collision: "none", + at: "left+2 top+3" + }, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" ); + + collisionTest2({ + collision: "none", + at: "left-2 top-3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 10, left: addLeft + 10 }, "left top" ); + + $( "#elx" ).css({ + "margin-left": 5, + "margin-top": 5 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); + + $( "#elx" ).css({ + "margin-right": 15, + "margin-bottom": 15 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); +}); + +test( "within: collision: flip, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); +}); + +//test( "bug #5280: consistent results (avoid fractional values)", function() { +// var wrapper = $( "#bug-5280" ), +// elem = wrapper.children(), +// offset1 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(), +// offset2 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(); +// same( offset1, offset2 ); +//}); + + + +}( jQuery ) ); diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index da97eb7e1..e53e9ddf6 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -76,6 +76,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } + $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); $( ".positionable" ).css( "opacity", 0.5 ); -- 2.39.5