scroll-buttons-scroll-distance.html (3859B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../support/common.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 <style> 11 .container { 12 position: relative; 13 height: 150px; 14 /* Ensure width is sufficiently different than height to ensure that 15 * the directional scroll is using the scrollport size in the associated 16 * direction. */ 17 width: 400px; 18 position: relative; 19 } 20 .scroller { 21 height: 100%; 22 overflow: auto; 23 position: relative; 24 counter-reset: page; 25 } 26 .scroller.right { 27 /* Flow content horizontally. */ 28 white-space: nowrap; 29 } 30 .scroller::scroll-button(*) { 31 width: 100px; 32 height: 50px; 33 background: green; 34 position: absolute; 35 /* Center the button within the scroller so that the call to 36 * test_driver.click(scroller) hits the button. */ 37 left: calc(50% - 50px); 38 top: calc(50% - 25px); 39 } 40 /* Create scroll buttons for test scrollers. */ 41 .scroller.test.down::scroll-button(down) { 42 content: ""; 43 } 44 .scroller.test.right::scroll-button(right) { 45 content: ""; 46 } 47 .page { 48 box-sizing: border-box; 49 height: 100%; 50 } 51 .scroller.right .page { 52 /* Flow horizontally in horizontal scroller */ 53 display: inline-block; 54 width: 100%; 55 } 56 57 /* Make pages visible for manual testing. */ 58 .page:nth-child(2*n) { 59 background: lightgray; 60 } 61 .page::before { 62 counter-increment: page; 63 content: "Page " counter(page); 64 } 65 </style> 66 67 <div class="container"> 68 <div class="scroller test down" id="scroller1"> 69 <div class="page"></div> 70 <div class="page"></div> 71 <div class="page"></div> 72 <div class="page"></div> 73 </div> 74 </div> 75 <div class="container"> 76 <div class="scroller test right" id="scroller2"> 77 <div class="page"></div> 78 <div class="page"></div> 79 <div class="page"></div> 80 <div class="page"></div> 81 </div> 82 </div> 83 84 <script> 85 86 async function clickButtonAndWaitForScroll(scroller) { 87 const scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 88 let wait_click = new Promise(resolve => scroller.addEventListener("click", resolve, {once: true})); 89 await test_driver.click(scroller); 90 await wait_click; 91 await scrollEndPromise; 92 } 93 94 promise_test(async () => { 95 const scroller = document.querySelector('.scroller.test.down'); 96 await clickButtonAndWaitForScroll(scroller); 97 98 // Activating the scroll button scrolls the originating element by 99 // one "page" in the associated direction. For most implementations this is 100 // 85% of the optimal viewing region. We could consider issuing page down 101 // and asserting the same distance here. 102 const pageHeight = scroller.clientHeight; 103 assert_greater_than(scroller.scrollTop, 0.5 * pageHeight); 104 assert_less_than_equal(scroller.scrollTop, pageHeight); 105 }, "::scroll-button(down) scrolls about a page when clicked"); 106 107 promise_test(async () => { 108 const scroller = document.querySelector('.scroller.test.right'); 109 await clickButtonAndWaitForScroll(scroller); 110 111 // Activating the scroll button scrolls the originating element by 112 // one "page" in the associated direction. For most implementations this is 113 // 85% of the optimal viewing region in that dimension, however the 114 // proportion is not precisely specified nor do we have a "Page Right" key 115 // we could compare with so we assert it is in the range 116 // [0.5, 1] * scrollport width. 117 const pageWidth = scroller.clientWidth; 118 assert_greater_than(scroller.scrollLeft, 0.5 * pageWidth); 119 assert_less_than_equal(scroller.scrollLeft, pageWidth); 120 }, "::scroll-button(right) scrolls about a page when clicked"); 121 </script>