anchor-scroll-006.html | Explore in Territory

<!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:[email protected]">
<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>
chromium/third_party/blink/web_tests/external/wpt/css/css-anchor-position/anchor-scroll-006.html
