Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-scroll-single-axis-default-anchor.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Anchor Positioning: per-axis scroll compensation when querying the default anchor</title>
<link rel="author" title="Free Debreuil" href="mailto:freedebreuil@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/rendering-utils.js"></script>
<style>
body {
margin: 0;
}
.scroller {
position: relative;
width: 200px;
height: 200px;
overflow: scroll;
}
.spacer {
width: 500px;
height: 500px;
}
.anchor,
#popup {
width: 10px;
height: 10px;
}
.anchor {
position: absolute;
top: 100px;
left: 100px;
}
#default {
anchor-name: --default;
}
#popup {
position: fixed;
position-anchor: --default;
top: anchor(top);
left: anchor(left);
}
</style>
<!--
#popup's insets both query #default. It should follow #default in each axis
in which #inner or #outer scrolls.
-->
<div id="outer" class="scroller">
<div id="inner" class="scroller">
<div class="spacer"></div>
<div id="default" class="anchor"></div>
</div>
<div class="spacer"></div>
</div>
<div id="popup"></div>
<script>
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const popup = document.getElementById("popup");
promise_test(async () => {
inner.style.overflowX = "scroll";
inner.style.overflowY = "scroll";
outer.scrollTo(0, 0);
inner.scrollTo(0, 0);
await waitForAtLeastOneFrame();
outer.scrollTo(50, 50);
inner.scrollTo(5, 5);
await waitForAtLeastOneFrame();
const { left, top } = popup.getBoundingClientRect();
assert_equals(left, 45, "x scroll of #inner and #outer is compensated");
assert_equals(top, 45, "y scroll of #inner and #outer is compensated");
}, "inner scrollable in both axes: both scroll containers are compensated");
promise_test(async () => {
inner.style.overflowX = "clip";
inner.style.overflowY = "scroll";
outer.scrollTo(0, 0);
inner.scrollTo(0, 0);
await waitForAtLeastOneFrame();
outer.scrollTo(50, 50);
inner.scrollTo(5, 5);
await waitForAtLeastOneFrame();
const { left, top } = popup.getBoundingClientRect();
assert_equals(left, 50, "x scroll of #outer is compensated");
assert_equals(top, 45, "y scroll of #inner and #outer is compensated");
}, "inner scrollable in y only: #outer's x scroll is still compensated");
promise_test(async () => {
inner.style.overflowX = "scroll";
inner.style.overflowY = "clip";
outer.scrollTo(0, 0);
inner.scrollTo(0, 0);
await waitForAtLeastOneFrame();
outer.scrollTo(50, 50);
inner.scrollTo(5, 5);
await waitForAtLeastOneFrame();
const { left, top } = popup.getBoundingClientRect();
assert_equals(left, 45, "x scroll of #inner and #outer is compensated");
assert_equals(top, 50, "y scroll of #outer is compensated");
}, "inner scrollable in x only: #outer's y scroll is still compensated");
</script>