Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-scroll-006.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Tests that scroll adjustment is applied per-axis</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/test-common.js"></script>
<style>
body {
margin: 0;
}
.scroller {
width: 150px;
height: 150px;
margin-bottom: 50px;
overflow: scroll;
position: relative;
}
.spacer {
width: 400px;
height: 400px;
}
.anchor {
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
background: orange;
}
.target {
position: fixed;
width: 50px;
height: 50px;
background: lime;
}
#scroller1 { anchor-name: --scroller1; }
#scroller2 { anchor-name: --scroller2; }
#scroller3 { anchor-name: --scroller3; }
#anchor1 { anchor-name: --a1; }
#anchor2 { anchor-name: --a2; }
#anchor3 { anchor-name: --a3; }
/* Needs scroll adjustment in x axis only */
#target1 {
position-anchor: --a1;
left: anchor(left);
top: anchor(--scroller1 bottom);
}
/* Needs scroll adjustment in y axis only */
#target2 {
position-anchor: --a2;
top: anchor(top);
left: anchor(--scroller2 right);
}
/* No scroll adjustment needed */
#target3 {
position-anchor: --a3;
top: anchor(--scroller3 bottom);
left: anchor(--scroller3 right);
}
</style>
<div class="scroller" id="scroller1">
<div class="spacer"></div>
<div class="anchor" id="anchor1"></div>
</div>
<div class="target" id="target1"></div>
<script>
promise_test(async () => {
await waitUntilNextAnimationFrame();
assert_equals(target1.getBoundingClientRect().left, 50);
assert_equals(target1.getBoundingClientRect().top, 150);
scroller1.scrollLeft = 50;
await waitUntilNextAnimationFrame();
assert_equals(target1.getBoundingClientRect().left, 0);
scroller1.scrollTop = 50;
await waitUntilNextAnimationFrame();
assert_equals(target1.getBoundingClientRect().top, 150);
}, '#target1 is scroll-adjusted in x axis only');
</script>
<div class="scroller" id="scroller2">
<div class="spacer"></div>
<div class="anchor" id="anchor2"></div>
</div>
<div class="target" id="target2"></div>
<script>
promise_test(async () => {
await waitUntilNextAnimationFrame();
assert_equals(target2.getBoundingClientRect().left, 150);
assert_equals(target2.getBoundingClientRect().top, 250);
scroller2.scrollLeft = 50;
await waitUntilNextAnimationFrame();
assert_equals(target2.getBoundingClientRect().left, 150);
scroller2.scrollTop = 50;
await waitUntilNextAnimationFrame();
assert_equals(target2.getBoundingClientRect().top, 200);
}, '#target2 is scroll-adjusted in y axis only');
</script>
<div class="scroller" id="scroller3">
<div class="spacer"></div>
<div class="anchor" id="anchor3"></div>
</div>
<div class="target" id="target3"></div>
<script>
promise_test(async () => {
await waitUntilNextAnimationFrame();
assert_equals(target3.getBoundingClientRect().left, 150);
assert_equals(target3.getBoundingClientRect().top, 550);
scroller3.scrollLeft = 50;
await waitUntilNextAnimationFrame();
assert_equals(target3.getBoundingClientRect().left, 150);
scroller3.scrollTop = 50;
await waitUntilNextAnimationFrame();
assert_equals(target3.getBoundingClientRect().top, 550);
}, '#target3 is scroll-adjusted in neither axis');
</script>