Handling fixed position and refactoring validation

src/parse.ts

@@ -316,7 +316,7 @@ function getPositionFallbackRules(node: csstree.CssNode) {
   return {};
 }
 
-function getCSSPropertyValue(el: HTMLElement, prop: string) {
+export function getCSSPropertyValue(el: HTMLElement, prop: string) {
   return getComputedStyle(el).getPropertyValue(prop).trim();
 }
 

src/validate.ts

@@ -1,5 +1,14 @@
 import { platform } from '@floating-ui/dom';
 
+import { getCSSPropertyValue } from './parse.js';
+
+function hasStyle(element: HTMLElement, cssProperty: string, value: string) {
+  return (
+    element.style.getPropertyValue(cssProperty) === value ||
+    getCSSPropertyValue(element, cssProperty) === value
+  );
+}
+
 // Given a target element and CSS selector(s) for potential anchor element(s),
 // returns the first element that passes validation,
 // or `null` if no valid anchor element is found
@@ -25,25 +34,19 @@ export async function validatedForPositioning(
 }
 
 export function isFixedPositioned(el: HTMLElement) {
-  return Boolean(
-    el.style.position === 'fixed' || getComputedStyle(el).position === 'fixed',
-  );
+  return hasStyle(el, 'position', 'fixed');
 }
 
 export function isAbsolutelyPositioned(el?: HTMLElement | null) {
   return Boolean(
     el &&
-      (el.style.position === 'absolute' ||
-        getComputedStyle(el).position === 'absolute' ||
-        isFixedPositioned(el)),
+      (hasStyle(el, 'position', 'fixed') ||
+        hasStyle(el, 'position', 'absolute')),
   );
 }
 
 // Determines whether the containing block (CB) of the element
-// is the initial containing block (ICB):
-// - `offsetParent` returns `null` when the CB is the ICB,
-//   except in Firefox where `offsetParent` returns the `body` element
-// - Excludes elements when they or their parents have `display: none`
+// is the initial containing block (ICB)
 export function isContainingBlockICB(
   targetContainingBlock: Element | Window | undefined,
 ) {
@@ -60,13 +63,9 @@ export async function isValidAnchorElement(
 
   // If el has the same containing block as the querying element,
   // el must not be absolutely positioned.
-  // A separate check for fixed positioning is added here
-  // because its offsetParent will always resolve to null:
-  // https://w3c.github.io/csswg-drafts/cssom-view/#extensions-to-the-htmlelement-interface
   if (
-    (isAbsolutelyPositioned(anchor) &&
-      anchorContainingBlock === targetContainingBlock) ||
-    isFixedPositioned(anchor)
+    isAbsolutelyPositioned(anchor) &&
+    anchorContainingBlock === targetContainingBlock
   ) {
     return false;
   }
@@ -95,14 +94,17 @@ export async function isValidAnchorElement(
     }
   }
 
+  // Either el is a descendant of query el’s containing block,
+  // or query el’s containing block is the initial containing block
+  // https://drafts4.csswg.org/css-anchor-1/#determining
   let isDescendant;
   if (targetContainingBlock && targetContainingBlock === window) {
     isDescendant = (targetContainingBlock as Window).document.contains(anchor);
   } else if (targetContainingBlock) {
     isDescendant = (targetContainingBlock as HTMLElement).contains(anchor);
   }
 
-  const targetCBIsInitialCB = await isContainingBlockICB(targetContainingBlock);
+  const targetCBIsInitialCB = isContainingBlockICB(targetContainingBlock);
 
   if (isDescendant || targetCBIsInitialCB) {
     return true;

tests/unit/parse.test.ts

@@ -50,7 +50,7 @@ describe('parseCSS', () => {
       },
     };
 
-    expect(expected).toEqual(result);
+    expect(result).toEqual(expected);
   });
 
   it('parses `anchor()` (implicit name via `anchor` attr)', async () => {