fix: inline styles were not being shifted to custom properties

position-area.html

@@ -183,6 +183,29 @@ <h2>
       </div>
     </section>
 
+    <section class="position-area-demo-item" id="inline-shifted">
+      <h2>
+        <a href="#inline-shifted" aria-hidden="true">🔗</a>
+        <code>span-left top, padding set inline ✅</code>
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div class="anchor">Anchor</div>
+        <div class="target inline-shifted" style="padding-right: 50%">
+          Target with longer content
+        </div>
+      </div>
+      <p>
+        The same as the demo above, except that
+        <code>padding-right: 50%</code> is an inline style rather than a
+        stylesheet rule. Inline styles are shifted into custom properties like
+        the rest of the CSS, so <a href="?auto"><code>auto</code> mode</a> can
+        still see the percentage padding and wraps the target. Without that
+        shift the padding reads back as empty, the target is positioned
+        directly, and the padding resolves against the original containing block
+        instead of the <code>position-area</code> cell.
+      </p>
+    </section>
+
     <section class="position-area-demo-item" id="nested-alignment">
       <h2>
         <a href="#nested-alignment" aria-hidden="true">🔗</a>

public/position-area-page.css

@@ -67,6 +67,12 @@
   position-area: span-left top;
 }
 
+/* Same as `.spanleft-top`, but the containing-block-dependent padding is set
+ * as an inline style on the target instead. */
+.target.inline-shifted {
+  position-area: span-left top;
+}
+
 .target.spanall-left {
   position-area: span-all left;
 }

src/fetch.ts

@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid/non-secure';
 
-import { POLYFILLED_STYLE_ATTRIBUTE } from './cascade.js';
+import { POLYFILLED_STYLE_ATTRIBUTE, SHIFTED_PROPERTIES } from './cascade.js';
 import { querySelectorAllRoots } from './dom.js';
 import {
   type AnchorPositioningRoot,
@@ -31,7 +31,7 @@
       if (!data.url) {
         return data as StyleData;
       }
       // TODO: Add MutationObserver to watch for disabled links being enabled
       // https://github.com/oddbird/css-anchor-positioning/issues/246
       if ((data.el as HTMLLinkElement | undefined)?.disabled) {
         // Do not fetch or parse disabled stylesheets
@@ -63,8 +63,26 @@
   return results.filter((loaded) => loaded !== null);
 }
 
-const ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY = '[style*="anchor"]';
-const ELEMENTS_WITH_INLINE_POSITION_AREA = '[style*="position-area"]';
+// Inline styles are collected so that `cascadeCSS` can shift their declarations
+// into custom properties, like it does for the rest of the CSS. That has to
+// cover every property the polyfill later reads back through
+// `getCSSPropertyValue` — insets, margins, sizing, padding, self-alignment,
+// `position-area` — and not just the anchor-specific ones: a target can take
+// its `position-area` from a stylesheet while setting its margin inline.
+// `anchor` is matched on its own as well, for `anchor()`/`anchor-size()` values.
+// Built on first use rather than at module evaluation: `cascade.js` and this
+// module are part of an import cycle, so `SHIFTED_PROPERTIES` is not
+// necessarily initialized yet when this module is evaluated.
+let inlineAnchorStylesQuery: string | undefined;
+function elementsWithInlineAnchorStylesQuery() {
+  inlineAnchorStylesQuery ??= [
+    '[style*="anchor"]',
+    ...Object.keys(SHIFTED_PROPERTIES).map(
+      (property) => `[style*="${property}"]`,
+    ),
+  ].join(',');
+  return inlineAnchorStylesQuery;
+}
 // Searches for all elements with inline style attributes that include `anchor`.
 // For each element found, adds a new 'data-has-inline-styles' attribute with a
 // random UUID value, and then formats the styles in the same manner as CSS from
@@ -74,16 +92,10 @@
     ? elements.filter(
         (el) =>
           el instanceof HTMLElement &&
-          (el.matches(ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY) ||
-            el.matches(ELEMENTS_WITH_INLINE_POSITION_AREA)),
+          el.matches(elementsWithInlineAnchorStylesQuery()),
       )
     : Array.from(
-        document.querySelectorAll(
-          [
-            ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY,
-            ELEMENTS_WITH_INLINE_POSITION_AREA,
-          ].join(','),
-        ),
+        document.querySelectorAll(elementsWithInlineAnchorStylesQuery()),
       );
   const inlineStyles: Partial<StyleData>[] = [];
 

tests/e2e/position-area.test.ts

@@ -393,6 +393,31 @@ test.describe('with `positionAreaContainingBlock: auto`', () => {
     ).toHaveCount(1);
   });
 
+  test('wraps a target whose containing-block-dependent style is inline', async ({
+    page,
+  }) => {
+    // `#inline-shifted .target` takes its `position-area` from a stylesheet and
+    // sets `padding-right: 50%` inline. Inline styles are shifted into custom
+    // properties like the rest of the CSS, so the percentage padding is still
+    // seen here and the target is wrapped. Without the shift it reads back as
+    // empty and the target is positioned directly.
+    await applyPolyfill(page);
+
+    const section = page.locator('#inline-shifted');
+    const targetWrapper = section.locator('polyfill-position-area');
+    await expect(targetWrapper).toHaveCount(1);
+
+    // The reason it needs the wrapper: the padding has to resolve against the
+    // position-area cell, not the original parent.
+    const wrapperContentWidth = await targetWrapper.evaluate(
+      (el) => el.clientWidth,
+    );
+    const paddingRight = await section
+      .locator('.target')
+      .evaluate((el) => parseFloat(getComputedStyle(el).paddingRight));
+    expect(paddingRight).toBeCloseTo(wrapperContentWidth / 2, 0);
+  });
+
   test('positions a wrapped target correctly', async ({ page }) => {
     await applyPolyfill(page);
     const section = page.locator('#spanleft-top');