test: add offsetParent shadow dom polyfill snapshots (#2166)

Co-authored-by: GitHub Actions <github-actions@github.com>
floating-ui · Feb 5, 2023 · 5ef80de · 5ef80de
1 parent 06ef1e0
commit 5ef80de
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 7 deletions.
diff --git a/packages/dom/src/platform.ts b/packages/dom/src/platform.ts
@@ -9,7 +9,7 @@ import {getRectRelativeToOffsetParent} from './utils/getRectRelativeToOffsetPare
 import {getScale} from './utils/getScale';
 import {isElement} from './utils/is';
 
-export const platform: Platform = {
+export const platform: Required<Platform> = {
   getClippingRect,
   convertOffsetParentRelativeRectToViewportRelativeRect,
   isElement,

diff --git a/packages/dom/test/functional/shadow-dom.test.ts b/packages/dom/test/functional/shadow-dom.test.ts
@@ -34,3 +34,22 @@ useCases.forEach((useCase) => {
     });
   });
 });
+
+test('relative position host polyfill', async ({page}) => {
+  await page.goto('http://localhost:1234/shadow-DOM');
+
+  await click(
+    page,
+    '[data-testid="use-case-relative-host-with-shadowed-floating-child"]'
+  );
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `without-polyfill.png`
+  );
+
+  await click(page, '[data-testid="polyfill-true"]');
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `with-polyfill.png`
+  );
+});
diff --git a/packages/dom/test/functional/shadow-dom.test.ts-snapshots/with-polyfill-linux.png b/packages/dom/test/functional/shadow-dom.test.ts-snapshots/with-polyfill-linux.png
diff --git a/...ges/dom/test/functional/shadow-dom.test.ts-snapshots/without-polyfill-linux.png b/...ges/dom/test/functional/shadow-dom.test.ts-snapshots/without-polyfill-linux.png
diff --git a/packages/dom/test/visual/spec/ShadowDOM.tsx b/packages/dom/test/visual/spec/ShadowDOM.tsx
@@ -28,10 +28,13 @@ export function ShadowDOM() {
   const [cssPosition, setCssPosition] = useState<CSSPosition>('static');
   const [strategy, setStrategy] = useState<Strategy>('absolute');
   const [withTransform, setWithTransform] = useState<boolean>(false);
+  const [polyfill, setPolyfill] = useState('false');
+
   const UseCaseTag = useCase;
   const hostOptions = {
     placement,
     strategy,
+    polyfill,
     style: {
       position: cssPosition,
       transform: withTransform ? 'translate(0)' : 'none',
@@ -138,6 +141,22 @@ export function ShadowDOM() {
           </button>
         ))}
       </Controls>
+
+      <h3>Polyfill</h3>
+      <Controls>
+        {['true', 'false'].map((strBool) => (
+          <button
+            key={strBool}
+            data-testid={`polyfill-${strBool}`}
+            onClick={() => setPolyfill(strBool)}
+            style={{
+              backgroundColor: strBool === polyfill ? 'black' : '',
+            }}
+          >
+            {strBool}
+          </button>
+        ))}
+      </Controls>
     </>
   );
 }
diff --git a/packages/dom/test/visual/utils/shadowDOM.ts b/packages/dom/test/visual/utils/shadowDOM.ts
@@ -2,6 +2,7 @@ import {
   autoUpdate,
   computePosition,
   Placement,
+  platform,
   Strategy,
 } from '@floating-ui/dom';
 import {HTMLAttributes} from 'react';
@@ -11,6 +12,7 @@ interface FloatingUICustomElement {
   floating: HTMLElement;
   placement: Placement;
   strategy: Strategy;
+  polyfill: string;
   cleanup: () => void;
 }
 
