Skip to content
Permalink
Browse files
Added some unit tests for position method. Fixed issue with position …
…in IE.
  • Loading branch information
brandonaaron committed May 15, 2008
1 parent 9a76522 commit de6520b
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 9 deletions.
@@ -91,8 +91,8 @@ jQuery.fn.offset = function() {
}

function add(l, t) {
left += parseInt(l) || 0;
top += parseInt(t) || 0;
left += parseInt(l, 10) || 0;
top += parseInt(t, 10) || 0;
}

return results;
@@ -107,17 +107,17 @@ jQuery.fn.extend({
// Get *real* offsetParent
var offsetParent = this.offsetParent(),

// Get correct offsets
offset = this.offset(),
parentOffset = offsetParent.offset();
// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();

// Subtract element margins
offset.top -= num( this, 'marginTop' );
offset.left -= num( this, 'marginLeft' );
offset.top -= parseInt( jQuery.curCSS( this[0], 'marginTop', true ), 10 ) || 0;
offset.left -= parseInt( jQuery.curCSS( this[0], 'marginLeft', true ), 10 ) || 0;

// Add offsetParent borders
parentOffset.top += num( offsetParent, 'borderTopWidth' );
parentOffset.left += num( offsetParent, 'borderLeftWidth' );
parentOffset.top += parseInt( jQuery.curCSS( offsetParent[0], 'borderTopWidth', true ), 10 ) || 0;
parentOffset.left += parseInt( jQuery.curCSS( offsetParent[0], 'borderLeftWidth', true ), 10 ) || 0;

// Subtract the two offsets
results = {
@@ -12,12 +12,15 @@
#absolute-1-1-1 { top: 1px; left: 1px; }
#absolute-2 { top: 19px; left: 19px; }
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
p.instructions { position: absolute; bottom: 0; }
</style>
<script type="text/javascript" src="../../../dist/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('.absolute').click(function() {
$('#marker').css( $(this).offset() );
var pos = $(this).position();
$(this).css({ top: pos.top, left: pos.left });
return false;
});
});
@@ -31,5 +34,6 @@
</div>
<div id="absolute-2" class="absolute">absolute-2</div>
<div id="marker"></div>
<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
</body>
</html>
@@ -15,6 +15,8 @@
$(function() {
$('.relative').click(function() {
$('#marker').css( $(this).offset() );
var pos = $(this).position();
$(this).css({ position: 'absolute', top: pos.top, left: pos.left });
return false;
});
});
@@ -24,5 +26,6 @@
<div id="relative-1" class="relative"><div id="relative-1-1" class="relative"><div id="relative-1-1-1" class="relative"></div></div></div>
<div id="relative-2" class="relative"></div>
<div id="marker"></div>
<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
</body>
</html>
@@ -34,5 +34,6 @@
</div>
<div id="forceScroll"></div>
<div id="marker"></div>
<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
</body>
</html>
@@ -24,5 +24,6 @@
<div id="static-1" class="static"><div id="static-1-1" class="static"><div id="static-1-1-1" class="static"></div></div></div>
<div id="static-2" class="static"></div>
<div id="marker"></div>
<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
</body>
</html>
@@ -38,5 +38,6 @@
</tbody>
</table>
<div id="marker"></div>
<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
</body>
</html>
@@ -35,39 +35,89 @@ testwin("absolute", function() {
equals( $w('#absolute-2').offset().top, 20, "$('#absolute-2').offset().top" );
equals( $w('#absolute-2').offset().left, 20, "$('#absolute-2').offset().left" );


equals( $w('#absolute-1').position().top, 0, "$('#absolute-1').position().top" );
equals( $w('#absolute-1').position().left, 0, "$('#absolute-1').position().left" );

equals( $w('#absolute-1-1').position().top, 1, "$('#absolute-1-1').position().top" );
equals( $w('#absolute-1-1').position().left, 1, "$('#absolute-1-1').position().left" );

equals( $w('#absolute-1-1-1').position().top, 1, "$('#absolute-1-1-1').position().top" );
equals( $w('#absolute-1-1-1').position().left, 1, "$('#absolute-1-1-1').position().left" );

equals( $w('#absolute-2').position().top, 19, "$('#absolute-2').position().top" );
equals( $w('#absolute-2').position().left, 19, "$('#absolute-2').position().left" );

testwin["absolute"].close();
});

