Add test & demo

oddbird · Jul 24, 2024 · 9fc927b · 9fc927b
1 parent 4927714
commit 9fc927b
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -32,6 +32,7 @@
     <link rel="stylesheet" href="/anchor-update.css" />
     <link rel="stylesheet" href="/anchor-absolute.css" />
     <link rel="stylesheet" href="/anchor-pseudo-element.css" />
+    <link rel="stylesheet" href="/anchor-media-query.css" />
     <style>
       #my-anchor-style-tag {
         anchor-name: --my-anchor-style-tag;
@@ -801,6 +802,32 @@ <h2>
   position-anchor: --my-anchor-pseudo-element;
   top: anchor(bottom);
   left: anchor(right);
+}</code></pre>
+    </section>
+    <section id="anchor-declared-in-media-query" class="demo-item">
+      <h2>
+        <a href="#anchor-declared-in-media-query" aria-hidden="true">🔗</a>
+        Anchor declared in media query
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div id="my-anchor-media-query" class="anchor">Anchor</div>
+        <div id="my-target-media-query" class="target">Target</div>
+      </div>
+      <p class="note">
+        With polyfill applied: Target is positioned at Anchor's bottom right
+        corner.
+      </p>
+      <pre><code class="language-css"
+>@media all {
+  #my-anchor-media-query {
+    anchor-name: --my-anchor-media-query;
+  }
+}
+
+#my-target-media-query {
+  position: absolute;
+  top: anchor(--my-anchor-media-query bottom);
+  left: anchor(--my-anchor-media-query right);
 }</code></pre>
     </section>
     <section id="sponsor">

diff --git a/public/anchor-media-query.css b/public/anchor-media-query.css
@@ -0,0 +1,11 @@
+@media all {
+  #my-anchor-media-query {
+    anchor-name: --my-anchor-media-query;
+  }
+}
+
+#my-target-media-query {
+  position: absolute;
+  top: anchor(--my-anchor-media-query bottom);
+  left: anchor(--my-anchor-media-query right);
+}
diff --git a/tests/unit/parse.test.ts b/tests/unit/parse.test.ts
@@ -935,4 +935,43 @@ describe('parseCSS', () => {
 
     expect(rules).toEqual(expected);
   });
+
+  it('should respect cascade when determining `anchor-name`', async () => {
+    document.body.innerHTML = `
+      <div class="anchor"></div>
+      <div class="positioned"></div>
+    `;
+    const css = cascadeCSSForTest(`
+      .anchor {
+        anchor-name: --name;
+      }
+      .anchor {
+        anchor-name: --other-name;
+      }
+      .positioned {
+        position: absolute;
+        top: anchor(--name bottom);
+      }
+    `);
+    document.head.innerHTML = `<style>${css}</style>`;
+    const { rules } = await parseCSS([{ css }] as StyleData[]);
+    const expected = {
+      '.positioned': {
+        declarations: {
+          top: [
+            {
+              anchorName: '--name',
+              anchorEl: null,
+              targetEl: document.querySelector<HTMLElement>('.positioned'),
+              anchorSide: 'bottom',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+        },
+      },
+    };
+
+    expect(rules).toEqual(expected);
+  });
 });