fix: correctly collect elements in absolute container (#373)

web-infra-dev · Feb 10, 2025 · 2f2400d · 2f2400d
1 parent efa4263
commit 2f2400d
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 5 deletions.
diff --git a/packages/shared/src/extractor/util.ts b/packages/shared/src/extractor/util.ts
@@ -330,6 +330,19 @@ export function visibleRect(
 
   // check if the element is hidden by an ancestor
   let parent: HTMLElement | Node | null = el;
+  const parentUntilNonStatic = (currentNode: HTMLElement | Node | null) => {
+    // find a parent element that is not static
+    let parent = currentNode?.parentElement;
+    while (parent) {
+      const style = currentWindow.getComputedStyle(parent);
+      if (style.position !== 'static') {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return null;
+  };
+
   while (parent && parent !== currentDocument.body) {
     if (!(parent instanceof currentWindow.HTMLElement)) {
       parent = parent.parentElement;
@@ -354,10 +367,15 @@ export function visibleRect(
       }
     }
     // if the parent is a fixed element, stop the search
-    if (parentStyle.position === 'fixed') {
+    if (parentStyle.position === 'fixed' || parentStyle.position === 'sticky') {
       break;
     }
-    parent = parent.parentElement;
+
+    if (parentStyle.position === 'absolute') {
+      parent = parentUntilNonStatic(parent);
+    } else {
+      parent = parent.parentElement;
+    }
   }
 
   return {

diff --git a/packages/web-integration/tests/unit-test/__snapshots__/web-extractor.test.ts.snap b/packages/web-integration/tests/unit-test/__snapshots__/web-extractor.test.ts.snap
@@ -602,6 +602,20 @@ exports[`extractor > basic 1`] = `
     },
     "content": "",
   },
+  {
+    "attributes": {
+      "htmlTagName": "<div>",
+      "nodeType": "TEXT Node",
+    },
+    "content": "AAA",
+  },
+  {
+    "attributes": {
+      "htmlTagName": "<div>",
+      "nodeType": "TEXT Node",
+    },
+    "content": "This should be collected",
+  },
   {
     "attributes": {
       "htmlTagName": "",
@@ -2938,6 +2952,72 @@ exports[`extractor > basic 2`] = `
           "children": [],
           "node": null,
         },
+        {
+          "children": [
+            {
+              "children": [],
+              "node": null,
+            },
+            {
+              "children": [
+                {
+                  "children": [],
+                  "node": {
+                    "attributes": {
+                      "htmlTagName": "<div>",
+                      "nodeType": "TEXT Node",
+                    },
+                    "content": "AAA",
+                    "indexId": 78,
+                  },
+                },
+              ],
+              "node": null,
+            },
+            {
+              "children": [],
+              "node": null,
+            },
+            {
+              "children": [
+                {
+                  "children": [],
+                  "node": null,
+                },
+              ],
+              "node": null,
+            },
+            {
+              "children": [],
+              "node": null,
+            },
+            {
+              "children": [
+                {
+                  "children": [],
+                  "node": {
+                    "attributes": {
+                      "htmlTagName": "<div>",
+                      "nodeType": "TEXT Node",
+                    },
+                    "content": "This should be collected",
+                    "indexId": 79,
+                  },
+                },
+              ],
+              "node": null,
+            },
+            {
+              "children": [],
+              "node": null,
+            },
+          ],
+          "node": null,
+        },
+        {
+          "children": [],
+          "node": null,
+        },
       ],
       "node": null,
     },
@@ -2957,7 +3037,7 @@ exports[`extractor > basic 2`] = `
                   "nodeType": "TEXT Node",
                 },
                 "content": "Child Page",
-                "indexId": 79,
+                "indexId": 81,
               },
             },
           ],
@@ -2977,7 +3057,7 @@ exports[`extractor > basic 2`] = `
                   "nodeType": "TEXT Node",
                 },
                 "content": "This is a child page.",
-                "indexId": 80,
+                "indexId": 82,
               },
             },
           ],
@@ -2997,7 +3077,7 @@ exports[`extractor > basic 2`] = `
                   "nodeType": "TEXT Node",
                 },
                 "content": "Click me",
-                "indexId": 81,
+                "indexId": 83,
               },
             },
           ],

diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/index.html b/packages/web-integration/tests/unit-test/fixtures/web-extractor/index.html
@@ -348,6 +348,17 @@ <h3>Form</h3>
             <iframe src="https://www.bytedance.com" frameborder="0" width="400px" height="200px"></iframe>
         </div>
     </div>
+
+
+    <div style="overflow: hidden; width: 100px; height: 100px; background-color: #ccc;">
+        <div style="width: 120px; height: 120px; background-color: #EEE;">AAA</div>
+        <div style="width: 120px; height: 120px; background-color: #EEE;">BBB</div>
+        <div style="position: absolute; bottom: 200px; right: 0; width: 120px; height: 120px; background-color: #CCC;">
+            This should be collected
+        </div>
+
+
+    </div>
 </body>
 
 </html>
diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/input.png b/packages/web-integration/tests/unit-test/fixtures/web-extractor/input.png
diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/output.png b/packages/web-integration/tests/unit-test/fixtures/web-extractor/output.png