Merge pull request #178 from dmitri-gb/fix-detection-in-zero-size-elements

Detect text fragments in elements with 0 width/height and visible overflow

Author: tomayac

src/text-fragment-utils.js

@@ -593,8 +593,10 @@ const isNodeVisible =
         const nodeStyle = window.getComputedStyle(elt);
         // If the node is not rendered, just skip it.
         if (nodeStyle.visibility === 'hidden' || nodeStyle.display === 'none' ||
-            parseInt(nodeStyle.height, 10) === 0 ||
-            parseInt(nodeStyle.width, 10) === 0 ||
+            parseInt(nodeStyle.height, 10) === 0 &&
+                nodeStyle.overflowY != 'visible' ||
+            parseInt(nodeStyle.width, 10) === 0 &&
+                nodeStyle.overflowX != 'visible' ||
             parseInt(nodeStyle.opacity, 10) === 0) {
           return false;
         }

test/unit/hidden-overflow.html

@@ -0,0 +1,9 @@
+<div>
+  <p style="float: left">Target text-fragment 1</p>
+</div>
+<div style="overflow: hidden; height: 0">
+  <p>Target text-fragment 2</p>
+</div>
+<div style="overflow: clip">
+  <p style="float: left">Target text-fragment 3</p>
+</div>

test/unit/text-fragment-utils-test.js

@@ -1138,4 +1138,35 @@ describe('TextFragmentUtils', function() {
            utils.forTesting.acceptTextNodeIfVisibleInRange(divNode, range);
        expect(filterOutput).toEqual(NodeFilter.FILTER_REJECT);
      });
+
+  it('Ignores zero-width/height elements with hidden overflow', function() {
+    document.body.innerHTML = __html__['hidden-overflow.html'];
+    {
+      const directives = utils.getFragmentDirectives(
+          '#:~:text=Target%20text-fragment%201',
+      );
+      const parsedDirectives = utils.parseFragmentDirectives(directives);
+      const processedDirectives =
+          utils.processFragmentDirectives(parsedDirectives)['text'];
+      expect(processedDirectives[0].length).toBe(1);
+    }
+    {
+      const directives = utils.getFragmentDirectives(
+          '#:~:text=Target%20text-fragment%202',
+      );
+      const parsedDirectives = utils.parseFragmentDirectives(directives);
+      const processedDirectives =
+          utils.processFragmentDirectives(parsedDirectives)['text'];
+      expect(processedDirectives[0].length).toBe(0);
+    }
+    {
+      const directives = utils.getFragmentDirectives(
+          '#:~:text=Target%20text-fragment%203',
+      );
+      const parsedDirectives = utils.parseFragmentDirectives(directives);
+      const processedDirectives =
+          utils.processFragmentDirectives(parsedDirectives)['text'];
+      expect(processedDirectives[0].length).toBe(0);
+    }
+  });
 });