diff options
Diffstat (limited to 'apps/it/static/js/ui/tests/unit/position')
| -rw-r--r-- | apps/it/static/js/ui/tests/unit/position/all.html | 30 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/unit/position/position.html | 53 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/unit/position/position_core.js | 729 |
3 files changed, 812 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/unit/position/all.html b/apps/it/static/js/ui/tests/unit/position/all.html new file mode 100644 index 0000000..d866c6a --- /dev/null +++ b/apps/it/static/js/ui/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.10.2.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <link rel="stylesheet" href="../qunit-composite.css"> + <script src="../../../external/qunit.js"></script> + <script src="../qunit-composite.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/apps/it/static/js/ui/tests/unit/position/position.html b/apps/it/static/js/ui/tests/unit/position/position.html new file mode 100644 index 0000000..f3b1ad8 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/position/position.html @@ -0,0 +1,53 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Position Test Suite</title> + + <script src="../../jquery.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> + TestHelpers.loadResources({ + js: [ "ui/jquery.ui.position.js" ] + }); + </script> + + <script src="position_core.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> +<div id="qunit" style="position:relative; z-index:2;"></div> + +<!-- +elements smaller than 20px 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="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 id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px; line-height: 12px;"></div> + + <div id="scrollx" 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; 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 id="bug-5280" style="height: 30px; width: 201px;"> + <div style="width: 50px; height: 10px;"></div> + </div> +</div> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/position/position_core.js b/apps/it/static/js/ui/tests/unit/position/position_core.js new file mode 100644 index 0000000..5b1872a --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/position/position_core.js @@ -0,0 +1,729 @@ +(function( $ ) { + +var win = $( window ), + scrollTopSupport = function() { + var support = win.scrollTop( 1 ).scrollTop() === 1; + win.scrollTop( 0 ); + scrollTopSupport = function() { + return support; + }; + return support; + }; + +module( "position", { + setup: function() { + win.scrollTop( 0 ).scrollLeft( 0 ); + } +}); + +TestHelpers.testJshint( "position" ); + +test( "my, at, of", function() { + expect( 4 ); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "left top, left top" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "left top, left bottom" ); + + $( "#elx" ).position({ + my: "left", + at: "bottom", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 55, left: 50 }, "left, bottom" ); + + $( "#elx" ).position({ + my: "left foo", + at: "bar baz", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 45, left: 50 }, "left foo, bar baz" ); +}); + +test( "multiple elements", function() { + expect( 3 ); + + var elements = $( "#el1, #el2" ), + result = elements.position({ + my: "left top", + at: "left bottom", + of: "#parent", + collision: "none" + }), + expected = { top: 10, left: 4 }; + + deepEqual( result, elements ); + elements.each(function() { + deepEqual( $( this ).offset(), expected ); + }); +}); + +test( "positions", function() { + expect( 18 ); + + var 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 ) { + 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 }) ); + }); + }); + }); +}); + +test( "of", function() { + expect( 9 + (scrollTopSupport() ? 1 : 0) ); + + var event; + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "jQuery object" ); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: $( "#parentx" )[ 0 ], + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "DOM element" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: document, + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { + top: $( document ).height() - 10, + left: $( document ).width() - 10 + }, "document" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( document ), + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { + top: $( document ).height() - 10, + left: $( document ).width() - 10 + }, "document as jQuery object" ); + + win.scrollTop( 0 ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { + top: win.height() - 10, + left: win.width() - 10 + }, "window" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: win, + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { + top: win.height() - 10, + left: win.width() - 10 + }, "window as jQuery object" ); + + if ( scrollTopSupport() ) { + win.scrollTop( 500 ).scrollLeft( 200 ); + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { + top: win.height() + 500 - 10, + left: win.width() + 200 - 10 + }, "window, scrolled" ); + win.scrollTop( 0 ).scrollLeft( 0 ); + } + + event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none" + }); + 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" + }); + deepEqual( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "offsets", function() { + expect( 9 ); + + var offset; + + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 70, left: 50 }, "offsets in at" ); + + $( "#elx" ).position({ + my: "left+10 top-10", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 50, left: 50 }, "offsets in my" ); + + $( "#elx" ).position({ + my: "left top", + at: "left+50% bottom-10%", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 58, left: 50 }, "percentage offsets in at" ); + + $( "#elx" ).position({ + my: "left-30% top+50%", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 65, left: 37 }, "percentage offsets in my" ); + + $( "#elx" ).position({ + my: "left-30.001% top+50.0%", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + offset = $( "#elx" ).offset(); + equal( Math.round( offset.top ), 65, "decimal percentage offsets in my" ); + equal( Math.round( offset.left ), 37, "decimal percentage offsets in my" ); + + $( "#elx" ).position({ + my: "left+10.4 top-10.6", + at: "left bottom", + of: "#parentx", + collision: "none" + }); + offset = $( "#elx" ).offset(); + equal( Math.round( offset.top ), 49, "decimal offsets in my" ); + equal( Math.round( offset.left ), 50, "decimal offsets in my" ); + + $( "#elx" ).position({ + my: "left+right top-left", + at: "left-top bottom-bottom", + of: "#parentx", + collision: "none" + }); + deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "invalid offsets" ); +}); + +test( "using", function() { + expect( 10 ); + + var count = 0, + elems = $( "#el1, #el2" ), + of = $( "#parentx" ), + expectedPosition = { top: 60, left: 60 }, + expectedFeedback = { + target: { + element: of, + width: 20, + height: 20, + left: 40, + top: 40 + }, + element: { + width: 6, + height: 6, + left: 60, + top: 60 + }, + horizontal: "left", + vertical: "top", + important: "vertical" + }, + originalPosition = elems.position({ + my: "right bottom", + at: "rigt bottom", + of: "#parentx", + collision: "none" + }).offset(); + + elems.position({ + my: "left top", + at: "center+10 bottom", + of: "#parentx", + using: function( position, feedback ) { + deepEqual( this, elems[ count ], "correct context for call #" + count ); + deepEqual( position, expectedPosition, "correct position for call #" + count ); + deepEqual( feedback.element.element[ 0 ], elems[ count ] ); + delete feedback.element.element; + deepEqual( feedback, expectedFeedback ); + count++; + } + }); + + elems.each(function() { + deepEqual( $( this ).offset(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: "#parent" + }, config ) ); + deepEqual( elem.offset(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "collision: fit, no collision", function() { + expect( 2 ); + + collisionTest({ + collision: "fit" + }, { + top: 10, + left: 10 + }, "no offset" ); + + collisionTest({ + collision: "fit", + at: "right+2 bottom+3" + }, { + top: 13, + left: 12 + }, "with offset" ); +}); + +// Currently failing in IE8 due to the iframe used by TestSwarm +if ( !/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ) ) { +test( "collision: fit, collision", function() { + expect( 2 + (scrollTopSupport() ? 1 : 0) ); + + collisionTest2({ + collision: "fit" + }, { + top: 0, + left: 0 + }, "no offset" ); + + collisionTest2({ + collision: "fit", + at: "left+2 top+3" + }, { + top: 0, + left: 0 + }, "with offset" ); + + if ( scrollTopSupport() ) { + win.scrollTop( 300 ).scrollLeft( 200 ); + collisionTest({ + collision: "fit" + }, { + top: 300, + left: 200 + }, "window scrolled" ); + + win.scrollTop( 0 ).scrollLeft( 0 ); + } +}); +} + +test( "collision: flip, no collision", function() { + expect( 2 ); + + collisionTest({ + collision: "flip" + }, { + top: 10, + left: 10 + }, "no offset" ); + + collisionTest({ + collision: "flip", + at: "right+2 bottom+3" + }, { + 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 + }, "with offset" ); +}); + +test( "collision: flipfit, no collision", function() { + expect( 2 ); + + collisionTest({ + collision: "flipfit" + }, { + top: 10, + left: 10 + }, "no offset" ); + + collisionTest({ + collision: "flipfit", + at: "right+2 bottom+3" + }, { + top: 13, + left: 12 + }, "with offset" ); +}); + +test( "collision: flipfit, collision", function() { + expect( 2 ); + + collisionTest2({ + collision: "flipfit" + }, { + top: 10, + left: 10 + }, "no offset" ); + + collisionTest2({ + collision: "flipfit", + at: "left+2 top+3" + }, { + top: 7, + left: 8 + }, "with offset" ); +}); + +test( "collision: none, no collision", function() { + expect( 2 ); + + collisionTest({ + collision: "none" + }, { + top: 10, + left: 10 + }, "no offset" ); + + collisionTest({ + collision: "none", + at: "right+2 bottom+3" + }, { + 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: -3, + left: -4 + }, "with offset" ); +}); + +test( "collision: fit, with margin", function() { + expect( 2 ); + + $( "#elx" ).css({ + marginTop: 6, + marginLeft: 4 + }); + + collisionTest({ + collision: "fit" + }, { + top: 10, + left: 10 + }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { + top: 6, + left: 4 + }, "left top" ); +}); + +test( "collision: flip, with margin", function() { + expect( 3 ); + + $( "#elx" ).css({ + marginTop: 6, + marginLeft: 4 + }); + + collisionTest({ + collision: "flip" + }, { + top: 10, + left: 10 + }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { + top: 10, + left: 10 + }, "right bottom" ); + + collisionTest2({ + collision: "flip", + my: "left top" + }, { + top: 0, + left: 4 + }, "right bottom" ); +}); + +test( "within", function() { + expect( 7 ); + + collisionTest({ + within: document + }, { + top: 10, + left: 10 + }, "within document" ); + + collisionTest({ + within: "#within", + collision: "fit" + }, { + top: 4, + left: 2 + }, "fit - right bottom" ); + + collisionTest2({ + within: "#within", + collision: "fit" + }, { + top: 2, + left: 0 + }, "fit - left top" ); + + collisionTest({ + within: "#within", + collision: "flip" + }, { + top: 10, + left: -6 + }, "flip - right bottom" ); + + collisionTest2({ + within: "#within", + collision: "flip" + }, { + top: 10, + left: -6 + }, "flip - left top" ); + + collisionTest({ + within: "#within", + collision: "flipfit" + }, { + top: 4, + left: 0 + }, "flipfit - right bottom" ); + + collisionTest2({ + within: "#within", + collision: "flipfit" + }, { + top: 4, + left: 0 + }, "flipfit - left top" ); +}); + +test( "with scrollbars", function() { + expect( 4 ); + + $( "#scrollx" ).css({ + width: 100, + height: 100, + left: 0, + top: 0 + }); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90, + left: 90 + }, "visible" ); + + $( "#scrollx" ).css({ + overflow: "scroll" + }); + + var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) ); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90 - scrollbarInfo.height, + left: 90 - scrollbarInfo.width + }, "scroll" ); + + $( "#scrollx" ).css({ + overflow: "auto" + }); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90, + left: 90 + }, "auto, no scroll" ); + + $( "#scrollx" ).css({ + overflow: "auto" + }).append( $("<div>").height(300).width(300) ); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90 - scrollbarInfo.height, + left: 90 - scrollbarInfo.width + }, "auto, with scroll" ); +}); + +test( "fractions", function() { + expect( 1 ); + + $( "#fractions-element" ).position({ + my: "left top", + at: "left top", + of: "#fractions-parent", + collision: "none" + }); + deepEqual( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" ); +}); + +test( "bug #5280: consistent results (avoid fractional values)", function() { + expect( 1 ); + + 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(); + deepEqual( offset1, offset2 ); +}); + +}( jQuery ) ); |