]> source.dussan.org Git - jquery-ui.git/commitdiff
Position tests: Simplify logic and reduce tests.
authorScott González <scott.gonzalez@gmail.com>
Mon, 23 Apr 2012 19:52:06 +0000 (15:52 -0400)
committerScott González <scott.gonzalez@gmail.com>
Mon, 23 Apr 2012 19:52:20 +0000 (15:52 -0400)
tests/unit/position/position.html
tests/unit/position/position_core.js
tests/unit/position/position_core_within.js [deleted file]
tests/unit/position/position_deprecated.html

index 396e3e13e88d69cbcbab50a271fbe67c335d7e3e..518e1f960bafccffbc787091fc95cbd0e6023f97 100644 (file)
@@ -19,7 +19,6 @@
        </script>
 
        <script src="position_core.js"></script>
-       <script src="position_core_within.js"></script>
 
        <script src="../swarminject.js"></script>
 </head>
@@ -39,21 +38,20 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6
 -->
 
 <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 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;"></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; height: 5000px; width: 5000px;"></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="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;">
index 5c86e7887616e3ebbbddeebf658a246891673a70..7a9a35132634267c158b7b236b6e7647fa9d8ac4 100644 (file)
@@ -1,13 +1,24 @@
 (function( $ ) {
 
-function scrollTopSupport() {
-       $( window ).scrollTop( 1 );
-       return $( window ).scrollTop() === 1;
-}
-
-module( "position" );
+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 );
+       }
+});
 
 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() {
-       collisionTest({
-               collision: "fit"
-       }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" );
+test( "collision: fit, no collision", function() {
+       expect( 2 );
 
-       collisionTest2({
+       collisionTest({
                collision: "fit"
-       }, { top: 0, left: 0 }, "left top" );
-});
+       }, {
+               top: 10,
+               left: 10
+       }, "no offset" );
 
-test( "collision: fit, with offset", function() {
        collisionTest({
-               collision: "fit",
+               collition: "fit",
                at: "right+2 bottom+3"
-       }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom");
+       }, {
+               top: 13,
+               left: 12
+       }, "with offset" );
+});
+
+test( "collision: fit, collision", function() {
+       expect( 2 + (scrollTopSupport() ? 1 : 0) );
 
        collisionTest2({
-               collision: "fit",
-               at: "left+2 top+3"
-       }, { top: 0, left: 0 }, "left top, positive offset" );
+               collision: "fit"
+       }, {
+               top: 0,
+               left: 0
+       }, "no offset" );
 
        collisionTest2({
                collision: "fit",
-               at: "left-2 top-3"
-       }, { top: 0, left: 0 }, "left top, negative offset" );
-});
+               at: "left+2 top+3"
+       }, {
+               top: 0,
+               left: 0
+       }, "with 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() {
-       collisionTest({
-               collision: "flip"
-       }, { top: $( window ).height(), left: $( window ).width() }, "left top" );
+test( "collision: flip, no collision", function() {
+       expect( 2 );
 
-       collisionTest2({
+       collisionTest({
                collision: "flip"
-       }, { top: -10, left: -10 }, "right bottom" );
-});
+       }, {
+               top: 10,
+               left: 10
+       }, "no offset" );
 
-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",
-               at: "left+2 top+3"
-       }, { top: -7, left: -8 }, "bottom, positive offset" );
+               collision: "flip"
+       }, {
+               top: 10,
+               left: 10
+       }, "no offset" );
 
        collisionTest2({
                collision: "flip",
-               at: "left-2 top-3"
-       }, { top: -13, left: -12 }, "right bottom, negative offset" );
+               at: "left+2 top+3"
+       }, {
+               top: 7,
+               left: 8
+       }, "with offset" );
 });
 
-test( "collision: none, no offset", function() {
-       collisionTest({
-               collision: "none"
-       }, { top: $( window ).height(), left: $( window ).width() }, "left top" );
+test( "collision: none, no collision", function() {
+       expect( 2 );
 
-       collisionTest2({
+       collisionTest({
                collision: "none"
-       }, { top: -10, left: -10 }, "moved to the right bottom" );
-});
+       }, {
+               top: 10,
+               left: 10
+       }, "no offset" );
 
-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",
-               at: "left+2 top+3"
-       }, { top: -7, left: -8 }, "left top, positive offset" );
+               collision: "none"
+       }, {
+               top: -6,
+               left: -6
+       }, "no offset" );
 
        collisionTest2({
                collision: "none",
-               at: "left-2 top-3"
-       }, { top: -13, left: -12 }, "left top, negative offset" );
+               at: "left+2 top+3"
+       }, {
+               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" );
+       }, {
+               top: 6,
+               left: 4
+       }, "left top" );
+});
+
+test( "collision: flip, with margin", function() {
+       expect( 3 );
 
        $( "#elx" ).css({
-               "margin-right": 15,
-               "margin-bottom": 15
+               marginTop: 6,
+               marginLeft: 4
        });
 
        collisionTest({
-               collision: "fit"
-       }, { top: $( window ).height() - 25, left: $( window ).width() - 25 }, "right bottom" );
+               collision: "flip"
+       }, {
+               top: 10,
+               left: 10
+       }, "left top" );
 
        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" );
+               collision: "flip"
+       }, {
+               top: 10,
+               left: 10
+       }, "right bottom" );
 
        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"
-       });
-
-       deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' );
-
-       elem.position({
-               my: "right center",
-               of: window,
-               collision: "flip",
-               at: "left center"
-       });
-
-       deepEqual( 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"
-       });
-
-       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' );
+               my: "left top"
+       }, {
+               top: 0,
+               left: 4
+       }, "right bottom" );
 });
 
-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( "within", function() {
+       expect( 4 );
 
-});
-
-test( "addClass: flipped bottom", function() {
-       var elem = $( "#elx" ).position( {
-               my: "left bottom",
-               of: window,
-               collision: "flip",
-               at: "right top"
-       });
+       collisionTest({
+               within: "#within",
+               collision: "fit"
+       }, {
+               top: 4,
+               left: 2
+       }, "fit - right bottom" );
 
-       deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' );
+       collisionTest2({
+               within: "#within",
+               collision: "fit"
+       }, {
+               top: 2,
+               left: 0
+       }, "fit - left top" );
 
-       elem.position( {
-               my: "left top",
-               of: window,
-               collision: "flip",
-               at: "right bottom"
-       });
+       collisionTest({
+               within: "#within",
+               collision: "flip"
+       }, {
+               top: 10,
+               left: -6
+       }, "fit - 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 (file)
index 187408c..0000000
+++ /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 ) );
index 2a7769107491cc2ae5ec0e87da7e3e91a61d85b3..8794812a86dd5f9e1dd3b904684c18bbe87b8ed7 100644 (file)
@@ -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
 -->
 
-<div id="qunit-fixture" style="top: 0; left: 0;">
+<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>
+       <div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px;"></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: 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 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>
 
-<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
-       <div id="fractions-element"></div>
+       <div id="bug-5280" style="height: 30px; width: 201px;">
+               <div style="width: 50px; height: 10px;"></div>
+       </div>
 </div>
 
 </body>