testwin("relative", function() {
var $w = testwin["relative"].$;

// IE is collapsing the top margin of 1px
equals( $w('#relative-1').offset().top, $.browser.msie ? 6 : 7, "$('#relative-1').offset().top" );
equals( $w('#relative-1').offset().left, 7, "$('#relative-1').offset().left" );

// IE is collapsing the top margin of 1px
equals( $w('#relative-1-1').offset().top, $.browser.msie ? 13 : 15, "$('#relative-1-1').offset().top" );
equals( $w('#relative-1-1').offset().left, 15, "$('#relative-1-1').offset().left" );

// IE is collapsing the top margin of 1px
equals( $w('#relative-2').offset().top, $.browser.msie ? 141 : 142, "$('#relative-2').offset().top" );
equals( $w('#relative-2').offset().left, 27, "$('#relative-2').offset().left" );


// IE is collapsing the top margin of 1px
equals( $w('#relative-1').position().top, $.browser.msie ? 5 : 6, "$('#relative-1').position().top" );
equals( $w('#relative-1').position().left, 6, "$('#relative-1').position().left" );

// IE is collapsing the top margin of 1px
equals( $w('#relative-1-1').position().top, $.browser.msie ? 4 : 5, "$('#relative-1-1').position().top" );
equals( $w('#relative-1-1').position().left, 5, "$('#relative-1-1').position().left" );

// IE is collapsing the top margin of 1px
equals( $w('#relative-2').position().top, $.browser.msie ? 140 : 141, "$('#relative-2').position().top" );
equals( $w('#relative-2').position().left, 26, "$('#relative-2').position().left" );

testwin["relative"].close();
});

testwin("static", function() {
var $w = testwin["static"].$;

// IE is collapsing the top margin of 1px
equals( $w('#static-1').offset().top, $.browser.msie ? 6 : 7, "$('#static-1').offset().top" );
equals( $w('#static-1').offset().left, 7, "$('#static-1').offset().left" );

// IE is collapsing the top margin of 1px
equals( $w('#static-1-1').offset().top, $.browser.msie ? 13 : 15, "$('#static-1-1').offset().top" );
equals( $w('#static-1-1').offset().left, 15, "$('#static-1-1').offset().left" );

// IE is collapsing the top margin of 1px
equals( $w('#static-1-1-1').offset().top, $.browser.msie ? 20 : 23, "$('#static-1-1-1').offset().top" );
equals( $w('#static-1-1-1').offset().left, 23, "$('#static-1-1-1').offset().left" );

// IE is collapsing the top margin of 1px
equals( $w('#static-2').offset().top, $.browser.msie ? 121 : 122, "$('#static-2').offset().top" );
equals( $w('#static-2').offset().left, 7, "$('#static-2').offset().left" );


// IE is collapsing the top margin of 1px
equals( $w('#static-1').position().top, $.browser.msie ? 5 : 6, "$('#static-1').position().top" );
equals( $w('#static-1').position().left, 6, "$('#static-1').position().left" );

// IE is collapsing the top margin of 1px
equals( $w('#static-1-1').position().top, $.browser.msie ? 12 : 14, "$('#static-1-1').position().top" );
equals( $w('#static-1-1').position().left, 14, "$('#static-1-1').position().left" );

// IE is collapsing the top margin of 1px
equals( $w('#static-1-1-1').position().top, $.browser.msie ? 19 : 22, "$('#static-1-1-1').position().top" );
equals( $w('#static-1-1-1').position().left, 22, "$('#static-1-1-1').position().left" );

// IE is collapsing the top margin of 1px
equals( $w('#static-2').position().top, $.browser.msie ? 120 : 121, "$('#static-2').position().top" );
equals( $w('#static-2').position().left, 6, "$('#static-2').position().left" );

testwin["static"].close();
});

@@ -102,9 +152,11 @@ testwin("table", function() {
testwin("scroll", function() {
var $w = testwin["scroll"].$;

// IE is collapsing the top margin of 1px
equals( $w('#scroll-1').offset().top, $.browser.msie ? 6 : 7, "$('#scroll-1').offset().top" );
equals( $w('#scroll-1').offset().left, 7, "$('#scroll-1').offset().left" );

// IE is collapsing the top margin of 1px
equals( $w('#scroll-1-1').offset().top, $.browser.msie ? 9 : 11, "$('#scroll-1-1').offset().top" );
equals( $w('#scroll-1-1').offset().left, 11, "$('#scroll-1-1').offset().left" );

0 comments on commit de6520b

Please sign in to comment.