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 de6520b50e481ba588e9021abcab16d06ea61141
@@ -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.
You can’t perform that action at this time.