Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/chrome-379758203-crash.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="test-wait">
<style>
.spacer { height: 2000px; }
.anchor { anchor-name: --a; }
#popover {
transition: bottom 1s allow-discrete;
position-anchor: --a;
position-try-fallbacks: flip-block;
top: anchor(bottom);
bottom: auto;
}
</style>
<div class="spacer"></div>
<div class="anchor">
<div id="popover" popover>Hello World</div>
</div>
<div class="spacer"></div>
<script>
requestAnimationFrame(() => {
document.documentElement.scrollTop = 2000;
requestAnimationFrame(() => {
popover.showPopover();
requestAnimationFrame(() => {
document.documentElement.scrollTop = 0;
document.documentElement.classList.remove("test-wait");
});
});
});
</script>