<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#principal-flow" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
html {
  height: 3000px;
  width: 3000px;
}

#target {
  position: absolute;
  background-color: blue;
  top: 1000px;
  left: 100px;

  width: 100vw;
  height: 100px;
}
</style>
<div id="target"></div>
<script>
const documentHeight = document.documentElement.clientHeight;

function cleanup() {
  document.documentElement.style.scrollSnapType = "none";
  target.style.scrollSnapAlign = "";
  document.body.style.writingMode = "";
  window.scrollTo(0, 0);
}

test(t => {
  t.add_cleanup(cleanup);
  document.documentElement.style.scrollSnapType = "y mandatory";
  target.style.scrollSnapAlign = "end none";

  window.scrollTo(0, 800);

  // `target y (1000px)` + `target height (100px)` - document height.
  assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
  assert_equals(document.scrollingElement.scrollLeft, 0, "x should not snap");
}, "The scroll-snap-type on the root element is applied");

test(t => {
  t.add_cleanup(cleanup);

  document.documentElement.style.scrollSnapType = "inline mandatory";
  document.body.style.writingMode = "vertical-lr";
  target.style.scrollSnapAlign = "none end";

  window.scrollTo(200, 800);

  // Since inline axis is vertical, scrolling viewport vertically on block
  // axis should snap.
  assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight, "inline should snap");
  // `target x (100px)`.
  assert_equals(document.scrollingElement.scrollLeft, 200, "block should not snap");
}, "The writing-mode (vertical-lr) on the body is used");

test(t => {
  t.add_cleanup(cleanup);

  document.documentElement.style.scrollSnapType = "inline mandatory";
  document.body.style.writingMode = "horizontal-tb"; // inline is horizontal
  target.style.scrollSnapAlign = "none start";

  window.scrollTo(200, 800);

  assert_equals(document.scrollingElement.scrollLeft, 100, "inline should snap");
  assert_equals(document.scrollingElement.scrollTop, 800, "block should not snap");
}, "The writing-mode (horizontal-tb) on the body is used ");
</script>