snaps-after-keyboard-scrolling-rtl.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<style>
div {
  position: absolute;
}
#scroller {
  position: relative;
  margin-left: auto;
  writing-mode: vertical-rl;
  width: 400px;
  height: 400px;
  overflow: scroll;
  scroll-snap-type: both mandatory;
  padding: 0px;
}
.snap {
  width: 200px;
  height: 200px;
  background-color: blue;
  scroll-snap-align: start;
}
#space {
  width: 1000px;
  height: 1000px;
}
.left {
  left: -400px;
  top: 0px;
}
.right {
  left: 0px;
  top: 0px;
}
</style>

<div id='scroller'>
  <div id="space"></div>
  <div class="snap left" id="left"></div>
  <div class="snap right" id="right"></div>
</div>

<script>
var scroller = document.getElementById("scroller");
var width = scroller.clientWidth;

promise_test (async () => {
  // Ensure focus.
  await mouseClickOn(510, 10);
  // Snap to #left and then use a RightArrow keyPress to snap to #right.
  // 585 represents the scroll amount needed to align the scroller's right edge
  // with #left's right edge:
  //   | left.offsetLeft + (left.offsetWidth - scroller.clientWidth) |
  await waitForScrollReset(scroller, -585, 0);
  await keyboardScroll("ArrowRight", scroller);
  // The left border of #right is at -width.
  // The right border of #right is thus 200 - width.
  // When right-aligned, the scroll position should be 200 - width.
  assert_equals(scroller.scrollLeft, 200 - width);
}, "Snaps to #right after pressing ArrowRight");

promise_test (async () => {
  // Ensure focus.
  await mouseClickOn(510, 10);
  // Snap to #right and then use a LeftArrow keyPress to snap to #left.
  // 185 represents the scroll amount needed to align the scroller's right edge
  // with #right's right edge:
  //    | right.offsetLeft + (right.offsetWidth - scroller.clientWidth)|
  await waitForScrollReset(scroller, -185, 0);
  await keyboardScroll("ArrowLeft", scroller);
  // The left border of #left is at -(400 + width).
  // The right border of #left is thus -(200 + width).
  // When right-aligned, the scroll position should be -(200 + width).
  assert_equals(scroller.scrollLeft, -(200 + width));
}, "Snaps to #left after pressing ArrowLeft");
</script>
chromium/third_party/blink/web_tests/fast/scroll-snap/snaps-after-keyboard-scrolling-rtl.html
