at-position-try-invalidation.html | Explore in Territory

<!DOCTYPE html>
<title>CSS Anchor Positioning Test: Dynamically change @position-try 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;
    height: 100px;
  }

  #anchored {
    position: absolute;
    width: 100px;
    height: 100px;
    position-try-fallbacks: --pf;
    left: 999999px; /* force fallback */
  }
</style>

<style id="to-enable" media="print">
  @position-try --pf {
    left: anchor(--a left);
  }
</style>

<div>
  <div id="anchor">anchor</div>
  <div id="anchored">anchored</div>
</div>

<script>
  test(() => {
    assert_equals(anchored.offsetLeft, 999999);
  }, "position-try-fallbacks initially not matching any rules");

  test(() => {
    document.getElementById("to-enable").media = "";
    assert_equals(anchored.offsetLeft, 100);
  }, "Enable @position-try rule stylesheet");

  const sheet = document.getElementById("to-enable").sheet;

  test(() => {
    sheet.insertRule(
      `@position-try --pf {
         left: anchor(--a right);
       }`, 1);
    assert_equals(anchored.offsetLeft, 200);
  }, "Insert overriding @position-try rule");

  test(() => {
    sheet.disabled = "true";
    assert_equals(anchored.offsetLeft, 999999);
  }, "Disable the @position-try rules");

</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-anchor-position/at-position-try-invalidation.html
