testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type-on-root-element.html
author Hiroyuki Ikezoe <hikezoe@mozilla.com>
Tue, 23 Apr 2019 01:14:37 +0000
changeset 470432 42c76408a8bdeea672dc5144c103cb34fe850b5f
permissions -rw-r--r--
Bug 1544198 - Test cases for the root element. r=jfkthame These test cases intentionally check only Y-axis scroll position since horizontal scroll on the root element has been broken, e.g. bug 1102175 or bug 1260054. Differential Revision: https://phabricator.services.mozilla.com/D27988

<!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;
  scroll-snap-type: inline mandatory;
}
#target {
  position: absolute;
  background-color: blue;
  top: 1000px;
  width: 100%;
  height: 100px;
}
</style>
<div id="target"></div>
<script>
const documentHeight = document.documentElement.clientHeight;
test(() => {
  target.style.scrollSnapAlign = "end start";

  window.scrollTo(0, 1000);

  // `target y (1000px)` + `target height (100px)` - document height.
  assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);

  target.style.scrollSnapAlign = "";
  window.scrollTo(0, 0);
}, "The scroll-snap-type on the root element is applied");

test(() => {
  document.body.style.writingMode = "vertical-rl";
  target.style.scrollSnapAlign = "start end";

  window.scrollTo(0, 1000);
  // `target y (1000px)` + `target height (100px)` - document height.
  assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
}, "The writing-mode on the body is used");
</script>