Added some unit tests for position method. Fixed issue with position in IE.

diff --git a/src/offset.js b/src/offset.js
index a35fed5613e6c723a01be4231f47d416b3d0be33..b77a0cdb5349967ed210bd0a4f36a7b9deeba888 100644 (file)
--- a/src/offset.js
+++ b/src/offset.js
@@ -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;
@@ -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 = {

diff --git a/test/data/offset/absolute.html b/test/data/offset/absolute.html
index 55d223d65837338a47d106fb97960c78c0ad8d96..3bbc8417dcb7df9dab599cb82868f6c5fea5ffa4 100644 (file)
--- a/test/data/offset/absolute.html
+++ b/test/data/offset/absolute.html
@@ -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;
                                });
                        });
@@ -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>
\ No newline at end of file

diff --git a/test/data/offset/relative.html b/test/data/offset/relative.html
index 8a2aa939419766394a6e1e37f0fd27d1625eee94..89aae83e4ae405366ccc4de6dd25a8ef6550899a 100644 (file)
--- a/test/data/offset/relative.html
+++ b/test/data/offset/relative.html
@@ -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;
                                });
                        });
@@ -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>
\ No newline at end of file

diff --git a/test/data/offset/scroll.html b/test/data/offset/scroll.html
index fa21e6b9f35d7899f986201a30358a04e17ca313..d65e0b9af307ea5f945c0a7b4cede73e0a16d80d 100644 (file)
--- a/test/data/offset/scroll.html
+++ b/test/data/offset/scroll.html
@@ -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>
\ No newline at end of file

diff --git a/test/data/offset/static.html b/test/data/offset/static.html
index a18469e1f634a42739d19737cab80b42600d35fa..bce715ea00effc1fa855af4e363046fd76c886f4 100644 (file)
--- a/test/data/offset/static.html
+++ b/test/data/offset/static.html
@@ -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>
\ No newline at end of file

diff --git a/test/data/offset/table.html b/test/data/offset/table.html
index f10b76d5da9081ee40c747c26f5ec2d2f4d4c1dc..de4c728eb1bb89066ee608b8e996d059bf3591fc 100644 (file)
--- a/test/data/offset/table.html
+++ b/test/data/offset/table.html
@@ -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>
\ No newline at end of file

diff --git a/test/unit/offset.js b/test/unit/offset.js
index 328442ac1ed9f239f6c83aa5324ab6674542b905..55c3c436a68c6977fed8602907e168809c283f50 100644 (file)
--- a/test/unit/offset.js
+++ b/test/unit/offset.js
@@ -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();
 });
 
@@ -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" );