1 files changed, 137 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html
new file mode 100644
index 0000000000..2ffd026b55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-006.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<title>Tests that scroll adjustment is applied per-axis</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#needs-scroll-adjustment">
+<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 {
+  anchor-default: --a1;
+  left: anchor(left);
+  top: anchor(--scroller1 bottom);
+}
+
+/* Needs scroll adjustment in y axis only */
+#target2 {
+  anchor-default: --a2;
+  top: anchor(top);
+  left: anchor(--scroller2 right);
+}
+
+/* No scroll adjustment needed */
+#target3 {
+  anchor-default: --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>