Remove implicit anchors

oddbird · Nov 20, 2024 · 28540d3 · 28540d3
1 parent e8348fc
commit 28540d3
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 92 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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>' +