Merge pull request #1616 from mrmr1993/detect-inline-inline-fontSize-elements

Fix for #1554.

2 files changed, 25 insertions, 4 deletions

diff --git a/lib/dom_utils.coffee b/lib/dom_utils.coffee
index 30b9f68c..7c47179c 100644
--- a/lib/dom_utils.coffee
+++ b/lib/dom_utils.coffee
@@ -62,17 +62,29 @@ DomUtils =
     # Note: this call will be expensive if we modify the DOM in between calls.
     clientRects = (Rect.copy clientRect for clientRect in element.getClientRects())
 
+    # Inline elements with font-size: 0px; will declare a height of zero, even if a child with non-zero
+    # font-size contains text.
+    isInlineZeroHeight = ->
+      elementComputedStyle = window.getComputedStyle element, null
+      isInlineZeroFontSize = (0 == elementComputedStyle.getPropertyValue("display").indexOf "inline") and
+        (elementComputedStyle.getPropertyValue("font-size") == "0px")
+      # Override the function to return this value for the rest of this context.
+      isInlineZeroHeight = -> isInlineZeroFontSize
+      isInlineZeroFontSize
+
     for clientRect in clientRects
       # If the link has zero dimensions, it may be wrapping visible but floated elements. Check for this.
       if (clientRect.width == 0 or clientRect.height == 0) and testChildren
         for child in element.children
           computedStyle = window.getComputedStyle(child, null)
-          # Ignore child elements which are not floated and not absolutely positioned for parent elements with
-          # zero width/height
+          # Ignore child elements which are not floated and not absolutely positioned for parent elements
+          # with zero width/height, as long as the case described at isInlineZeroHeight does not apply.
           # NOTE(mrmr1993): This ignores floated/absolutely positioned descendants nested within inline
           # children.
-          continue if (computedStyle.getPropertyValue('float') == 'none' &&
-            computedStyle.getPropertyValue('position') != 'absolute')
+          continue if (computedStyle.getPropertyValue("float") == "none" and
+            computedStyle.getPropertyValue("position") != "absolute" and
+            not (clientRect.height == 0 and isInlineZeroHeight() and
+              0 == computedStyle.getPropertyValue("display").indexOf "inline"))
           childClientRect = @getVisibleClientRect child, true
           continue if childClientRect == null or childClientRect.width < 3 or childClientRect.height < 3
           return childClientRect
diff --git a/tests/dom_tests/dom_utils_test.coffee b/tests/dom_tests/dom_utils_test.coffee
index e98dc958..ce8fa370 100644
--- a/tests/dom_tests/dom_utils_test.coffee
+++ b/tests/dom_tests/dom_utils_test.coffee
@@ -73,6 +73,15 @@ context "Check visibility",
     """
     assert.equal null, (DomUtils.getVisibleClientRect (document.getElementById 'foo'), true)
 
+  should "detect font-size: 0; and display: inline; links when their children are display: inline", ->
+    # This test represents the minimal test case covering issue #1554.
+    document.getElementById("test-div").innerHTML = """
+    <a id='foo' style='display: inline; font-size: 0px;'>
+      <div style='display: inline; font-size: 16px;'>test</div>
+    </a>
+    """
+    assert.isTrue (DomUtils.getVisibleClientRect (document.getElementById 'foo'), true) != null
+
   should "detect links inside opacity:0 elements as visible", ->
     # XXX This is an expected failure. See issue #16.
     document.getElementById("test-div").innerHTML = """