scroll-padding-page-scrolling.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test that scroll-padding correctly adjust page sroll operations</title>

<style>
:root {
  --test-size: 200px;
}

section {
  /* put them side-by-side */
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  padding: 2px;
}

section#top {
  --sp-left :   0px;
  --sp-right :  0px;
  --sp-top:     30px;
  --sp-bottom:  0px;
}

section#bottom {
  --sp-left :   0px;
  --sp-right :  0px;
  --sp-top:     0px;
  --sp-bottom:  20px;
}

section#vertical {
  --sp-left :   0px;
  --sp-right :  0px;
  --sp-top:     30px;
  --sp-bottom:  20px;
}

section#horizontal {
  --sp-left :   20px;
  --sp-right :  10px;
  --sp-top:     0px;
  --sp-bottom:  0px;
}

.actual {
  height: var(--test-size);
  width:  var(--test-size);
  scroll-padding-left: var(--sp-left);
  scroll-padding-right: var(--sp-right);
  scroll-padding-top: var(--sp-top);
  scroll-padding-bottom: var(--sp-bottom);

}

.reference {
  height: calc(var(--test-size) - var(--sp-top) - var(--sp-bottom));
  width:  calc(var(--test-size) - var(--sp-left) - var(--sp-right));
}

.actual, .reference {
  overflow: scroll;
}

.actual > div,.reference > div {
  height: 1200px;
  width: 1200px;
  background-image:
    linear-gradient(
      to bottom,
      #fffdc2,
      #fffdc2 calc(var(--test-size) - 20px),
      #d7f0a2 calc(var(--test-size) - 20px),
      #d7f0a2
    );
}
</style>

PageDown:
<section id="top" data-scroll-action="PageDown">
  <div class="actual" tabindex="0">
    <div>With scroll-padding</div>
  </div>
  <div class="reference" tabindex="0">
    <div>Without scroll-padding</div>
  </div>
</section>

PageDown:
<section id="bottom" data-scroll-action="PageDown">
  <div class="actual" tabindex="0">
    <div>With scroll-padding</div>
  </div>
  <div class="reference" tabindex="0">
    <div>Without scroll-padding</div>
  </div>
</section>

PageDown:
<section id="vertical" data-scroll-action="PageDown">
  <div class="actual" tabindex="0">
    <div>With scroll-padding</div>
  </div>
  <div class="reference" tabindex="0">
    <div>Without scroll-padding</div>
  </div>
</section>

PageRight:
<section id="horizontal" data-scroll-action="PageRight">
  <div class="actual" tabindex="0">
    <div>With scroll-padding</div>
  </div>
  <div class="reference" tabindex="0">
    <div>Without scroll-padding</div>
  </div>
</section>

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

<script>
// Disable scroll animations to have immediate results.
if (window.internals)
  internals.settings.setScrollAnimatorEnabled(false);

function pageScroll(target, action){
  if (!window.eventSender)
    throw "This test requires eventSender";

  target.focus();

  switch (action) {
    case "PageDown":
      eventSender.keyDown("PageDown"); break;
    case "PageRight":
      // TODO(majidvp): This actually does not scroll horizontally. Find a way that works.
      eventSender.keyDown("PageDown", ["shiftKey"]); break;
    default:
      throw "Unsupported scroll action";
  }
}

[].forEach.call(document.querySelectorAll('section'), function(testCase) {
  const scrollAction = testCase.dataset.scrollAction;
  const actual = testCase.querySelector('.actual');
  const reference = testCase.querySelector('.reference');

  const description = 'scrollPadding: ' + getComputedStyle(actual).scrollPadding;

  test(function(){
    pageScroll(actual, scrollAction);
    pageScroll(reference, scrollAction);
    assert_equals(actual.scrollTop, reference.scrollTop);
    assert_equals(actual.scrollLeft, reference.scrollLeft);
  }, 'Page scroll operation ' + scrollAction +  ' correctly uses scroll snapport with ' + description);
});
</script>
chromium/third_party/blink/web_tests/fast/scroll-behavior/scroll-padding-page-scrolling.html
