From 7dcfae7da2242f807e053cd4bac8d0799c38c86f Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Fri, 13 Apr 2012 15:05:43 +0200 Subject: Position: Extract getWithinInfo method, use that for tests that call getScrollInfo directly, pass within info to that, gets rid of a few more DOM accesses --- tests/unit/position/position_core_within.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'tests/unit/position') diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 9dc91238f..c9670f8ff 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -277,7 +277,7 @@ test( "collision: fit, no offset", function() { 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" ); + }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -292,7 +292,7 @@ test( "collision: fit, with offset", function() { 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"); + }, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -397,7 +397,7 @@ test( "collision: fit, with margin", function() { 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" ); + }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -410,7 +410,7 @@ test( "collision: fit, with margin", function() { 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" ); + }, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -423,7 +423,7 @@ test( "collision: fit, with margin", function() { 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" ); + }, { top: addTop + of.position().top + of.height() - 15 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).height, left: addLeft + of.position().left + of.width() - 15 - $.position.getScrollInfo( $.position.getWithinInfo( within ) ).width }, "right bottom" ); collisionTest2({ collision: "fit" -- cgit v1.2.3 From 1a0f2e46593ec9e3fbca51175d342210a9996fba Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 24 Apr 2012 16:17:02 +0200 Subject: Position: Extend unit test for using to check feedback properties --- tests/unit/position/position_core.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) (limited to 'tests/unit/position') diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 0ebcabef3..b567b7299 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -255,11 +255,30 @@ test( "offsets", function() { }); test( "using", function() { - expect( 6 ); + expect( 10 ); var count = 0, elems = $( "#el1, #el2" ), - expectedPosition = { top: 40, left: 40 }, + 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", @@ -269,11 +288,14 @@ test( "using", function() { elems.position({ my: "left top", - at: "left top", + at: "center+10 bottom", of: "#parentx", - using: function( position ) { + 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++; } }); -- cgit v1.2.3 From 252352e12473034dc86917bc9c7c1f764e6f7eb4 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 24 Apr 2012 17:23:25 +0200 Subject: Position: Fix scrollbar calculcation to correctly take overflow:scroll into account, along with unit tests --- tests/unit/position/position.html | 2 +- tests/unit/position/position_core.js | 61 ++++++++++++++++++++++++++++++ tests/visual/position/position_within.html | 2 +- ui/jquery.ui.position.js | 11 +++--- 4 files changed, 69 insertions(+), 7 deletions(-) (limited to 'tests/unit/position') diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 518e1f960..2a6e43d36 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -43,7 +43,7 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6
-
+
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index b567b7299..f15ea48cc 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -591,6 +591,67 @@ test( "within", function() { }, "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( $("
").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 ); diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index 7d8813582..692cb1067 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -97,7 +97,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } - $( ".demo" ).append("
").css("overflow","auto"); + $( ".demo" ).css("overflow","scroll"); $( ".positionable" ).css( "opacity", 0.5 ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index b8764f2bb..d4d09bee4 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -58,12 +58,13 @@ $.position = { getScrollInfo: function( within ) { var overflowX = within.isWindow ? "" : within.element.css( "overflow-x" ), overflowY = within.isWindow ? "" : within.element.css( "overflow-y" ), - scrollbarWidth = overflowX === "auto" || overflowX === "scroll" ? $.position.scrollbarWidth() : 0, - scrollbarHeight = overflowY === "auto" || overflowY === "scroll" ? $.position.scrollbarWidth() : 0; - + hasOverflowX = overflowX === "scroll" || + ( overflowX === "auto" && within.width < within.element[0].scrollWidth ), + hasOverflowY = overflowY === "scroll" || + ( overflowY === "auto" && within.height < within.element[0].scrollHeight ); return { - height: within.height < within.element[0].scrollHeight ? scrollbarHeight : 0, - width: within.width < within.element[0].scrollWidth ? scrollbarWidth : 0 + width: hasOverflowX ? $.position.scrollbarWidth() : 0, + height: hasOverflowY ? $.position.scrollbarWidth() : 0 }; }, getWithinInfo: function( element ) { -- cgit v1.2.3