diff options
Diffstat (limited to 'src/main/webapp/jquery-ui-1.9pre/tests/unit/position')
6 files changed, 1297 insertions, 0 deletions
diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/all.html b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/all.html new file mode 100644 index 0000000..07676f1 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/all.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Position Test Suite</title> + + <script src="../../../jquery-1.7.1.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <link rel="stylesheet" href="../subsuiteRunner.css"> + <script src="../../../external/qunit.js"></script> + <script src="../subsuiteRunner.js"></script> + <script src="../subsuite.js"></script> + + <script> + testAllVersions( "position" ); + </script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Position Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +</div> +</body> +</html> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position.html b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position.html new file mode 100644 index 0000000..115adc3 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position.html @@ -0,0 +1,75 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Position Test Suite</title> + + <script src="../../jquery.js"></script> + <script> + $.uiBackCompat = false; + </script> + <script src="../../resource_loader.js"></script> + <script> + loadResources({ + js: [ "ui/jquery.ui.position.js" ] + }); + </script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + + <script src="position_core.js"></script> + <script src="position_core_within.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> +<div style="position:relative; z-index:2;"> + <h1 id="qunit-header">jQuery UI Position Test Suite</h1> + <h2 id="qunit-banner"></h2> + <div id="qunit-testrunner-toolbar"></div> + <h2 id="qunit-userAgent"></h2> + <ol id="qunit-tests"> + </ol> +</div> + +<!-- +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 +--> + +<div id="qunit-fixture" style="top: 0; left: 0; z-index:1"> + <div id="within-container"> + <div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div> + + <div style="position: absolute; top: 0px; left: 0px"> + <div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div> + </div> + + <div style="position: absolute; top: 200px; left: 100px;"> + <div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div style="position: absolute; top: 100px; left: 50px;"> + <div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div> + </div> + </div> + + <div style="position: absolute; height: 5000px; width: 5000px;"></div> + + <div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;"> + <div id="fractions-element"></div> + </div> + </div> + + <div id="bug-5280" style="height: 30px; width: 201px;"> + <div style="width: 50px; height: 10px;"></div> + </div> +</div> + +</body> +</html> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_core.js b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_core.js new file mode 100644 index 0000000..ea1baee --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_core.js @@ -0,0 +1,547 @@ +(function( $ ) { + +function scrollTopSupport() { + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; +} + +module( "position" ); + +test( "my, at, of", function() { + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 40, left: 40 }, "left top, left top" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 60, left: 40 }, "left top, left bottom" ); + + $( "#elx" ).position({ + my: "left", + at: "bottom", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 55, left: 50 }, "left, bottom" ); + + $( "#elx" ).position({ + my: "left foo", + at: "bar baz", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 45, left: 50 }, "left foo, bar baz" ); +}); + +test( "multiple elements", function() { + var elements = $( "#el1, #el2" ); + var result = elements.position({ + my: "left top", + at: "left bottom", + of: "#parent", + collision: "none" + }); + + same( result, elements ); + var expected = { top: 10, left: 4 }; + elements.each(function() { + same( $( this ).offset(), expected ); + }); +}); + +test( "positions", function() { + 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: my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ], + left: 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" + }); + same( el.offset(), definition.result, + "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); + }); +}); + +test( "of", function() { + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 40, left: 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 60, left: 40 }, "jQuery object" ); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: $( "#parentx" )[ 0 ], + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 40, left: 40 }, "DOM element" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: document, + collision: "none" + }); + same( $( "#elx" ).offset(), { + top: $( document ).height() - 10, + left: $( document ).width() - 10 + }, "document" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( document ), + collision: "none" + }); + same( $( "#elx" ).offset(), { + top: $( document ).height() - 10, + left: $( document ).width() - 10 + }, "document as jQuery object" ); + + $( window ).scrollTop( 0 ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none" + }); + same( $( "#elx" ).offset(), { + top: $( window ).height() - 10, + left: $( window ).width() - 10 + }, "window" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( window ), + collision: "none" + }); + same( $( "#elx" ).offset(), { + top: $( window ).height() - 10, + left: $( 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" + }); + same( $( "#elx" ).offset(), { + top: $( window ).height() + 500 - 10, + left: $( 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" + }); + 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" + }); + same( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "offsets", function() { + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 70, left: 50 }, "offsets in at" ); + + $( "#elx" ).position({ + my: "left+10 top-10", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 50, left: 50 }, "offsets in my" ); + + $( "#elx" ).position({ + my: "left top", + at: "left+50% bottom-10%", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 58, left: 50 }, "percentage offsets in at" ); + + $( "#elx" ).position({ + my: "left-30% top+50%", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 65, left: 37 }, "percentage offsets in my" ); +}); + +test( "using", function() { + expect( 6 ); + + var count = 0, + elems = $( "#el1, #el2" ), + expectedPosition = { top: 40, left: 40 }, + originalPosition = elems.position({ + my: "right bottom", + at: "rigt bottom", + of: "#parentx", + collision: "none" + }).offset(); + + elems.position({ + my: "left top", + at: "left top", + of: "#parentx", + using: function( position ) { + same( this, elems[ count ], "correct context for call #" + count ); + same( position, expectedPosition, "correct position for call #" + count ); + count++; + } + }); + + elems.each(function() { + same( $( this ).offset(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: window + }, config ) ); + same( elem.offset(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "collision: fit, no offset", function() { + collisionTest({ + collision: "fit" + }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" ); + + 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"); + + collisionTest2({ + collision: "fit", + at: "left+2 top+3" + }, { top: 0, left: 0 }, "left top, positive 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" ); + + win.scrollTop( 0 ).scrollLeft( 0 ); + } +}); + +test( "collision: flip, no offset", function() { + collisionTest({ + collision: "flip" + }, { top: $( window ).height(), left: $( window ).width() }, "left top" ); + + 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" ); + + 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" ); +}); + +test( "collision: none, no offset", function() { + collisionTest({ + collision: "none" + }, { top: $( window ).height(), left: $( window ).width() }, "left top" ); + + 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" ); + + 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" ); +}); + +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" ); + + $( "#elx" ).css({ + "margin-left": 5, + "margin-top": 5 + }); + + collisionTest({ + collision: "fit" + }, { top: $( window ).height() - 20, left: $( window ).width() - 20 }, "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" ); +}); + +test( "collision: flip, with margin", function() { + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: 0, left: 0 }, "left top" ); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" ); +}); + +test( "addClass: flipped left", function() { + var elem = $( "#elx" ).position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' ); + + elem.position( { + my: "right center", + of: window, + collision: "flip", + at: "left center" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var elem = $( "#elx" ).position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' ); + + elem.position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( 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" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' ); + + elem.position( { + my: "left center", + of: window, + collision: "flip", + at: "right center" + }); + + same( 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" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + +test( "fractions", function() { + $( "#fractions-element" ).position({ + my: "left top", + at: "left top", + of: "#fractions-parent", + collision: "none" + }); + same( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" ); +}); + +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/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_core_within.js b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_core_within.js new file mode 100644 index 0000000..392e409 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_core_within.js @@ -0,0 +1,545 @@ +(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 + }); + 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 + }); + 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 + }); + 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 + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); +}); + +test( "multiple elements", function() { + 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( "positions", function() { + 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( "of", function() { + var within = $("#within-container"); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: within + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none", + within: within + }); + 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 + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); + + var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none", + within: within + }); + 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 + }); + same( $( "#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 + }); + 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 + }); + 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 + }); + 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 + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); +}); + +test( "using", function() { + expect( 6 ); + + var within = $("#within-container"); + + var 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; + same( this, elems[ count ], "correct context for call #" + count ); + same( position, expectedPosition, "correct position for call #" + count ); + count++; + }, + within: within + }); + + elems.each(function() { + same( $( this ).addOffsets(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: "#parentx", + within: within + }, config ) ); + + same( 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"); + + var elem = $( "#elx" ).position( { + my: "left center", + of: within[0], + within: within, + collision: "flip", + at: "right center" + }); + + same( 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" + }) + + same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); +}); + +test( "addClass: flipped top", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left top", + of: within[0], + within: within, + collision: "flip", + at: "right bottom" + }); + + same( 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" + }); + + same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' ); +}); + +test( "addClass: flipped right", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "right center", + of: within[0], + within: within, + collision: "flip", + at: "left center" + }); + + same( 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" + }); + + same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' ); + +}); + +test( "addClass: flipped bottom", function() { + var within = $("#within-container"); + + var elem = $( "#elx" ).position( { + my: "left bottom", + of: window, + collision: "flip", + at: "right top" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' ); + + elem.position( { + my: "left top", + of: window, + collision: "flip", + at: "right bottom" + }); + + same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); +}); + +}( jQuery ) ); diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_deprecated.html b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_deprecated.html new file mode 100644 index 0000000..ee9be18 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_deprecated.html @@ -0,0 +1,68 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Position Test Suite</title> + + <script src="../../jquery.js"></script> + <script src="../../resource_loader.js"></script> + <script> + loadResources({ + js: [ "ui/jquery.ui.position.js" ] + }); + </script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + + <script src="position_core.js"></script> + <script src="position_deprecated.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Position Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> + +<!-- +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 +--> + +<div id="qunit-fixture" style="top: 0; left: 0;"> + <div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div> +</div> + +<div style="position: absolute; top: 0px; left: 0px"> + <div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div> +</div> + +<div style="position: absolute; top: 200px; left: 100px;"> + <div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div style="position: absolute; top: 100px; left: 50px;"> + <div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div> + </div> +</div> + +<div style="position: absolute; height: 5000px; width: 5000px;"></div> + +<div id="bug-5280" style="height: 30px; width: 201px;"> + <div style="width: 50px; height: 10px;"></div> +</div> + +<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;"> + <div id="fractions-element"></div> +</div> + +</body> +</html> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_deprecated.js b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_deprecated.js new file mode 100644 index 0000000..3e72c4a --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/unit/position/position_deprecated.js @@ -0,0 +1,32 @@ +(function( $ ) { + +test( "offset", function() { + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + offset: "10", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 70, left: 50 }, "single value" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + offset: "5 -3", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 57, left: 45 }, "two values" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + offset: "5px -3px", + collision: "none" + }); + same( $( "#elx" ).offset(), { top: 57, left: 45 }, "with units" ); +}); + +}( jQuery ) ); |