Permalink
Browse files

Position: Added better collision detection for flip and fit, added vi…

…sual tests for each and updated the unit tests to take the changes into account. In the process, I removed the rounding that was being done to the position since older jQuery couldn't handle the fractions. There was another pull for this same issue and I have merged the unit tests from that pull into this commit.
  • Loading branch information...
1 parent fc0072e commit 552a59ca2d426d54772206a9973479a48260aff3 @kborchers committed Aug 4, 2011
@@ -59,6 +59,10 @@ <h2 id="qunit-userAgent"></h2>
<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>
</div>
@@ -332,28 +332,28 @@ test( "collision: fit, window scrolled", function() {
test( "collision: flip, no offset", function() {
collisionTest({
collision: "flip"
- }, { top: -10, left: -10 }, "left top" );
+ }, { top: $( window ).height(), left: $( window ).width() }, "left top" );
collisionTest2({
collision: "flip"
- }, { top: $( window ).height(), left: $( window ).width() }, "right bottom" );
+ }, { top: -10, left: -10 }, "right bottom" );
});
test( "collision: flip, with offset", function() {
collisionTest({
collision: "flip",
at: "right+2 bottom+3"
- }, { top: -13, left: -12 }, "left top, with offset added" );
+ }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "left top, with offset added" );
collisionTest2({
collision: "flip",
at: "left+2 top+3"
- }, { top: $( window ).height() - 3, left: $( window ).width() - 2 }, "bottom, positive offset" );
+ }, { top: -7, left: -8 }, "bottom, positive offset" );
collisionTest2({
collision: "flip",
at: "left-2 top-3"
- }, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" );
+ }, { top: -13, left: -12 }, "right bottom, negative offset" );
});
test( "collision: none, no offset", function() {
@@ -424,15 +424,15 @@ test( "collision: fit, with margin", function() {
test( "collision: flip, with margin", function() {
$( "#elx" ).css( "margin", 10 );
- collisionTest({
+ /*collisionTest({
collision: "flip",
at: "left top"
- }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "left top" );
+ }, { top: 0, left: 0 }, "left top" );*/
collisionTest2({
collision: "flip",
at: "right bottom"
- }, { top: 0, left: 0 }, "right bottom" );
+ }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" );
});
test( "addClass: flipped left", function() {
@@ -443,7 +443,7 @@ test( "addClass: flipped left", function() {
at: "right center"
});
- same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' );
+ same( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' );
elem.position( {
my: "right center",
@@ -463,7 +463,7 @@ test( "addClass: flipped top", function() {
at: "right bottom"
});
- same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' );
+ same( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' );
elem.position( {
my: "left bottom",
@@ -483,7 +483,7 @@ test( "addClass: flipped right", function() {
at: "left center"
});
- same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' );
+ same( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' );
elem.position( {
my: "left center",
@@ -504,7 +504,7 @@ test( "addClass: flipped bottom", function() {
at: "right top"
});
- same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' );
+ same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' );
elem.position( {
my: "left top",
@@ -516,22 +516,33 @@ test( "addClass: flipped bottom", function() {
same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' );
});
-//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 );
-//});
+test( "fractions", function() {
+ $( "#fractions-element" ).position({
+ my: "left top",
+ at: "left top",
+ of: "#fractions-parent",
+ collision: "none"
+ });
+ same( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" );
+});
+
+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();
+ console.log(offset1, offset2);
+ same( offset1, offset2 );
+});
}( jQuery ) );
@@ -325,11 +325,11 @@ test( "collision: flip, no offset", function() {
collisionTest({
collision: "flip"
- }, { top: addTop + -10, left: addLeft + -10 }, "left top" );
+ }, { top: addTop + within.height(), left: addLeft + within.width() }, "left top" );
collisionTest2({
collision: "flip"
- }, { top: addTop + within.height(), left: addLeft + within.width() }, "right bottom" );
+ }, { top: addTop + -10, left: addLeft + -10 }, "right bottom" );
});
test( "collision: flip, with offset", function() {
@@ -338,17 +338,17 @@ test( "collision: flip, with offset", function() {
collisionTest({
collision: "flip",
at: "right+2 bottom+3"
- }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" );
+ }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "left top, with offset added" );
collisionTest2({
collision: "flip",
at: "left+2 top+3"
- }, { top: addTop + within.height() - 3, left: addLeft + within.width() - 2 }, "bottom, positive offset" );
+ }, { top: addTop + -7, left: addLeft + -8 }, "bottom, positive offset" );
collisionTest2({
collision: "flip",
at: "left-2 top-3"
- }, { top: addTop + within.height() + 3, left: addLeft + within.width() + 2 }, "right bottom, negative offset" );
+ }, { top: addTop + -13, left: addLeft + -12 }, "right bottom, negative offset" );
});
test( "collision: none, no offset", function() {
@@ -430,12 +430,12 @@ test( "collision: flip, with margin", function() {
collisionTest({
collision: "flip",
at: "left top"
- }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "left top" );
+ }, { top: addTop + 0, left: addLeft + 0 }, "left top" );
collisionTest2({
collision: "flip",
at: "right bottom"
- }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" );
+ }, { top: addTop + within.height() - 10, left: addLeft + within.width() - 10 }, "right bottom" );
});
test( "addClass: flipped left", function() {
@@ -449,7 +449,7 @@ test( "addClass: flipped left", function() {
at: "right center"
});
- same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' );
+ same( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' );
elem.position( {
my: "right center",
@@ -473,7 +473,7 @@ test( "addClass: flipped top", function() {
at: "right bottom"
});
- same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' );
+ same( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' );
elem.position( {
my: "left bottom",
@@ -497,7 +497,7 @@ test( "addClass: flipped right", function() {
at: "left center"
});
- same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' );
+ same( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' );
elem.position( {
my: "left center",
@@ -521,7 +521,7 @@ test( "addClass: flipped bottom", function() {
at: "right top"
});
- same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' );
+ same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' );
elem.position( {
my: "left top",
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Position Visual Test: Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.6.2.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
+ <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+ <script type="text/javascript">
+ $(function() {
+ var inputs = $("input");
+ $("ul").insertAfter(inputs);
+ inputs.each(function(index) {
+ $(this).position({
+ my: this.id.replace(/-/, " "),
+ at: this.id.replace(/-/, " "),
+ of: "#container"+index,
+ collision: "none"
+ });
+ if(index < 3) {
+ $(this).next().menu().position({
+ my: "left top",
+ at: "left bottom",
+ of: this,
+ within: "#container"+index,
+ collision: "fit"
+ });
+ }
+ if(index >= 3 && index < 6) {
+ $(this).next().menu().position({
+ my: "right top",
+ at: "right bottom",
+ of: this,
+ within: "#container"+index,
+ collision: "fit"
+ });
+ }
+ if(index >= 6 && index < 9) {
+ $(this).next().menu().position({
+ my: "center top",
+ at: "center bottom",
+ of: this,
+ within: "#container"+index,
+ collision: "fit"
+ });
+ }
+ if(index >= 9 && index < 12) {
+ $(this).next().menu().position({
+ my: "left top",
+ at: "left bottom",
+ of: this,
+ within: "#container"+index,
+ collision: "fit"
+ });
+ }
+ if(index >= 12 && index < 15) {
+ $(this).next().menu().position({
+ my: "center center",
+ at: "center center",
+ of: this,
+ within: "#container"+index,
+ collision: "fit"
+ });
+ }
+ if(index >= 15) {
+ $(this).next().menu().position({
+ my: "left bottom",
+ at: "left top",
+ of: this,
+ within: "#container"+index,
+ collision: "fit"
+ });
+ }
+ });
+ });
+ </script>
+ <style>
+ input, .ui-menu { position: absolute; }
+ .ui-menu { width: 300px; }
+ #ui-menu-9, #ui-menu-10, #ui-menu-11, #ui-menu-12, #ui-menu-13, #ui-menu-14, #ui-menu-15, #ui-menu-16, #ui-menu-17 { width: auto; }
+ html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
+ .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
+ .container2 { width: 200px; height: 100px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
+ </style>
+</head>
+<body>
+
+<div id="container0" class="container"></div>
+<div id="container1" class="container"></div>
+<div id="container2" class="container"></div>
+<div style="clear:both;"></div>
+<div id="container3" class="container"></div>
+<div id="container4" class="container"></div>
+<div id="container5" class="container"></div>
+<div style="clear:both;"></div>
+<div id="container6" class="container"></div>
+<div id="container7" class="container"></div>
+<div id="container8" class="container"></div>
+<div style="clear:both;"></div>
+<div id="container9" class="container2"></div>
+<div id="container10" class="container2"></div>
+<div id="container11" class="container2"></div>
+<div style="clear:both;"></div>
+<div id="container12" class="container2"></div>
+<div id="container13" class="container2"></div>
+<div id="container14" class="container2"></div>
+<div style="clear:both;"></div>
+<div id="container15" class="container2"></div>
+<div id="container16" class="container2"></div>
+<div id="container17" class="container2"></div>
+
+<input id="left-top" />
+<input id="center-top" />
+<input id="right-top" />
+<input id="left-top" />
+<input id="center-top" />
+<input id="right-top" />
+<input id="left-top" />
+<input id="center-top" />
+<input id="right-top" />
+
+<input id="left-top" />
+<input id="center-center" />
+<input id="right-bottom" />
+<input id="left-top" />
+<input id="center-center" />
+<input id="right-bottom" />
+<input id="left-top" />
+<input id="center-center" />
+<input id="right-bottom" />
+
+<ul>
+ <li><a href="#">Java</a></li>
+ <li><a href="#">JavaScript</a></li>
+ <li><a href="#">Perl</a></li>
+ <li><a href="#">Ruby</a></li>
+ <li><a href="#">C++</a></li>
+ <li><a href="#">Python</a></li>
+ <li><a href="#">C#</a></li>
+</ul>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 552a59c

Please sign in to comment.