Skip to content

Commit

Permalink
Position: Added better collision detection for flip and fit, added vi…
Browse files Browse the repository at this point in the history 
…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. Also added flipfit!
  • Loading branch information
@kborchers
kborchers committed Aug 13, 2011
1 parent ac04462 commit 80bbebd
Show file tree
Hide file tree
Showing 8 changed files with 588 additions and 176 deletions.
2 changes: 2 additions & 0 deletions demos/position/default.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -142,11 +142,13 @@
<select id="collision_horizontal"> <select id="collision_horizontal">
<option value="flip">flip</option> <option value="flip">flip</option>
<option value="fit">fit</option> <option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option> <option value="none">none</option>
</select> </select>
<select id="collision_vertical"> <select id="collision_vertical">
<option value="flip">flip</option> <option value="flip">flip</option>
<option value="fit">fit</option> <option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option> <option value="none">none</option>
</select> </select>
</div> </div>
Expand Down
54 changes: 29 additions & 25 deletions tests/unit/position/position.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<script src="../testsuite.js"></script> <script src="../testsuite.js"></script>


<script src="position_core.js"></script> <script src="position_core.js"></script>
<script src="position_core_within.js"></script> <script src="position_core_within.js"></script>


<script src="../swarminject.js"></script> <script src="../swarminject.js"></script>
</head> </head>
Expand All @@ -36,30 +36,34 @@ <h2 id="qunit-userAgent"></h2>
--> -->


<div id="qunit-fixture" style="top: 0; left: 0; z-index:1"> <div id="qunit-fixture" style="top: 0; left: 0; z-index:1">
<div id="within-container"> <div id="within-container">
<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></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="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="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 style="position: absolute; top: 0px; left: 0px">
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> <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 id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
</div> </div>


<div style="position: absolute; top: 200px; left: 100px;"> <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 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 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-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 id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
</div> </div>
</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 id="bug-5280" style="height: 30px; width: 201px;">
<div style="width: 50px; height: 10px;"></div> <div style="width: 50px; height: 10px;"></div>
</div> </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> </div>


</body> </body>
Expand Down
72 changes: 41 additions & 31 deletions tests/unit/position/position_core.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -332,28 +332,28 @@ test( "collision: fit, window scrolled", function() {
test( "collision: flip, no offset", function() { test( "collision: flip, no offset", function() {
collisionTest({ collisionTest({
collision: "flip" collision: "flip"
}, { top: -10, left: -10 }, "left top" ); }, { top: $( window ).height(), left: $( window ).width() }, "left top" );


collisionTest2({ collisionTest2({
collision: "flip" collision: "flip"
}, { top: $( window ).height(), left: $( window ).width() }, "right bottom" ); }, { top: -10, left: -10 }, "right bottom" );
}); });


test( "collision: flip, with offset", function() { test( "collision: flip, with offset", function() {
collisionTest({ collisionTest({
collision: "flip", collision: "flip",
at: "right+2 bottom+3" 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({ collisionTest2({
collision: "flip", collision: "flip",
at: "left+2 top+3" at: "left+2 top+3"
}, { top: $( window ).height() - 3, left: $( window ).width() - 2 }, "bottom, positive offset" ); }, { top: -7, left: -8 }, "bottom, positive offset" );


collisionTest2({ collisionTest2({
collision: "flip", collision: "flip",
at: "left-2 top-3" 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() { test( "collision: none, no offset", function() {
Expand Down Expand Up @@ -427,12 +427,12 @@ test( "collision: flip, with margin", function() {
collisionTest({ collisionTest({
collision: "flip", collision: "flip",
at: "left top" at: "left top"
}, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "left top" ); }, { top: 0, left: 0 }, "left top" );


collisionTest2({ collisionTest2({
collision: "flip", collision: "flip",
at: "right bottom" at: "right bottom"
}, { top: 0, left: 0 }, "right bottom" ); }, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" );
}); });


test( "addClass: flipped left", function() { test( "addClass: flipped left", function() {
Expand All @@ -443,15 +443,15 @@ test( "addClass: flipped left", function() {
at: "right center" 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( { elem.position( {
my: "right center", my: "right center",
of: window, of: window,
collision: "flip", collision: "flip",
at: "left center" at: "left center"
}) })

same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' ); same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' );
}); });


Expand All @@ -463,8 +463,8 @@ test( "addClass: flipped top", function() {
at: "right bottom" 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( { elem.position( {
my: "left bottom", my: "left bottom",
of: window, of: window,
Expand All @@ -483,7 +483,7 @@ test( "addClass: flipped right", function() {
at: "left center" 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( { elem.position( {
my: "left center", my: "left center",
Expand All @@ -504,8 +504,8 @@ test( "addClass: flipped bottom", function() {
at: "right top" 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( { elem.position( {
my: "left top", my: "left top",
of: window, of: window,
Expand All @@ -516,22 +516,32 @@ test( "addClass: flipped bottom", function() {
same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' ); same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' );
}); });


//test( "bug #5280: consistent results (avoid fractional values)", function() { test( "fractions", function() {
// var wrapper = $( "#bug-5280" ), $( "#fractions-element" ).position({
// elem = wrapper.children(), my: "left top",
// offset1 = elem.position({ at: "left top",
// my: "center", of: "#fractions-parent",
// at: "center", collision: "none"
// of: wrapper, });
// collision: "none" same( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" );
// }).offset(), });
// offset2 = elem.position({
// my: "center", test( "bug #5280: consistent results (avoid fractional values)", function() {
// at: "center", var wrapper = $( "#bug-5280" ),
// of: wrapper, elem = wrapper.children(),
// collision: "none" offset1 = elem.position({
// }).offset(); my: "center",
// same( offset1, offset2 ); at: "center",
//}); of: wrapper,
collision: "none"
}).offset(),
offset2 = elem.position({
my: "center",
at: "center",
of: wrapper,
collision: "none"
}).offset();
same( offset1, offset2 );
});


}( jQuery ) ); }( jQuery ) );
Loading

0 comments on commit 80bbebd

Please sign in to comment.