oddbird · jamesnw · Apr 7, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 7, 2025
diff --git a/README.md b/README.md
@@ -150,8 +150,6 @@ following features:
 - `position-area` property
 - `anchor-center` value for `justify-self`, `align-self`, `justify-items`, and
   `align-items` properties
-- automatic anchor positioning: anchor functions with `inside` or `outside`
-  anchor-side
 - `position-visibility` property
 - dynamically added/removed anchors or targets
 - anchors or targets in the shadow-dom

diff --git a/index.html b/index.html
@@ -42,6 +42,7 @@
     <link rel="stylesheet" href="/anchor-pseudo-element.css" />
     <link rel="stylesheet" href="/anchor-media-query.css" />
     <link rel="stylesheet" href="/anchor-scope.css" />
+    <link rel="stylesheet" href="/anchor-inside-outside.css" />
     <!-- Included to test invalid stylesheets -->
     <link rel="stylesheet" href="/fake.css" />
     <style>
@@ -529,6 +530,31 @@ <h2>
   position: absolute;
   right: anchor(var(--anchor-var) left);
   bottom: anchor(var(--anchor-var) top);
+}</code></pre>
+    </section>
+    <section id="inside-outside" class="demo-item">
+      <h2>
+        <a href="#inside-outside" aria-hidden="true">🔗</a>
+        Positioning using <code>inside</code> and <code>outside</code> values
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div class="anchor">Anchor</div>
+        <div class="target">Target</div>
+      </div>
+      <p class="note">
+        With polyfill applied: Target’s bottom edge is aligned with Anchor’s
+        bottom edge, and Target’s left edge is aligned with Anchor’s right edge.
+      </p>
+      <pre><code class="language-css"
+>#inside-outside .anchor {
+  anchor-name: --inside-outside;
+}
+
+#inside-outside .target {
+  position: absolute;
+  position-anchor: --inside-outside;
+  left: anchor(outside);
+  bottom: anchor(inside);
 }</code></pre>
     </section>
     <section id="position-try-tactics" class="demo-item">

diff --git a/public/anchor-inside-outside.css b/public/anchor-inside-outside.css
@@ -0,0 +1,11 @@
+#inside-outside .anchor {
+  anchor-name: --inside-outside;
+}
+
+#inside-outside .target {
+  position: absolute;
+  position-anchor: --inside-outside;
+  left: anchor(outside);
+  bottom: anchor(inside);
+  padding: 1.5em;
+}
diff --git a/src/polyfill.ts b/src/polyfill.ts
@@ -205,6 +205,9 @@ export const getPixelValue = async ({
     ) {
       return fallback;
     }
+    // Since the polyfill does not yet support anchor functions on `inset-*`
+    // properties, they are omitted here.
+    const startwardProperties = ['top', 'left'];
 
     switch (anchorSide) {
       case 'left':
@@ -222,6 +225,12 @@ export const getPixelValue = async ({
       case 'center':
         percentage = 50;
         break;
+      case 'inside':
+        percentage = startwardProperties.includes(targetProperty) ? 0 : 100;
+        break;
+      case 'outside':
+        percentage = startwardProperties.includes(targetProperty) ? 100 : 0;
+        break;
       default:
         // Logical keywords require checking the writing direction
         // of the target element (or its containing block)

diff --git a/src/syntax.ts b/src/syntax.ts
@@ -103,6 +103,8 @@ export const ANCHOR_SIDES = [
   'self-start',
   'self-end',
   'center',
+  'inside',
+  'outside',
 ];
 export type AnchorSideKeyword = (typeof ANCHOR_SIDES)[number];
 

diff --git a/tests/e2e/polyfill.test.ts b/tests/e2e/polyfill.test.ts
@@ -76,6 +76,24 @@ test('applies polyfill for `anchor()`', async ({ page }) => {
   await expectWithinOne(target, 'right', expected);
 });
 
+test('applies polyfill for inside and outside keywords', async ({ page }) => {
+  const inoutAnchorSelector = '#inside-outside .anchor';
+  const inoutTargetSelector = '#inside-outside .target';
+  const target = page.locator(inoutTargetSelector);
+  const height = await getParentHeight(page, inoutAnchorSelector);
+  const parentWidth = await getParentWidth(page, inoutTargetSelector);
+  const parentHeight = await getParentHeight(page, inoutTargetSelector);
+  const expected = parentHeight - height;
+
+  await expectWithinOne(target, 'left', 0);
+  await expectWithinOne(target, 'bottom', expected, true);
+
+  await applyPolyfill(page);
+
+  await expectWithinOne(target, 'left', parentWidth);
+  await expectWithinOne(target, 'bottom', expected);
+});
+
 test('applies polyfill from inline styles', async ({ page }) => {
   const targetInLine = page.locator('#my-target-inline');
   const width = await getElementWidth(page, anchorSelector);