@@ -42,13 +44,14 @@ export function defineElements(): void {
       implements FloatingUICustomElement
     {
       static get observedAttributes() {
-        return ['placement', 'strategy', 'style'];
+        return ['placement', 'strategy', 'style', 'polyfill'];
       }
 
       reference: HTMLElement;
       floating: HTMLElement;
       placement: Placement = defaultOptions.placement;
       strategy: Strategy = defaultOptions.strategy;
+      polyfill = 'false';
       cleanup!: () => void;
 
       constructor() {
@@ -62,14 +65,16 @@ export function defineElements(): void {
       }
 
       attributeChangedCallback<
-        N extends Extract<keyof this, 'placement' | 'strategy'>,
+        N extends Extract<keyof this, 'placement' | 'strategy' | 'polyfill'>,
         V extends Placement | Strategy
       >(name: N, _oldValue: V, value: V): void {
         if (name === 'placement') {
           this.placement = value as Placement;
         } else if (name === 'strategy') {
           this.strategy = value as Strategy;
           this.floating.style.position = value;
+        } else if (name === 'polyfill') {
+          this.polyfill = value as string;
         }
 
         position(this);
@@ -89,14 +94,15 @@ export function defineElements(): void {
     deepHostChildTag,
     class DeepHostChild extends HTMLElement implements FloatingUICustomElement {
       static get observedAttributes() {
-        return ['placement', 'strategy', 'style'];
+        return ['placement', 'strategy', 'style', 'polyfill'];
       }
 
       container: HTMLElement;
       reference: HTMLElement;
       floating: HTMLElement;
       placement: Placement = defaultOptions.placement;
       strategy: Strategy = defaultOptions.strategy;
+      polyfill = 'false';
       cleanup!: () => void;
 
       constructor() {
@@ -112,14 +118,16 @@ export function defineElements(): void {
       }
 
       attributeChangedCallback<
-        N extends Extract<keyof this, 'placement' | 'strategy'>,
+        N extends Extract<keyof this, 'placement' | 'strategy' | 'polyfill'>,
         V extends Placement | Strategy
       >(name: N, _oldValue: V, value: V): void {
         if (name === 'placement') {
           this.placement = value as Placement;
         } else if (name === 'strategy') {
           this.strategy = value as Strategy;
           this.floating.style.position = value;
+        } else if (name === 'polyfill') {
+          this.polyfill = value as string;
         }
 
         position(this);
@@ -159,13 +167,14 @@ export function defineElements(): void {
       implements FloatingUICustomElement
     {
       static get observedAttributes() {
-        return ['placement', 'strategy', 'style'];
+        return ['placement', 'strategy', 'style', 'polyfill'];
       }
 
       reference!: HTMLElement;
       floating: HTMLElement;
       placement: Placement = defaultOptions.placement;
       strategy: Strategy = defaultOptions.strategy;
+      polyfill = 'false';
       cleanup!: () => void;
 
       constructor() {
@@ -178,14 +187,16 @@ export function defineElements(): void {
       }
 
       attributeChangedCallback<
-        N extends Extract<keyof this, 'placement' | 'strategy'>,
+        N extends Extract<keyof this, 'placement' | 'strategy' | 'polyfill'>,
         V extends Placement | Strategy
       >(name: N, _oldValue: V, value: V): void {
         if (name === 'placement') {
           this.placement = value as Placement;
         } else if (name === 'strategy') {
           this.strategy = value as Strategy;
           this.floating.style.position = value;
+        } else if (name === 'polyfill') {
+          this.polyfill = value as string;
         }
 
         position(this);
@@ -245,6 +256,7 @@ async function position({
   placement,
   reference,
   strategy,
+  polyfill,
 }: FloatingUICustomElement): Promise<void> {
   if (!floating || !reference) {
     return;
@@ -253,6 +265,13 @@ async function position({
   return computePosition(reference, floating, {
     placement,
     strategy,
+    platform: {
+      ...platform,
+      getOffsetParent:
+        polyfill === 'true'
+          ? (element) => platform.getOffsetParent(element, composedOffsetParent)
+          : platform.getOffsetParent,
+    },
   }).then(({x, y}) => {
     Object.assign(floating.style, {
       position: strategy,
@@ -274,3 +293,53 @@ function setUpAutoUpdate(element: FloatingUICustomElement): () => void {
     animationFrame: true,
   });
 }
+
+function getWindow(node: Node) {
+  return node.ownerDocument?.defaultView || window;
+}
+
+function isShadowRoot(node: Node): node is ShadowRoot {
+  return node instanceof getWindow(node).ShadowRoot;
+}
+
+/**
+ * Polyfills the old offsetParent behavior from before the spec was changed:
+ * https://github.com/w3c/csswg-drafts/issues/159
+ */
+export function composedOffsetParent(element: HTMLElement) {
+  let {offsetParent} = element;
+  let ancestor: any = element;
+  let foundInsideSlot = false;
+
+  while (ancestor && ancestor !== offsetParent) {
+    const {assignedSlot} = ancestor;
+
+    if (assignedSlot) {
+      let newOffsetParent = assignedSlot.offsetParent;
+
+      if (getComputedStyle(assignedSlot).display === 'contents') {
+        const hadStyleAttribute = assignedSlot.hasAttribute('style');
+        const oldDisplay = assignedSlot.style.display;
+        assignedSlot.style.display = getComputedStyle(ancestor).display;
+
+        newOffsetParent = assignedSlot.offsetParent;
+
+        assignedSlot.style.display = oldDisplay;
+        if (!hadStyleAttribute) {
+          assignedSlot.removeAttribute('style');
+        }
+      }
+
+      ancestor = assignedSlot;
+      if (offsetParent !== newOffsetParent) {
+        offsetParent = newOffsetParent;
+        foundInsideSlot = true;
+      }
+    } else if (isShadowRoot(ancestor) && ancestor.host && foundInsideSlot) {
+      break;
+    }
+    ancestor = (isShadowRoot(ancestor) && ancestor.host) || ancestor.parentNode;
+  }
+
+  return offsetParent;
+}