diff options
| -rw-r--r-- | tests/unit/position/position.html | 2 | ||||
| -rw-r--r-- | tests/unit/position/position_core.js | 61 | ||||
| -rw-r--r-- | tests/visual/position/position_within.html | 2 | ||||
| -rw-r--r-- | ui/jquery.ui.position.js | 11 |
4 files changed, 69 insertions, 7 deletions
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 <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="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> 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( $("<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 ); 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("<div style='width:5000px;height:5000px;' />").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 ) { |