<!DOCTYPE html>
<style>
#content {
  height: 2000px;
  width: 2000px;
}
</style>

<div id='console'></div>
<div id='content'></div>

<script src="../../resources/js-test.js"></script>
<script>
jsTestIsAsync = true;
setPrintTestResultsLazily();
description('Test ensures that frame scroll position is only restored during ' +
            'the navigation process but does not occur after navigation is ' +
            'complete for same document navigations.');

window.scrollTo(100, 100);
history.pushState(null, null, '#test');

window.addEventListener('hashchange', _ => {
  // after back navigation scroll position should be restored to 100,100.
  debug('Verify that scroll position restored correctly during navigation.');
  shouldBe('document.scrollingElement.scrollLeft', '100');
  shouldBe('document.scrollingElement.scrollTop', '100');

  // trigger a content size change that should cause the scroll position
  // to get clamped to 0,0.
  document.getElementById('content').style.display = 'none';
  shouldBe('document.scrollingElement.scrollLeft', '0');
  shouldBe('document.scrollingElement.scrollTop', '0');

  // trigger another content size change and verify that scroll position is
  // not restored.
  debug('Verify that scroll position is not restored again after navigation is complete.');
  document.getElementById('content').style.display = 'block';
  shouldBe('document.scrollingElement.scrollLeft', '0');
  shouldBe('document.scrollingElement.scrollTop', '0');

  finishJSTest();
});

setTimeout(_ => {
  window.scrollTo(0, 0);
  shouldBe('document.scrollingElement.scrollLeft', '0');
  shouldBe('document.scrollingElement.scrollTop', '0');
  history.back();
}, 0);
</script>