sticky-input-box-position.html | Explore in Territory

<!DOCTYPE html>
<title>Type in an onscreen sticky positioned input box should not scroll the page.</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-scroll" />
<meta name="assert" content="This test checks that typing in an onscreen sticky positioned
input box should reset the scroll to unshifted position." />

<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>

<style>
body {
  display: inline;
}

#spacer {
    height:2000px;
}

</style>

<input type="text" style="position:sticky;" id="test"/>
<input type="text" id="reference"/>
<div id="spacer"></div>

<script>
test(() => {
  var test = document.getElementById('test');
  test.focus();
  window.scrollTo(0, 100);
  assert_not_equals(window.eventSender, undefined, 'This test requires eventSender');
  eventSender.keyDown('T');
  eventSender.keyDown('E');
  eventSender.keyDown('S');
  eventSender.keyDown('T');
  const sticky_position = window.scrollY;

 // The reference element is vertically in the position the sticky element would be if
 // it were not shifted by its sticky position offset.
 // We can use this to determine where the browser should scroll to move this unshifted
 // input into view per spec.
  var reference = document.getElementById('reference');
  reference.focus();
  window.scrollTo(0, 100);
  eventSender.keyDown('T');
  eventSender.keyDown('E');
  eventSender.keyDown('S');
  eventSender.keyDown('T');

  assert_equals(sticky_position, window.scrollY);
}, 'Type in the onscreen sticky input box should reset the scroll to unshifted position.');
</script>
chromium/third_party/blink/web_tests/fast/css/sticky/sticky-input-box-position.html
