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