Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Added more unit tests for offset. Fixed an offset issue relating to t…
…able header cells in Opera
- Loading branch information
1 parent
279f77e
commit 58c640fb1ce09a03399a3a441716cca23f3f2d04
Showing
with
209 additions
and 15 deletions.
- +8 −12 src/offset.js
- +32 −0 test/data/offset/fixed.html
- +38 −0 test/data/offset/scroll.html
- +28 −0 test/data/offset/static.html
- +42 −0 test/data/offset/table.html
- +61 −3 test/unit/offset.js
There are no files selected for viewing
| @@ -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> |
| @@ -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> |
| @@ -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> |
| @@ -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> |