Add tests for position's `within`

diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html
index 4f2e87e080bf524a149462ca4ec5aa3cd29e1d3f..6e4373172f6f3617630beef8c2757690fa720354 100644 (file)
--- a/tests/unit/position/position.html
+++ b/tests/unit/position/position.html
@@ -16,6 +16,7 @@
        <script src="../testsuite.js"></script>
 
        <script src="position_core.js"></script>
+    <script src="position_core_within.js"></script>
 
        <script src="../swarminject.js"></script>
 </head>
@@ -34,29 +35,34 @@ 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;">
-       <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-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="bug-5280" style="height: 30px; width: 201px;">
+               <div style="width: 50px; height: 10px;"></div>
+        </div>
+    </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>
 
 </body>
 </html>

diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js
new file mode 100644 (file)
index 0000000..0ece93b
--- /dev/null
+++ b/tests/unit/position/position_core_within.js
@@ -0,0 +1,560 @@
+(function( $ ) {
+
+$("#within-container").show();
+
+function scrollTopSupport() {
+    $( window ).scrollTop( 1 );
+    return $( window ).scrollTop() === 1;
+}
+var addTop = -20,
+    addLeft = -20;
+    
+$.fn.addOffsets = function() {
+    var elOffset = this.offset(),
+        offset = $("#within-container").offset();
+
+    elOffset.top -= offset.top;
+    elOffset.left -= offset.left;
+    
+    return {top: elOffset.top - offset.top, left: elOffset.left - offset.left };
+};
+
+test( "within: my, at, of", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left top",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" );
+
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left bottom",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" );
+
+       $( "#elx" ).position({
+               my: "left",
+               at: "bottom",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" );
+
+       $( "#elx" ).position({
+               my: "left foo",
+               at: "bar baz",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" );
+});
+
+test( "within: multiple elements", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       var elements = $( "#el1, #el2" );
+       var result = elements.position({
+               my: "left top",
+               at: "left bottom",
+               of: "#parent",
+               collision: "none",
+        within: $("#within-container")
+       });
+
+       same( result, elements );
+       var expected = { top: addTop + 10, left: addLeft + 4 };
+       elements.each(function() {
+               same( $( this ).addOffsets(), expected );
+       });
+});
+
+test( "within: positions", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       var definitions = [];
+       var offsets = {
+               left: 0,
+               center: 3,
+               right: 6,
+               top: 0,
+               bottom: 6
+       };
+       var start = { left: 4, top: 4 };
+       $.each( [ 0, 1 ], function( my ) {
+               $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
+                       $.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
+                               definitions.push({
+                                       my: my ? horizontal + " " + vertical : "left top",
+                                       at: !my ? horizontal + " " + vertical : "left top",
+                                       result: {
+                                               top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]),
+                                               left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ])
+                                       }
+                               });
+                       });
+               });
+       });
+       var el = $( "#el1" );
+       $.each( definitions, function( index, definition ) {
+               el.position({
+                       my: definition.my,
+                       at: definition.at,
+                       of: "#parent",
+                       collision: "none",
+            within: $("#within-container")
+               });
+               same( el.addOffsets(), definition.result,
+                       "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) );
+       });
+});
+
+test( "within: of", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+            
+    
+    
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left top",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" );
+
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left bottom",
+               of: $( "#parentx"),
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" );
+
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left top",
+               of: $( "#parentx" )[ 0 ],
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" );
+
+    // these tests are not valid for "within" since of is not contained by within.
+    /*
+    $( "#elx" ).position({
+               my: "right bottom",
+               at: "right bottom",
+               of: document,
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), {
+               top: addTop + $( document ).height() - 10,
+               left: addLeft + $( document ).width() - 10
+       }, "document" );
+
+       $( "#elx" ).position({
+               my: "right bottom",
+               at: "right bottom",
+               of: $( document ),
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), {
+               top: addTop + $( document ).height() - 10,
+               left: addLeft + $( document ).width() - 10
+       }, "document as jQuery object" );
+
+       $( window ).scrollTop( 0 );
+
+       $( "#elx" ).position({
+               my: "right bottom",
+               at: "right bottom",
+               of: window,
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), {
+               top: addTop + $( window ).height() - 10,
+               left: addLeft + $( window ).width() - 10
+       }, "window" );
+
+       $( "#elx" ).position({
+               my: "right bottom",
+               at: "right bottom",
+               of: $( window ),
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), {
+               top: addTop + $( window ).height() - 10,
+               left: addLeft + $( window ).width() - 10
+       }, "window as jQuery object" );
+
+       if ( scrollTopSupport() ) {
+               $( window ).scrollTop( 500 ).scrollLeft( 200 );
+               $( "#elx" ).position({
+                       my: "right bottom",
+                       at: "right bottom",
+                       of: window,
+                       collision: "none",
+            within: $("#within-container")
+               });
+               same( $( "#elx" ).addOffsets(), {
+                       top: addTop + $( window ).height() + 500 - 10,
+                       left: addLeft + $( window ).width() + 200 - 10
+               }, "window, scrolled" );
+               $( window ).scrollTop( 0 ).scrollLeft( 0 );
+       }*/
+
+       var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left top",
+               of: event,
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).offset(), {
+               top: 300,
+               left: 200
+       }, "event - left top, left top" );
+
+       event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } );
+       $( "#elx" ).position({
+               my: "left top",
+               at: "right bottom",
+               of: event,
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).offset(), {
+               top: 600,
+               left: 400
+       }, "event - left top, right bottom" );
+});
+
+test( "within:offsets", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left+10 bottom+10",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" );
+
+       $( "#elx" ).position({
+               my: "left+10 top-10",
+               at: "left bottom",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" );
+
+       $( "#elx" ).position({
+               my: "left top",
+               at: "left+50% bottom-10%",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" );
+
+       $( "#elx" ).position({
+               my: "left-30% top+50%",
+               at: "left bottom",
+               of: "#parentx",
+               collision: "none",
+        within: $("#within-container")
+       });
+       same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" );
+});
+
+test( "within: using", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       expect( 6 );
+
+       var count = 0,
+               elems = $( "#el1, #el2" ),
+               expectedPosition = { top: addTop + 40, left: addLeft + 40 },
+               originalPosition = elems.position({
+                       my: "right bottom",
+                       at: "rigt bottom",
+                       of: "#parentx",
+                       collision: "none",
+            within: $("#within-container")
+               }).addOffsets();
+
+       elems.position({
+               my: "left top",
+               at: "left top",
+               of: "#parentx",
+               using: function( position ) {
+            position.top -= $("#within-container").offset().top;
+            position.left -= $("#within-container").offset().left;
+                       same( this, elems[ count ], "correct context for call #" + count );
+                       same( position, expectedPosition, "correct position for call #" + count );
+                       count++;
+               },
+        within: $("#within-container")
+       });
+
+       elems.each(function() {
+               same( $( this ).addOffsets(), originalPosition, "elements not moved" );
+       });
+});
+
+function collisionTest( config, result, msg ) {
+       var elem = $( "#elx" ).position( $.extend({
+               my: "left top",
+               at: "right bottom",
+               of: $("#within-container")[0],
+        within: $("#within-container")
+       }, config ) );
+       same( elem.addOffsets(), result, msg );
+}
+
+function collisionTest2( config, result, msg ) {
+       collisionTest( $.extend({
+               my: "right bottom",
+               at: "left top"
+       }, config ), result, msg );
+}
+
+test( "within: collision: fit, no offset", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       collisionTest({
+               collision: "fit"
+       }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" );
+
+       collisionTest2({
+               collision: "fit"
+       }, { top: addTop + 0, left: addLeft + 0 }, "left top" );
+});
+
+
+test( "within: collision: fit, with offset", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       collisionTest({
+               collision: "fit",
+               at: "right+2 bottom+3"
+       }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom");
+
+       collisionTest2({
+               collision: "fit",
+               at: "left+2 top+3"
+       }, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" );
+
+       collisionTest2({
+               collision: "fit",
+               at: "left-2 top-3"
+       }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" );
+});
+
+test( "within: collision: fit, window scrolled", function() {
+       if ( scrollTopSupport() ) {
+        $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"});
+        
+            
+        
+        var win = $("#within-container").css("overflow", "auto");
+        win.scrollTop( 300 ).scrollLeft( 150 );
+        
+               collisionTest({
+                       collision: "fit",
+                       at: "left-100 top-100"
+               }, { top: addTop + 300, left: addLeft + 150 }, "top left" );
+               collisionTest2({
+                       collision: "fit",
+                       at: "right+100 bottom+100"
+               }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" );
+               win.scrollTop( 0 ).scrollLeft( 0 );
+
+       }
+
+});
+        
+test( "within: collision: flip, no offset", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       collisionTest({
+               collision: "flip"
+       }, { top: addTop + -10, left: addLeft + -10 }, "left top" );
+
+       collisionTest2({
+               collision: "flip"
+       }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" );
+});
+
+test( "within: collision: flip, with offset", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       collisionTest({
+               collision: "flip",
+               at: "right+2 bottom+3"
+       }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" );
+
+       collisionTest2({
+               collision: "flip",
+               at: "left+2 top+3"
+       }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" );
+
+       collisionTest2({
+               collision: "flip",
+               at: "left-2 top-3"
+       }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" );
+});
+
+test( "within: collision: none, no offset", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       collisionTest({
+               collision: "none"
+       }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" );
+
+       collisionTest2({
+               collision: "none"
+       }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" );
+});
+
+test( "within: collision: none, with offset", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       collisionTest({
+               collision: "none",
+               at: "right+2 bottom+3"
+       }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" );
+
+       collisionTest2({
+               collision: "none",
+               at: "left+2 top+3"
+       }, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" );
+
+       collisionTest2({
+               collision: "none",
+               at: "left-2 top-3"
+       }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" );
+});
+
+test( "within: collision: fit, with margin", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       $( "#elx" ).css( "margin", 10 );
+
+       collisionTest({
+               collision: "fit"
+       }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" );
+
+       collisionTest2({
+               collision: "fit"
+       }, { top: addTop + 10, left: addLeft + 10 }, "left top" );
+
+       $( "#elx" ).css({
+               "margin-left": 5,
+               "margin-top": 5
+       });
+
+       collisionTest({
+               collision: "fit"
+       }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" );
+
+       collisionTest2({
+               collision: "fit"
+       }, { top: addTop + 5, left: addLeft + 5 }, "left top" );
+
+       $( "#elx" ).css({
+               "margin-right": 15,
+               "margin-bottom": 15
+       });
+
+       collisionTest({
+               collision: "fit"
+       }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" );
+
+       collisionTest2({
+               collision: "fit"
+       }, { top: addTop + 5, left: addLeft + 5 }, "left top" );
+});
+
+test( "within: collision: flip, with margin", function() {
+    $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"});
+    
+        
+    
+       $( "#elx" ).css( "margin", 10 );
+
+       collisionTest({
+               collision: "flip",
+               at: "left top"
+       }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" );
+
+       collisionTest2({
+               collision: "flip",
+               at: "right bottom"
+       }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" );
+});
+
+//test( "bug #5280: consistent results (avoid fractional values)", function() {
+//     var wrapper = $( "#bug-5280" ),
+//             elem = wrapper.children(),
+//             offset1 = elem.position({
+//                     my: "center",
+//                     at: "center",
+//                     of: wrapper,
+//                     collision: "none"
+//             }).offset(),
+//             offset2 = elem.position({
+//                     my: "center",
+//                     at: "center",
+//                     of: wrapper,
+//                     collision: "none"
+//             }).offset();
+//     same( offset1, offset2 );
+//});
+
+
+
+}( jQuery ) );

diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html
index da97eb7e13a50855141efac87981c81485a2b961..e53e9ddf6081ccd0888677afd5ec186deff776cb 100644 (file)
--- a/tests/visual/position/position_within.html
+++ b/tests/visual/position/position_within.html
@@ -76,6 +76,7 @@
                     collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
                 });
             }
+            $( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 );
 
             $( ".positionable" ).css( "opacity", 0.5 );