deac/jquery
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added more unit tests for offset. Fixed an offset issue relating to table header cells in Opera

Browse source
This commit is contained in:
Brandon Aaron 2007-12-12 16:55:55 +00:00
parent 279f77e960
commit 58c640fb1c
6 changed files with 209 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/offset.js
View file

@ -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; }
@ -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 );
@ -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

32
test/data/offset/fixed.html Normal file
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
test/data/offset/scroll.html Normal file
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
test/data/offset/static.html Normal file
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
test/data/offset/table.html Normal file
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
test/unit/offset.js
View file

@ -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();
});