Merge pull request #1141 from atomiks/fix/relative-html

fix: relative html
floating-ui · Jun 27, 2020 · c595ef3 · c595ef3
2 parents 38914aa + d6a1b8f
commit c595ef3
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 1 deletion.
diff --git a/src/dom-utils/getOffsetParent.js b/src/dom-utils/getOffsetParent.js
@@ -5,6 +5,7 @@ import getComputedStyle from './getComputedStyle';
 import { isHTMLElement } from './instanceOf';
 import isTableElement from './isTableElement';
 import getParentNode from './getParentNode';
+import getDocumentElement from './getDocumentElement';
 
 function getTrueOffsetParent(element: Element): ?Element {
   if (
@@ -15,7 +16,21 @@ function getTrueOffsetParent(element: Element): ?Element {
     return null;
   }
 
-  return element.offsetParent;
+  const offsetParent = element.offsetParent;
+
+  if (offsetParent) {
+    const html = getDocumentElement(offsetParent);
+
+    if (
+      getNodeName(offsetParent) === 'body' &&
+      getComputedStyle(offsetParent).position === 'static' &&
+      getComputedStyle(html).position !== 'static'
+    ) {
+      return html;
+    }
+  }
+
+  return offsetParent;
 }
 
 // `.offsetParent` reports `null` for fixed elements, while absolute elements

diff --git a/...hots__/relative-html-test-js-should-position-the-popper-on-the-right-1-snap.png b/...hots__/relative-html-test-js-should-position-the-popper-on-the-right-1-snap.png
diff --git a/tests/functional/relative-html.test.js b/tests/functional/relative-html.test.js
@@ -0,0 +1,12 @@
+/**
+ * @jest-environment puppeteer
+ * @flow
+ */
+import { screenshot } from '../utils/puppeteer.js';
+
+it('should position the popper on the right', async () => {
+  const page = await browser.newPage();
+  await page.goto(`${TEST_URL}/relative-html.html`);
+
+  expect(await screenshot(page)).toMatchImageSnapshot();
+});
diff --git a/tests/visual/relative-html.html b/tests/visual/relative-html.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html> <title>Basic Visual Test</title>
+
+<style>
+  @import '/reset.css';
+  html {
+    position: relative;
+    margin: 30px;
+  }
+
+  #reference {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    width: 200px;
+    height: 200px;
+    background-color: red;
+    box-shadow: inset 0 0 0 1px black;
+  }
+
+  #popper {
+    width: 100px;
+    height: 100px;
+    background-color: rebeccapurple;
+    box-shadow: inset 0 0 0 1px black;
+  }
+</style>
+
+<div id="reference">Reference Box</div>
+<div id="popper">Popper Box</div>
+
+<script type="module">
+  import { createPopper } from './dist/popper.js';
+  const reference = document.querySelector('#reference');
+  const popper = document.querySelector('#popper');
+
+  window.instance = createPopper(reference, popper, {
+    placement: 'right',
+  });
+</script>