From 28540d325f0c6ee5f6402609818cec8dcb250b2b Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 20 Nov 2024 14:30:28 -0500
Subject: [PATCH] Remove implicit anchors

---
 README.md                  |  3 ++-
 index.html                 | 34 ---------------------------------
 public/anchor-implicit.css |  5 -----
 src/parse.ts               | 14 +-------------
 tests/unit/parse.test.ts   | 39 --------------------------------------
 5 files changed, 3 insertions(+), 92 deletions(-)
 delete mode 100644 public/anchor-implicit.css

diff --git a/README.md b/README.md
index 3652e031..503ef8be 100644
--- a/README.md
+++ b/README.md
@@ -135,7 +135,6 @@ following features:
 - `position-area` property
 - `anchor-center` value for `justify-self`, `align-self`, `justify-items`, and
   `align-items` properties
-- anchor functions with `implicit` anchor-element
 - automatic anchor positioning: anchor functions with `inside` or `outside`
   anchor-side
 - `position-visibility` property
@@ -145,6 +144,8 @@ following features:
 - anchor functions assigned to `inset-*` properties or `inset` shorthand
   property
 - vertical/rtl writing-modes (partial support)
+- implicit anchors or the `position-anchor: auto` keyword (pending resolution of
+  https://github.com/whatwg/html/pull/9144)
 
 In addition, JS APIs like `CSSPositionTryRule` or `CSS.supports` will not be
 polyfilled.
diff --git a/index.html b/index.html
index 3ff37631..4c2b6a55 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,6 @@
     <link rel="stylesheet" href="/anchor-name-list.css" />
     <link rel="stylesheet" href="/anchor-custom-props.css" />
     <link rel="stylesheet" href="/anchor-duplicate-custom-props.css" />
-    <link rel="stylesheet" href="/anchor-implicit.css" />
     <link rel="stylesheet" href="/anchor-update.css" />
     <link rel="stylesheet" href="/anchor-absolute.css" />
     <link rel="stylesheet" href="/anchor-pseudo-element.css" />
@@ -419,39 +418,6 @@ <h2>
     top: anchor(--my-anchor-in-line bottom);
     right: anchor(--my-anchor-in-line right);
   "</code></pre>
-    </section>
-    <section id="implicit-name" class="demo-item">
-      <h2>
-        <a href="#implicit-name" aria-hidden="true">🔗</a>
-        Positioning with <code>anchor()</code> [implicit
-        <code>anchor</code> attribute]
-      </h2>
-      <div style="position: relative" class="demo-elements">
-        <div id="my-implicit-anchor" class="anchor">Anchor</div>
-        <div id="my-implicit-target" class="target" anchor="my-implicit-anchor">
-          Target
-        </div>
-      </div>
-      <p class="note">
-        With polyfill applied: Target is positioned at the top left corner of
-        the Anchor.
-        <br />
-        <br />
-        <strong>Note:</strong> The <code>anchor</code> attribute has not yet
-        been standardized, and currently does not work in non-polyfilled
-        browsers. See more conversation
-        <a href="https://github.com/whatwg/html/pull/9144">here</a>.
-      </p>
-      <pre><code class="language-html"
->&lt;div id="my-implicit-anchor"&gt;Anchor&lt;/div&gt;
-&lt;div id="my-implicit-target" anchor="my-implicit-anchor"&gt;Target&lt;/div&gt;</code>
-
-<code class="language-css"
->#my-implicit-target {
-  position: absolute;
-  right: anchor(implicit left);
-  bottom: anchor(top);
-}</code></pre>
     </section>
     <section id="position-anchor" class="demo-item">
       <h2>
diff --git a/public/anchor-implicit.css b/public/anchor-implicit.css
deleted file mode 100644
index 0e17152a..00000000
--- a/public/anchor-implicit.css
+++ /dev/null
@@ -1,5 +0,0 @@
-#my-implicit-target {
-  position: absolute;
-  right: anchor(implicit left);
-  bottom: anchor(top);
-}
diff --git a/src/parse.ts b/src/parse.ts
index d90b14ef..6ad928cc 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -139,9 +139,7 @@ function parseAnchorFn(
   }
   if (name) {
     if (isIdentifier(name)) {
-      if (name.name === 'implicit') {
-        name = undefined;
-      } else if (name.name.startsWith('--')) {
+      if (name.name.startsWith('--')) {
         // Store anchor name
         anchorName = name.name;
       }
@@ -255,7 +253,6 @@ async function getAnchorEl(
   let anchorName = anchorObj.anchorName;
   const customPropName = anchorObj.customPropName;
   if (targetEl && !anchorName) {
-    const anchorAttr = targetEl.getAttribute('anchor');
     const positionAnchorProperty = getCSSPropertyValue(
       targetEl,
       'position-anchor',
@@ -265,15 +262,6 @@ async function getAnchorEl(
       anchorName = positionAnchorProperty;
     } else if (customPropName) {
       anchorName = getCSSPropertyValue(targetEl, customPropName);
-    } else if (anchorAttr) {
-      const elementPart = `#${CSS.escape(anchorAttr)}`;
-
-      return await validatedForPositioning(
-        targetEl,
-        null,
-        [{ selector: elementPart, elementPart }],
-        [],
-      );
     }
   }
   const anchorSelectors = anchorName ? anchorNames[anchorName] || [] : [];
diff --git a/tests/unit/parse.test.ts b/tests/unit/parse.test.ts
index 5753775c..0f980849 100644
--- a/tests/unit/parse.test.ts
+++ b/tests/unit/parse.test.ts
@@ -61,45 +61,6 @@ describe('parseCSS', () => {
     expect(rules).toEqual(expected);
   });
 
-  it('parses `anchor()` (implicit name via `anchor` attr)', async () => {
-    document.body.innerHTML =
-      '<div style="position: relative"><div id="my-implicit-anchor"></div>' +
-      '<div id="my-implicit-target" anchor="my-implicit-anchor"></div></div>';
-    const css = getSampleCSS('anchor-implicit');
-    document.head.innerHTML = `<style>${css}</style>`;
-    const { rules } = await parseCSS([{ css }] as StyleData[]);
-    const expected = {
-      '#my-implicit-target': {
-        declarations: {
-          right: [
-            {
-              anchorName: undefined,
-              customPropName: undefined,
-              anchorEl: document.getElementById('my-implicit-anchor'),
-              targetEl: document.getElementById('my-implicit-target'),
-              anchorSide: 'left',
-              fallbackValue: '0px',
-              uuid: expect.any(String),
-            },
-          ],
-          bottom: [
-            {
-              anchorName: undefined,
-              customPropName: undefined,
-              anchorEl: document.getElementById('my-implicit-anchor'),
-              targetEl: document.getElementById('my-implicit-target'),
-              anchorSide: 'top',
-              fallbackValue: '0px',
-              uuid: expect.any(String),
-            },
-          ],
-        },
-      },
-    };
-
-    expect(rules).toEqual(expected);
-  });
-
   it('parses `anchor()` (name set via custom property)', async () => {
     document.body.innerHTML =
       '<div style="position: relative"><div id="my-target-name-prop"></div>' +