Skip to content

Commit

Permalink
Added more unit tests for offset. Fixed an offset issue relating to t…
Browse files Browse the repository at this point in the history 
…able header cells in Opera
  • Loading branch information
@brandonaaron
brandonaaron committed Dec 12, 2007
1 parent 279f77e commit 58c640f
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 15 deletions.
20 changes: 8 additions & 12 deletions src/offset.js
View file
Expand Up @@ -5,7 +5,7 @@ jQuery.fn.offset = function() {
var left = 0, top = 0, elem = this[0], results; var left = 0, top = 0, elem = this[0], results;


if ( elem ) with ( jQuery.browser ) { if ( elem ) with ( jQuery.browser ) {
var parent = elem.parentNode, var parent = elem.parentNode,
offsetChild = elem, offsetChild = elem,
offsetParent = elem.offsetParent, offsetParent = elem.offsetParent,
doc = elem.ownerDocument, doc = elem.ownerDocument,
Expand All @@ -17,10 +17,8 @@ jQuery.fn.offset = function() {
var box = elem.getBoundingClientRect(); var box = elem.getBoundingClientRect();


// Add the document scroll offsets // Add the document scroll offsets
add( add(box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft), box.top + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop));
box.top + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop)
);


// IE adds the HTML element's border, by default it is medium which is 2px // IE adds the HTML element's border, by default it is medium which is 2px
// IE 6 and 7 quirks mode the border width is overwritable by the following css html { border: 0; } // IE 6 and 7 quirks mode the border width is overwritable by the following css html { border: 0; }
Expand All @@ -35,7 +33,7 @@ jQuery.fn.offset = function() {


// Initial element offsets // Initial element offsets
add( elem.offsetLeft, elem.offsetTop ); add( elem.offsetLeft, elem.offsetTop );

// Get parent offsets // Get parent offsets
while ( offsetParent ) { while ( offsetParent ) {
// Add offsetParent offsets // Add offsetParent offsets
Expand All @@ -58,8 +56,8 @@ jQuery.fn.offset = function() {


// Get parent scroll offsets // Get parent scroll offsets
while ( parent.tagName && !/^body|html$/i.test(parent.tagName) ) { while ( parent.tagName && !/^body|html$/i.test(parent.tagName) ) {
// Remove parent scroll UNLESS that parent is inline or a table-row to work around Opera inline/table scrollLeft/Top bug // Remove parent scroll UNLESS that parent is inline or a table to work around Opera inline/table scrollLeft/Top bug
if ( !/^inline|table-row.*$/i.test(jQuery.css(parent, "display")) ) if ( !/^inline|table.*$/i.test(jQuery.css(parent, "display")) )
// Subtract parent scroll offsets // Subtract parent scroll offsets
add( -parent.scrollLeft, -parent.scrollTop ); add( -parent.scrollLeft, -parent.scrollTop );


Expand All @@ -79,10 +77,8 @@ jQuery.fn.offset = function() {


// Add the document scroll offsets if position is fixed // Add the document scroll offsets if position is fixed
if ( fixed ) if ( fixed )
add( add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft), Math.max(doc.documentElement.scrollTop, doc.body.scrollTop));
Math.max(doc.documentElement.scrollTop, doc.body.scrollTop)
);
} }


// Return an object with top and left properties // Return an object with top and left properties
Expand Down
32 changes: 32 additions & 0 deletions test/data/offset/fixed.html
View file
@@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>fixed</title>
<style type="text/css" media="screen">
body { margin: 1px; padding: 5px; }
div.fixed { position: fixed; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: hidden; }
#fixed-1 { top: 0; left: 0; }
#fixed-2 { top: 20px; left: 20px; }
#forceScroll { width: 5000px; height: 5000px; }
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script type="text/javascript" src="../../../dist/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
window.scrollTo(1000,1000);
$('.fixed').click(function() {
$('#marker').css( $(this).offset() );
return false;
});
});
</script>
</head>
<body>
<div id="fixed-1" class="fixed"></div>
<div id="fixed-2" class="fixed"></div>
<div id="forceScroll"></div>
<div id="marker"></div>
</body>
</html>
38 changes: 38 additions & 0 deletions test/data/offset/scroll.html
View file
@@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>scroll</title>
<style type="text/css" media="screen">
body { margin: 1px; padding: 5px; }
div.scroll { position: relative; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: auto; }
#scroll-1 { top: 0; left: 0; }
#scroll-1-1 { top: 1px; left: 1px; }
#scroll-1-1-1 { top: 1px; left: 1px; }
#forceScroll { width: 5000px; height: 5000px; }
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script type="text/javascript" src="../../../dist/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
window.scrollTo(1000,1000);
$('#scroll-1')[0].scrollLeft = 5;
$('#scroll-1')[0].scrollTop = 5;
$('.scroll').click(function() {
$('#marker').css( $(this).offset() );
return false;
});
});
</script>
</head>
<body>
<div id="scroll-1" class="scroll">
<div id="scroll-1-1" class="scroll">
<div id="scroll-1-1-1" class="scroll"></div>
</div>
</div>
<div id="forceScroll"></div>
<div id="marker"></div>
</body>
</html>
28 changes: 28 additions & 0 deletions test/data/offset/static.html
View file
@@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>static</title>
<style type="text/css" media="screen">
body { margin: 1px; padding: 5px; }
div.static { position: static; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: hidden; }
#static-2 { top: 20px; left: 20px; }
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script type="text/javascript" src="../../../dist/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('.static').click(function() {
$('#marker').css( $(this).offset() );
return false;
});
});
</script>
</head>
<body>
<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>
</body>
</html>
42 changes: 42 additions & 0 deletions test/data/offset/table.html
View file
@@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>table</title>
<style type="text/css" media="screen">
body { margin: 1px; padding: 5px; }
table { border: 2px solid #000; }
th, td { border: 1px solid #000; width: 100px; height: 100px; }
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script type="text/javascript" src="../../../dist/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('table, th, td').click(function() {
$('#marker').css( $(this).offset() );
return false;
});
});
</script>
</head>
<body>
<table id="table-1">
<thead>
<tr valign="top">
<th id="th-1">th-1</th>
<th id="th-2">th-2</th>
<th id="th-3">th-3</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td id="td-1">td-1</td>
<td id="td-2">td-2</td>
<td id="td-3">td-3</td>
</tr>
</tbody>
</table>
<div id="marker"></div>
</body>
</html>
64 changes: 61 additions & 3 deletions test/unit/offset.js
View file
Expand Up @@ -41,14 +41,72 @@ testwin("absolute", function() {
testwin("relative", function() { testwin("relative", function() {
var $w = testwin["relative"].$; var $w = testwin["relative"].$;


equals( $w('#relative-1').offset().top, jQuery.browser.msie ? 6 : 7, "$('#relative-1').offset().top" ); 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" ); equals( $w('#relative-1').offset().left, 7, "$('#relative-1').offset().left" );


equals( $w('#relative-1-1').offset().top, jQuery.browser.msie ? 13 : 15, "$('#relative-1-1').offset().top" ); 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" ); equals( $w('#relative-1-1').offset().left, 15, "$('#relative-1-1').offset().left" );


equals( $w('#relative-2').offset().top, jQuery.browser.msie ? 141 : 142, "$('#relative-2').offset().top" ); 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" ); equals( $w('#relative-2').offset().left, 27, "$('#relative-2').offset().left" );


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

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

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" );

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" );

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" );

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" );

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

if ( !$.browser.msie || ($.browser.msie && parseInt($.browser.version) > 6) )
testwin("fixed", function() {
var $w = testwin["fixed"].$;

equals( $w('#fixed-1').offset().top, 1001, "$('#fixed-1').offset().top" );
equals( $w('#fixed-1').offset().left, $.browser.msie ? 994 : 1001, "$('#fixed-1').offset().left" );

equals( $w('#fixed-2').offset().top, 1021, "$('#fixed-2').offset().top" );
equals( $w('#fixed-2').offset().left, $.browser.msie ? 1014 : 1021, "$('#fixed-2').offset().left" );

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

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

equals( $w('#table-1').offset().top, 6, "$('#table-1').offset().top" );
equals( $w('#table-1').offset().left, 6, "$('#table-1').offset().left" );

equals( $w('#th-1').offset().top, 10, "$('#table-1').offset().top" );
equals( $w('#th-1').offset().left, 10, "$('#table-1').offset().left" );

equals( $w('#th-2').offset().top, 10, "$('#table-1').offset().top" );
equals( $w('#th-2').offset().left, 116, "$('#table-1').offset().left" );

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

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

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" );

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" );

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

0 comments on commit 58c640f

Please sign in to comment.