overscroll-behavior-keyboard-scroll.html (5674B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>overscroll-behavior for keyboard scroll</title> 4 <meta name="timeout" content="long"> 5 <link rel="help" href="https://drafts.csswg.org/css-overscroll-behavior"> 6 <link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="/dom/events/scrolling/scroll_support.js"></script> 13 <script src="/css/css-scroll-snap/support/common.js"></script> 14 15 <style> 16 body { 17 margin: 0px; 18 } 19 .outer { 20 height: 400px; 21 width: 1000px; 22 background: white 23 } 24 .content { 25 height: 600px; 26 width: 1200px; 27 } 28 #root { 29 overflow: scroll; 30 height: 600px; 31 width: 800px; 32 background: white; 33 } 34 #container { 35 overflow: scroll; 36 } 37 #non_scrollable { 38 overflow: clip; 39 } 40 #green { 41 background: repeating-linear-gradient(to bottom right, green 15%, white 30%); 42 } 43 #blue { 44 background: repeating-linear-gradient(to bottom right, blue 15%, white 30%); 45 } 46 </style> 47 48 <div id='root'> 49 <div id='non_scrollable' class='outer'> 50 <div id='green' class='content'></div> 51 </div> 52 <div id='container' class='outer'> 53 <div id='blue' class='content'></div> 54 </div> 55 </div> 56 <!-- 57 Tests that overscroll-behavior prevents scroll-propagation in the area and 58 direction as specified. 59 Manual Steps: 60 1. Make two scrolls on blue, in this order: scroll UP (or drag down), then 61 scroll LEFT (or drag right). Scroll (or drag) until nothing is 62 scrolling. 63 2. Call verify_y_prevented_and_set_boundary_prevents_x() from console 64 3. Repeat the same scrolls as in step 1 65 4. Call verify_x_prevented_and_set_boundary_allows_inner() from console 66 5. Repeat the same scrolls as in step 1 67 6. Call verify_inner_allowed_and_set_nonscrollable_allows_propagation() 68 from console 69 7. Make two separate scrolls on green, in this order: scroll UP 70 (or drag down), then scroll LEFT (or drag right). Scroll (or drag) until 71 nothing is scrolling. 72 8. Call verify_non_scrollable_allows_propagation() from console 73 </ol> --> 74 <script> 75 function setScrollPosition(scroller, offset) { 76 scroller.scrollTop = offset; 77 scroller.scrollLeft = offset; 78 } 79 80 async function scrollWithKeyboardWait(scrollElement, overflowScroller) { 81 const scrollerRect = scrollElement.getBoundingClientRect(); 82 // Move pointer to scroll_element. 83 await new test_driver.Actions() 84 .pointerMove(scrollerRect.left + 200, scrollerRect.top + 100) 85 .pointerDown() 86 .pointerUp() 87 .send(); 88 // Perform vertical scroll. 89 let scrollEndPromise = waitForScrollEndOrTimeout(overflowScroller, 1000); 90 await scrollElementByKeyboard('ArrowUp'); 91 await scrollEndPromise; 92 // Perform horizontal scroll. 93 scrollEndPromise = waitForScrollEndOrTimeout(overflowScroller, 1000); 94 await scrollElementByKeyboard('ArrowLeft'); 95 await scrollEndPromise; 96 } 97 98 promise_test(async t => { 99 await waitForCompositorReady(); 100 101 container.style.overscrollBehaviorX = 'auto'; 102 container.style.overscrollBehaviorY = 'none'; 103 setScrollPosition(root, 100); 104 setScrollPosition(container, 0); 105 window.scrollTo(0, 0); 106 107 await scrollWithKeyboardWait(container, root); 108 109 assert_approx_equals(root.scrollTop, 100, 0.5, 110 "root got unexpected scroll on Y axis"); 111 assert_approx_equals(root.scrollLeft, 0, 0.5, 112 "root expected to scroll on X axis"); 113 }, "overscroll-behavior-y: none prevents scroll propagation on y axis"); 114 115 promise_test(async t => { 116 await waitForCompositorReady(); 117 118 container.style.overscrollBehaviorX = 'none'; 119 container.style.overscrollBehaviorY = 'auto'; 120 setScrollPosition(root, 100); 121 setScrollPosition(container, 0); 122 window.scrollTo(0, 0); 123 124 await scrollWithKeyboardWait(container, root); 125 126 assert_approx_equals(root.scrollTop, 0, 0.5, 127 "root expected to scroll on Y axis"); 128 assert_approx_equals(root.scrollLeft, 100, 0.5, 129 "root got unexpected scroll on X axis"); 130 }, "overscroll-behavior-x: none prevents scroll propagation on x axis"); 131 132 promise_test(async t => { 133 await waitForCompositorReady(); 134 135 container.style.overscrollBehaviorX = 'none'; 136 container.style.overscrollBehaviorY = 'none'; 137 setScrollPosition(root, 100); 138 setScrollPosition(container, 100); 139 window.scrollTo(0, 0); 140 141 await scrollWithKeyboardWait(container, container); 142 143 assert_approx_equals(container.scrollTop, 0, 0.5, 144 "inner container expected to scroll on Y axis"); 145 assert_approx_equals(container.scrollLeft, 0, 0.5, 146 "inner container expected to scroll on X axis"); 147 assert_approx_equals(root.scrollTop, 100, 0.5, 148 "root got unexpected scroll on Y axis"); 149 assert_approx_equals(root.scrollLeft, 100, 0.5, 150 "root got unexpected scroll on X axis"); 151 }, "overscroll-behavior allows inner scrolling when both axes are none"); 152 153 promise_test(async t => { 154 await waitForCompositorReady(); 155 156 non_scrollable.style.overscrollBehaviorX = 'none'; 157 non_scrollable.style.overscrollBehaviorY = 'none'; 158 setScrollPosition(root, 100); 159 window.scrollTo(0, 0); 160 161 await scrollWithKeyboardWait(non_scrollable, root); 162 163 assert_approx_equals(root.scrollLeft, 0, 0.5, 164 "root expected to scroll on X axis"); 165 assert_approx_equals(root.scrollTop, 0, 0.5, 166 "root expected to scroll on Y axis"); 167 }, "overscroll-behavior on non-scrollable area allows scroll propagation"); 168 </script>