Fix visibility tests

2 files changed, 25 insertions, 8 deletions

diff --git a/linkHints.js b/linkHints.js
index e73fc932..a2d28dda 100644
--- a/linkHints.js
+++ b/linkHints.js
@@ -84,12 +84,16 @@ function getVisibleClickableElements() {
     if (boundingRect.width < 3 || boundingRect.height < 3)
       continue;
 
-    // eliminate invisible elements
+    // eliminate invisible elements (see test_harnesses/visibility_test.html)
     var computedStyle = window.getComputedStyle(element, null);
     if (computedStyle.getPropertyValue('visibility') != 'visible' ||
         computedStyle.getPropertyValue('display') == 'none')
       continue;
 
+    var clientRect = element.getClientRects()[0];
+    if (!clientRect)
+        continue;
+
     visibleElements.push(element);
   }
   return visibleElements;
diff --git a/test_harnesses/visibility_test.html b/test_harnesses/visibility_test.html
index ffc008bd..5fa4d728 100644
--- a/test_harnesses/visibility_test.html
+++ b/test_harnesses/visibility_test.html
@@ -25,14 +25,27 @@
       }
     }
     /*
-     * Determines whether this element is on screen and visible.
-     * See this for some helpful discussion:
-     * http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript
+     * Determine whether elements are visible.
+     * Inspired by Vimperator.
      */
     function isVisible(element) {
-      var boundingRect = element.getBoundingClientRect();
-      var elementFromPoint = document.elementFromPoint(boundingRect.left, boundingRect.top);
-      return elementFromPoint == element;
+      // eliminate offscreen elements (case 4)
+      var rect = element.getBoundingClientRect();
+      if (!rect || rect.top > window.innerHeight || rect.bottom < 0 || rect.left > window.innerWidth || rect.right < 0)
+          return false;
+
+      // this catches cases 2, 3, & 5
+      var computedStyle = window.getComputedStyle(element, null);
+      if (computedStyle.getPropertyValue('visibility') != 'visible' || 
+          computedStyle.getPropertyValue('display') == 'none')
+          return false;
+
+      // this catches cases 3 & 6
+      var clientRect = element.getClientRects()[0];
+      if (!clientRect)
+        return false;
+
+      return true;
     }
   </script>
 </head>
@@ -55,4 +68,4 @@
   <div style="opacity:0">
     <span id="div7true" style="opacity:0"></span>
   </div>
-</html>
\ No newline at end of file
+</html>