| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../support/common.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/dom/events/scrolling/scroll_support.js"></script> |
| <style> |
| .container { |
| position: relative; |
| height: 150px; |
| /* Ensure width is sufficiently different than height to ensure that |
| * the directional scroll is using the scrollport size in the associated |
| * direction. */ |
| width: 400px; |
| position: relative; |
| } |
| .scroller { |
| height: 100%; |
| overflow: auto; |
| position: relative; |
| counter-reset: page; |
| } |
| .scroller.right { |
| /* Flow content horizontally. */ |
| white-space: nowrap; |
| } |
| .scroller::scroll-button(*) { |
| width: 100px; |
| height: 50px; |
| background: green; |
| position: absolute; |
| /* Center the button within the scroller so that the call to |
| * test_driver.click(scroller) hits the button. */ |
| left: calc(50% - 50px); |
| top: calc(50% - 25px); |
| } |
| /* Create scroll buttons for test scrollers. */ |
| .scroller.test.down::scroll-button(down) { |
| content: ""; |
| } |
| .scroller.test.right::scroll-button(right) { |
| content: ""; |
| } |
| .page { |
| box-sizing: border-box; |
| height: 100%; |
| } |
| .scroller.right .page { |
| /* Flow horizontally in horizontal scroller */ |
| display: inline-block; |
| width: 100%; |
| } |
| |
| /* Make pages visible for manual testing. */ |
| .page:nth-child(2*n) { |
| background: lightgray; |
| } |
| .page::before { |
| counter-increment: page; |
| content: "Page " counter(page); |
| } |
| </style> |
| |
| <div class="container"> |
| <div class="scroller test down" id="scroller1"> |
| <div class="page"></div> |
| <div class="page"></div> |
| <div class="page"></div> |
| <div class="page"></div> |
| </div> |
| </div> |
| <div class="container"> |
| <div class="scroller test right" id="scroller2"> |
| <div class="page"></div> |
| <div class="page"></div> |
| <div class="page"></div> |
| <div class="page"></div> |
| </div> |
| </div> |
| |
| <script> |
| |
| async function clickButtonAndWaitForScroll(scroller) { |
| const scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); |
| let wait_click = new Promise(resolve => scroller.addEventListener("click", resolve, {once: true})); |
| await test_driver.click(scroller); |
| await wait_click; |
| await scrollEndPromise; |
| } |
| |
| promise_test(async () => { |
| const scroller = document.querySelector('.scroller.test.down'); |
| await clickButtonAndWaitForScroll(scroller); |
| |
| // Activating the scroll button scrolls the originating element by |
| // one "page" in the associated direction. For most implementations this is |
| // 85% of the optimal viewing region. We could consider issuing page down |
| // and asserting the same distance here. |
| const pageHeight = scroller.clientHeight; |
| assert_greater_than(scroller.scrollTop, 0.5 * pageHeight); |
| assert_less_than_equal(scroller.scrollTop, pageHeight); |
| }, "::scroll-button(down) scrolls about a page when clicked"); |
| |
| promise_test(async () => { |
| const scroller = document.querySelector('.scroller.test.right'); |
| await clickButtonAndWaitForScroll(scroller); |
| |
| // Activating the scroll button scrolls the originating element by |
| // one "page" in the associated direction. For most implementations this is |
| // 85% of the optimal viewing region in that dimension, however the |
| // proportion is not precisely specified nor do we have a "Page Right" key |
| // we could compare with so we assert it is in the range |
| // [0.5, 1] * scrollport width. |
| const pageWidth = scroller.clientWidth; |
| assert_greater_than(scroller.scrollLeft, 0.5 * pageWidth); |
| assert_less_than_equal(scroller.scrollLeft, pageWidth); |
| }, "::scroll-button(right) scrolls about a page when clicked"); |
| </script> |
