1 files changed, 57 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation.html b/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation.html
new file mode 100644
index 0000000000..68a0874931
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/at-position-fallback-invalidation.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning Test: Dynamically change @position-fallback rules</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  body { margin: 0; }
+
+  #anchor {
+    anchor-name: --a;
+    margin-left: 100px;
+    width: 100px;
+  }
+
+  #anchored {
+    position: absolute;
+    position-fallback: --pf;
+  }
+</style>
+
+<style id="to-enable" media="print">
+  @position-fallback --pf {
+    @try { left: anchor(--a left); }
+  }
+</style>
+
+<div>
+  <div id="anchor">anchor</div>
+  <div id="anchored">anchored</div>
+</div>
+
+<script>
+  test(() => {
+    assert_equals(anchored.offsetLeft, 0);
+  }, "Position-fallback initially not matching any rules");
+
+  test(() => {
+    document.getElementById("to-enable").media = "";
+    assert_equals(anchored.offsetLeft, 100);
+  }, "Enable @position-fallback rule stylesheet");
+
+  const sheet = document.getElementById("to-enable").sheet;
+
+  test(() => {
+    sheet.insertRule(
+      `@position-fallback --pf {
+         @try { left: anchor(--a right); }
+       }`, 1);
+    assert_equals(anchored.offsetLeft, 200);
+  }, "Insert overriding @position-fallback rule");
+
+  test(() => {
+    sheet.disabled = "true";
+    assert_equals(anchored.offsetLeft, 0);
+  }, "Disable the @position-fallback rules");
+
+</script>