Skip to content

J
jquery
Commit 58c640fb authored by Brandon Aaron's avatar Brandon Aaron
Browse files
Options

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

parent 279f77e9
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 15 deletions
src/offset.js
View file @ 58c640fb
......@@ -5,7 +5,7 @@ jQuery.fn.offset = function() {
var left = 0, top = 0, elem = this[0], results;
if ( elem ) with ( jQuery.browser ) {
var parent = elem.parentNode,
var parent = elem.parentNode,
offsetChild = elem,
offsetParent = elem.offsetParent,
doc = elem.ownerDocument,
......@@ -17,10 +17,8 @@ jQuery.fn.offset = function() {
var box = elem.getBoundingClientRect();
// Add the document scroll offsets
add(
box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
box.top + Math.max(doc.documentElement.scrollTop, doc.body.scrollTop)
);
add(box.left + Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
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 6 and 7 quirks mode the border width is overwritable by the following css html { border: 0; }
......@@ -35,7 +33,7 @@ jQuery.fn.offset = function() {
// Initial element offsets
add( elem.offsetLeft, elem.offsetTop );
// Get parent offsets
while ( offsetParent ) {
// Add offsetParent offsets
......@@ -58,8 +56,8 @@ jQuery.fn.offset = function() {
// Get parent scroll offsets
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
if ( !/^inline|table-row.*$/i.test(jQuery.css(parent, "display")) )
// Remove parent scroll UNLESS that parent is inline or a table to work around Opera inline/table scrollLeft/Top bug
if ( !/^inline|table.*$/i.test(jQuery.css(parent, "display")) )
// Subtract parent scroll offsets
add( -parent.scrollLeft, -parent.scrollTop );
......@@ -79,10 +77,8 @@ jQuery.fn.offset = function() {
// Add the document scroll offsets if position is fixed
if ( fixed )
add(
Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
Math.max(doc.documentElement.scrollTop, doc.body.scrollTop)
);
add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
Math.max(doc.documentElement.scrollTop, doc.body.scrollTop));
}
// Return an object with top and left properties
......
test/data/offset/fixed.html 0 → 100644
View file @ 58c640fb
<!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>
\ No newline at end of file
test/data/offset/scroll.html 0 → 100644
View file @ 58c640fb
<!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>
\ No newline at end of file
test/data/offset/static.html 0 → 100644
View file @ 58c640fb
<!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>
\ No newline at end of file
test/data/offset/table.html 0 → 100644
View file @ 58c640fb
<!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>
\ No newline at end of file
test/unit/offset.js
View file @ 58c640fb
......@@ -41,14 +41,72 @@ testwin("absolute", function() {
testwin("relative", function() {
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-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-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" );
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();
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment