Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/popover-anchor-backdrop-transition.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Anchor Positioning Test: popover with anchor functions transition ::backdrop</title>
<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>