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/anchor-sticky-fixed-drift.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Tests scroll adjustments of fixed element anchored horizontally to a sticky element</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
margin: 0;
height: 2000px;
}
#container {
position: relative;
top: 200px;
height: 500px;
}
#sticky-anchor {
position: sticky;
top: 100px;
anchor-name: --anchor;
width: 50px;
height: 50px;
background: blue;
}
#anchored {
position: fixed;
position-anchor: --anchor;
left: anchor(center);
bottom: 50px;
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="container">
<div id="sticky-anchor"></div>
</div>
<div id="anchored"></div>
<script>
promise_test(async () => {
// Initial check
let rect = anchored.getBoundingClientRect();
assert_equals(rect.bottom, window.innerHeight - 50, "Initial bottom position");
// Scroll down
window.scrollTo(0, 300);
// Wait for layout
//await new Promise(resolve => requestAnimationFrame(resolve));
rect = anchored.getBoundingClientRect();
// The anchored element is position: fixed and bottom: 50px.
// Its vertical position should not change when scrolling.
assert_equals(rect.bottom, window.innerHeight - 50, "Bottom position after scroll");
}, "Fixed anchored element with sticky anchor");
</script>