Change the way we detect whether an element has changed position/size…

… to use getBoundingClientRect rather than offsetLeft/Top/etc. -- this prevents situations where the element's position relative to its positioning container actually changes but its offsetLeft/Top stay the same. Closes #15.
lojjic · Jun 3, 2010 · daefc05 · daefc05
1 parent 559c451
commit daefc05
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 5 deletions.
diff --git a/sources/event_handlers.js b/sources/event_handlers.js
@@ -10,11 +10,11 @@ var lastW, lastH, lastX, lastY,
  */
 function update() {
     init();
-    var el = element,
-        x = el.offsetLeft,
-        y = el.offsetTop,
-        w = el.offsetWidth,
-        h = el.offsetHeight,
+    var rect = element.getBoundingClientRect(),
+        x = rect.left,
+        y = rect.top,
+        w = rect.right - x,
+        h = rect.bottom - y,
         i, len;
 
     if( x !== lastX || y !== lastY ) {

diff --git a/tests/margin-auto-tests.html b/tests/margin-auto-tests.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>PIE Position After Window Resize</title>
+
+    <meta name="robots" content="noindex, nofollow" />
+
+    <style type="text/css" media="screen">
+        #wrapper {
+            width: 700px;
+            margin: 20px auto;
+        }
+
+        #test,
+        #control {
+            border: 10px solid #000;
+            -moz-border-radius: 5px; /* FF1+ */
+            -webkit-border-radius: 5px; /* Saf3+, Chrome */
+            -khtml-border-radius: 5px; /* Konqueror */
+            border-radius: 5px; /* Standard. IE9 */
+            margin: 10px;
+            padding:10px;
+        }
+
+        #test {
+            behavior: url(../build/PIE.htc);
+            border-color: red;
+        }
+
+        #control {
+            border-color: green;
+        }
+
+    </style>
+</head>
+<body>
+    <h1>PIE Position After Window Resize</h1>
+
+    <p>Resize Window.</p>
+
+    <h2 id="expected-behavior">Expected Behavior</h2>
+
+    <p>Borders should update position with box.</p>
+
+    <div id="wrapper">
+        <div id="test">
+            PIE.
+        </div><!--/test-->
+
+        <div id="control">
+            No PIE.
+        </div><!--/test-->
+    </div><!--/wrapper-->
+</body>
+</html>