<!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>
