<!doctype html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1586909">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #scroller {
    overflow: scroll;
    height: 500px;
    height: 500px;
  }
  #before {
    height: 200px;
  }
  #anchor {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 500px;
    background-color: blue;
    top: 0px;
  }
</style>
<div id="scroller">
  <div id="before">
  </div>
  <div id="anchor">
  </div>
</div>
<script>
async_test(t => {
  let scroller = document.querySelector('#scroller');
  let before = document.querySelector('#before');
  let anchor = document.querySelector('#anchor');

  scroller.onscroll = t.step_func(function() {
    // Adjust the 'top' of #anchor, which should trigger a suppression
    anchor.style.top = '10px';

    // Expand #before and make sure we don't apply an adjustment
    before.style.height = '300px';

    assert_equals(scroller.scrollTop, 200);

    t.step_timeout(t.step_func_done(function() {
      // Expand #before again and make sure we don't keep #anchor as
      // an anchor from the last time.
      before.style.height = '600px';
      assert_equals(scroller.scrollTop, 200);
    }), 0);
  });

  // Scroll down to select #anchor as a scroll anchor
  scroller.scrollTop = 200;
}, 'Positioned ancestors with dynamic changes to offsets trigger scroll suppressions.');
</script>
