vertical-scroll-touch-block-manual.tentative.html (9012B)
1 <!doctype html> 2 <title>vertical-scroll test for touch-action</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/feature-policy/experimental-features/resources/common.js"></script> 6 <script src="/feature-policy/experimental-features/resources/vertical-scroll.js"></script> 7 <style> 8 html, body { 9 height: 100%; 10 width: 100%; 11 } 12 13 iframe { 14 width: 90%; 15 height: 90%; 16 margin: 0; 17 padding: 0; 18 } 19 20 .spacer { 21 width: 100%; 22 height: 100%; 23 margin: 100%; 24 } 25 </style> 26 <iframe></iframe> 27 <br/> 28 <p>Spacers below to make page scrollable</p> 29 <br/> 30 <div class="spacer"></div> 31 <div class="spacer"></div> 32 <p> EOF </p> 33 34 <script> 35 "use strict"; 36 37 let url = url_base + "vertical-scroll-touch-block.html"; 38 let iframeElement = document.querySelector("iframe"); 39 40 // Wait for the helper scripts to load. 41 promise_test(async() => { 42 if (window.input_api_ready) 43 return Promise.resolve(); 44 await new Promise( (r) => { 45 window.resolve_on_input_api_ready = r; 46 }); 47 48 }, "Make sure input injection API is ready."); 49 50 // Sanity-check: Verify we can scroll using the test-API. The <iframe> with no 51 // query arguments would not preventDefault() any events. 52 promise_test(async() => { 53 window.scrollTo(0, 0); 54 await loadUrlInIframe(iframeElement, url); 55 56 await inject_scroll("down"); 57 assert_greater_than(window.scrollY, 0, "Page must have scrolled down."); 58 59 await inject_scroll("right"); 60 assert_greater_than(window.scrollX, 0, "Page must have scrolled right."); 61 }, "Verify that the page normally scrolls."); 62 63 // Enable 'vertical-scroll': Blocking "touchstart" can block scrolling. 64 promise_test(async() => { 65 window.scrollTo(0, 0); 66 setFeatureState(iframeElement, "vertical-scroll", "*"); 67 await loadUrlInIframe(iframeElement, url); 68 await sendMessageAndGetResponse(iframeElement.contentWindow, 69 { 70 event_type: "touchstart", 71 query: "#blocker", 72 prevent: true 73 }); 74 75 await inject_scroll("down"); 76 assert_equals(window.scrollY, 77 0, 78 "Main frame must not scroll vertically."); 79 }, "Calling 'preventDefault' on 'touchstart' blocks vertical scroll when " + 80 " the feature is enabled."); 81 82 // Disable 'vertical-scroll': Blocking "touchstart" cannot block vertical 83 // scroll. 84 promise_test(async() => { 85 window.scrollTo(0, 0); 86 setFeatureState(iframeElement, "vertical-scroll", "'none'"); 87 await loadUrlInIframe(iframeElement, url); 88 await sendMessageAndGetResponse(iframeElement.contentWindow, 89 { 90 event_type: "touchstart", 91 query: "#blocker", 92 prevent: true 93 }); 94 95 await inject_scroll("down"); 96 assert_greater_than(window.scrollY, 97 0, 98 "Main frame must scroll vertically."); 99 100 // Horizontal scrolling must still be blocked. 101 window.scrollTo(0, 0); 102 await inject_scroll("right"); 103 assert_equals(window.scrollX, 104 0, 105 "Main frame must not scroll horizontally."); 106 }, "When feature is disabled, calling 'preventDefault' on 'touchstart' does" + 107 " not block vertical scroll, but still bocks horizontal scroll."); 108 109 // Enable 'vertical-scroll': Blocking "touchmove" can block scrolling. 110 promise_test(async() => { 111 // Make sure <window> can scroll both towards right and bottom. 112 window.scrollTo(0, 0); 113 setFeatureState(iframeElement, "vertical-scroll", "*"); 114 await loadUrlInIframe(iframeElement, url); 115 await sendMessageAndGetResponse(iframeElement.contentWindow, 116 { 117 event_type: "touchmove", 118 query: "#blocker", 119 prevent: true 120 }); 121 122 await inject_scroll("down"); 123 assert_equals(window.scrollY, 124 0, 125 "Main frame must not scroll vertically"); 126 }, "Calling 'preventDefault' on 'touchmove' blocks vertical scroll when " + 127 "the feature is enabled."); 128 129 // Disable 'vertical-scroll': Blocking "touchmove" cannot block vertical 130 // scroll. 131 promise_test(async() => { 132 window.scrollTo(0, 0); 133 setFeatureState(iframeElement, "vertical-scroll", "'none'"); 134 await loadUrlInIframe(iframeElement, url); 135 await sendMessageAndGetResponse(iframeElement.contentWindow, 136 { 137 event_type: "touchmove", 138 query: "#blocker", 139 prevent: true 140 }); 141 await new Promise((r) => { 142 window.setTimeout(r, 100); 143 }); 144 145 await inject_scroll("down"); 146 assert_greater_than(window.scrollY, 147 0, 148 "Main frame must scroll vertically."); 149 }, "When feature is disabled, calling 'preventDefault' on 'touchmove' does" + 150 " not block vertical scroll."); 151 152 // Disable 'vertical-scroll': Add a non-preventing handler, and then a 153 // preventing handler and verify vertical scroll is possible and horizontal 154 // is blocked. 155 promise_test(async() => { 156 setFeatureState(iframeElement, "vertical-scroll", "'none'"); 157 await loadUrlInIframe(iframeElement, url); 158 159 // Add a non-blocking handler. 160 await sendMessageAndGetResponse(iframeElement.contentWindow, 161 { 162 event_type: "touchstart", 163 query: "#blocker", 164 prevent: false 165 }); 166 167 window.scrollTo(0, 0); 168 await inject_scroll("down"); 169 assert_greater_than(window.scrollY, 0, "Page must have scrolled down."); 170 171 window.scrollTo(0, 0); 172 await inject_scroll("right"); 173 assert_greater_than(window.scrollX, 0, "Page must have scrolled right."); 174 175 // Add a blocking handler. 176 await sendMessageAndGetResponse(iframeElement.contentWindow, 177 { 178 event_type: "touchstart", 179 query: "#blocker", 180 prevent: true 181 }); 182 window.scrollTo(0, 0); 183 await inject_scroll("down"); 184 assert_greater_than(window.scrollY, 185 0, 186 "Page must have scrolled down (preventing handler)."); 187 188 window.scrollTo(0, 0); 189 await inject_scroll("right"); 190 assert_equals(window.scrollX, 191 0, 192 "Page must not have scrolled horizontally."); 193 }, "Verify that starting with a non-preventing listener and then switching" + 194 " to a preventing one works as intended."); 195 196 // Disable 'vertical-scroll': A preventing 'touchstart' handler does not allow 197 // other multi-touch actions such as 'pinch-zoom'. 198 promise_test(async() => { 199 assert_true(!!window.visualViewport, 200 "'visualViewport' is needed for this test."); 201 202 setFeatureState(iframeElement, "vertical-scroll", "'none'"); 203 await loadUrlInIframe(iframeElement, url); 204 await sendMessageAndGetResponse(iframeElement.contentWindow, 205 { 206 event_type: "touchstart", 207 query: "#blocker", 208 prevent: false 209 }); 210 211 // Sanity check: Pinch zoom in should work since 'touchstart' is not 212 // preventing. 213 let current_scale_factor = window.visualViewport.scale; 214 await inject_zoom("in"); 215 let new_scale_factor = window.visualViewport.scale; 216 assert_greater_than( 217 new_scale_factor, 218 current_scale_factor, 219 "Pinch zoom should work since 'touchstart' is not prevented."); 220 221 // Add a preventing handler and verify pinch zoom is now blocked. 222 await sendMessageAndGetResponse(iframeElement.contentWindow, 223 { 224 event_type: "touchstart", 225 query: "#blocker", 226 prevent: true 227 }); 228 current_scale_factor = new_scale_factor; 229 await inject_zoom("out"); 230 new_scale_factor = window.visualViewport.scale; 231 assert_equals( 232 new_scale_factor, 233 current_scale_factor, 234 "Pinch zoom must be blocked."); 235 }, "Verify that pinch zoom is blocked in frames with 'vertical-scroll' none'" + 236 " where 'touchstart' is prevent defaulted."); 237 </script>