popover-anchor-backdrop-transition.html

<!DOCTYPE html>
<title>CSS Anchor Positioning Test: popover with anchor functions transition ::backdrop</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="anchor"></div>
<div id="popover" popover></div>
<style>
  #anchor {
    anchor-name: --anchor;
  }
  #popover {
    top: anchor(--anchor bottom);
  }
  ::backdrop {
    transition: opacity 1s step-end;
    opacity: 1;
  }
  @starting-style {
    ::backdrop {
      opacity: 0;
    }
  }
</style>
<script>
  test(() => {
    popover.showPopover();
    assert_equals(getComputedStyle(popover, "::backdrop").opacity, "0");
  }, "Anchored popover ::backdrop transitioning opacity with @starting-style");
</script>

chromium/third_party/blink/web_tests/external/wpt/css/css-anchor-position/popover-anchor-backdrop-transition.html