git.asbjorn.biz / jquery.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 279f77e)
Added more unit tests for offset. Fixed an offset issue relating to table header...
authorBrandon Aaron <brandon.aaron@gmail.com>
Wed, 12 Dec 2007 16:55:55 +0000 (16:55 +0000)
committerBrandon Aaron <brandon.aaron@gmail.com>
Wed, 12 Dec 2007 16:55:55 +0000 (16:55 +0000)
src/offset.js patch | blob | history
test/data/offset/fixed.html [new file with mode: 0644] patch | blob
test/data/offset/scroll.html [new file with mode: 0644] patch | blob
test/data/offset/static.html [new file with mode: 0644] patch | blob
test/data/offset/table.html [new file with mode: 0644] patch | blob
test/unit/offset.js patch | blob | history

diff --git a/src/offset.js b/src/offset.js
index e74556c..2570358 100644 (file)
--- a/src/offset.js
+++ b/src/offset.js
@@ -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
diff --git a/test/data/offset/fixed.html b/test/data/offset/fixed.html
new file mode 100644 (file)
index 0000000..1585576
--- /dev/null
+++ b/test/data/offset/fixed.html
@@ -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>
\ No newline at end of file
diff --git a/test/data/offset/scroll.html b/test/data/offset/scroll.html
new file mode 100644 (file)
index 0000000..fa21e6b
--- /dev/null
+++ b/test/data/offset/scroll.html
@@ -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>
\ No newline at end of file
diff --git a/test/data/offset/static.html b/test/data/offset/static.html
new file mode 100644 (file)
index 0000000..a18469e
--- /dev/null
+++ b/test/data/offset/static.html
@@ -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>
\ No newline at end of file
diff --git a/test/data/offset/table.html b/test/data/offset/table.html
new file mode 100644 (file)
index 0000000..f10b76d
--- /dev/null
+++ b/test/data/offset/table.html
@@ -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>
\ No newline at end of file
diff --git a/test/unit/offset.js b/test/unit/offset.js
index 857e089..328442a 100644 (file)
--- a/test/unit/offset.js
+++ b/test/unit/offset.js
@@ -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
JQuery