Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: e940b3ad8382b2a2d7f0faeb0385ed53eb15283b authored by Frédéric Wang on 11 September 2018, 08:14:16 UTC
Use document.scrollingElement to access scroll properties of the viewport
Tip revision: e940b3a
scrollTo-scrollBy-snaps.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>
<style>
body {
  margin: 0px;
  overflow: scroll;
  scroll-snap-type: both mandatory;
}
div {
  position: absolute;
}
.scroller {
  overflow: scroll;
  scroll-snap-type: both mandatory;
}
#inner-scroller {
  top: 3000px;
  width: 800px;
  height: 800px;
}
.space {
  left: 0px;
  top: 0px;
  width: 2100px;
  height: 2100px;
}
.target {
  width: 600px;
  height: 600px;
  scroll-snap-align: start;
}

.left {
  left: 0px;
}
.right {
  left: 1000px;
}
.top {
  top: 0px;
}
.bottom {
  top: 1000px;
}
</style>
<body class="scroller">
  <div class="space"></div>
  <div class="target left top"></div>
  <div class="target right top"></div>
  <div class="target left bottom"></div>
  <div class="target right bottom"></div>
  <div class="scroller" id="inner-scroller">
    <div class="space"></div>
    <div class="target left top"></div>
    <div class="target right top"></div>
    <div class="target left bottom"></div>
    <div class="target right bottom"></div>
  </div>
</body>

<script>
function format_dict(dict) {
  const props = [];
  for (let prop in dict) {
    props.push(`${prop}: ${format_value(dict[prop])}`);
  }
  return `{${props.join(', ')}}`;
}

var divScroller = document.getElementById("inner-scroller");
var viewport = document.scrollingElement;
[
  [{left: 800}, 1000, 0],
  [{top: 900}, 0, 1000],
  [{left: 900, top: 800}, 1000, 1000]
].forEach(([input, expectedX, expectedY]) => {
  test(() => {
    divScroller.scrollTo(0, 0);
    assert_equals(divScroller.scrollLeft, 0);
    assert_equals(divScroller.scrollTop, 0);
    if (input.left)
      divScroller.scrollLeft = input.left;
    if (input.top)
      divScroller.scrollTop = input.top;
    assert_equals(divScroller.scrollLeft, expectedX);
    assert_equals(divScroller.scrollTop, expectedY);
  }, `assign scrollLeft and scrollTop for ${format_dict(input)} on div lands on (${expectedX}, ${expectedY})`);

  test(() => {
    viewport.scrollTo(0, 0);
    assert_equals(viewport.scrollLeft, 0);
    assert_equals(viewport.scrollTop, 0);
    if (input.left)
      viewport.scrollLeft = input.left;
    if (input.top)
      viewport.scrollTop = input.top;
    assert_equals(viewport.scrollLeft, expectedX);
    assert_equals(viewport.scrollTop, expectedY);
  }, `assign scrollLeft and scrollTop for ${format_dict(input)} on viewport-defining element lands on (${expectedX}, ${expectedY})`);

  test(() => {
    divScroller.scrollTo(0, 0);
    assert_equals(divScroller.scrollLeft, 0);
    assert_equals(divScroller.scrollTop, 0);
    divScroller.scrollTo(input);
    assert_equals(divScroller.scrollLeft, expectedX);
    assert_equals(divScroller.scrollTop, expectedY);
  }, `scrollTo(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`);

  test(() => {
    divScroller.scrollTo(0, 0);
    assert_equals(divScroller.scrollLeft, 0);
    assert_equals(divScroller.scrollTop, 0);
    divScroller.scrollBy(input);
    assert_equals(divScroller.scrollLeft, expectedX);
    assert_equals(divScroller.scrollTop, expectedY);
  }, `scrollBy(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`);

  test(() => {
    viewport.scrollTo(0, 0);
    assert_equals(viewport.scrollLeft, 0);
    assert_equals(viewport.scrollTop, 0);
    viewport.scrollTo(input);
    assert_equals(viewport.scrollLeft, expectedX);
    assert_equals(viewport.scrollTop, expectedY);
  }, `scrollTo(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`);

  test(() => {
    viewport.scrollTo(0, 0);
    assert_equals(viewport.scrollLeft, 0);
    assert_equals(viewport.scrollTop, 0);
    viewport.scrollBy(input);
    assert_equals(viewport.scrollLeft, expectedX);
    assert_equals(viewport.scrollTop, expectedY);
  }, `scrollBy(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`);

  test(() => {
    window.scrollTo(0, 0);
    assert_equals(window.scrollX, 0);
    assert_equals(window.scrollY, 0);
    window.scrollTo(input);
    assert_equals(window.scrollX, expectedX);
    assert_equals(window.scrollY, expectedY);
  }, `scrollTo(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`);

  test(() => {
    window.scrollTo(0, 0);
    assert_equals(window.scrollX, 0);
    assert_equals(window.scrollY, 0);
    window.scrollTo(input);
    assert_equals(window.scrollX, expectedX);
    assert_equals(window.scrollY, expectedY);
  }, `scrollBy(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`);
});
</script>
back to top