Skip to content

Commit

Permalink
Added some unit tests for position method. Fixed issue with position …
Browse files Browse the repository at this point in the history
…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.
18 changes: 9 additions & 9 deletions src/offset.js
Expand Up @@ -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;
Expand All @@ -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 = {
Expand Down
4 changes: 4 additions & 0 deletions test/data/offset/absolute.html
Expand Up @@ -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;
});
});
Expand All @@ -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>
3 changes: 3 additions & 0 deletions test/data/offset/relative.html
Expand Up @@ -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;
});
});
Expand All @@ -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>
1 change: 1 addition & 0 deletions test/data/offset/scroll.html
Expand Up @@ -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>
1 change: 1 addition & 0 deletions test/data/offset/static.html
Expand Up @@ -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>
1 change: 1 addition & 0 deletions test/data/offset/table.html
Expand Up @@ -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>
52 changes: 52 additions & 0 deletions test/unit/offset.js
Expand Up @@ -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();
});

Expand Down Expand Up @@ -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" );

Expand Down

0 comments on commit de6520b

Please sign in to comment.