| <!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> |
