vertical-scroll-touch-action-manual.tentative.html (3074B)
1 <!doctype html> 2 <meta name="timeout" content="long"> 3 <title>vertical-scroll test for touch-action</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/permissions-policy/experimental-features/resources/common.js"></script> 7 <script src="/permissions-policy/experimental-features/resources/vertical-scroll.js"></script> 8 <style> 9 html, body { 10 height: 100%; 11 width: 100%; 12 } 13 14 iframe { 15 width: 90%; 16 height: 90%; 17 margin: 0; 18 padding: 0; 19 } 20 21 .spacer { 22 width: 100%; 23 height: 100%; 24 margin: 100%; 25 } 26 </style> 27 <iframe></iframe> 28 <br/> 29 <p>Spacers below to make page scrollable</p> 30 <br/> 31 <div class="spacer"></div> 32 <div class="spacer"></div> 33 <p> EOF </p> 34 35 <script> 36 "use strict"; 37 38 let url = url_base + "vertical-scroll-touch-action.html"; 39 let iframeElement = document.querySelector("iframe"); 40 41 // Wait for the helper scripts to load. 42 promise_test(async() => { 43 if (window.input_api_ready) 44 return Promise.resolve(); 45 await new Promise( (r) => { 46 window.resolve_on_input_api_ready = r; 47 }); 48 }, "Make sure input injection API is ready."); 49 50 // Sanity-check: Verify we can scroll using the test-API (empty <iframe>). 51 promise_test(async() => { 52 window.scrollTo(0, 0); 53 54 await inject_input("down"); 55 assert_greater_than(window.scrollY, 0, "Page must have scrolled down."); 56 57 await inject_input("right"); 58 assert_greater_than(window.scrollX, 0, "Page must have scrolled right."); 59 }, "Verify that the page normally scrolls."); 60 61 // Enable 'vertical-scroll': "touch-action" should be able to block scroll. 62 promise_test(async() => { 63 // Make sure <window> can scroll both towards right and bottom. 64 window.scrollTo(0, 0); 65 66 await loadUrlInIframe(iframeElement, url); 67 68 // Apply the scroll gesture. 69 await inject_input("down"); 70 71 // The scroll should normally bubble and affect this page, but the <iframe> 72 // is allowed to block it. 73 assert_equals(window.scrollY, 74 0, 75 "Main frame must not scroll vertically"); 76 }, "Vertical scrolling through 'touch-action' can normally be blocked if" + 77 " 'pan-y' is not present."); 78 79 // Disable 'vertical-scroll': "touch-action" should not be able to block 80 // scroll. 81 promise_test(async() => { 82 window.scrollTo(0, 0); 83 84 // Disallow vertical scroll and reload the <iframe>. 85 setFeatureState(iframeElement, "vertical-scroll", "'none'"); 86 await loadUrlInIframe(iframeElement, url); 87 88 // Apply the scroll gesture. Main frame should scroll vertically. 89 await inject_input("down"); 90 91 assert_greater_than(window.scrollY, 92 0, 93 "Main frame must scroll vertically."); 94 window.scrollTo(0, 0); 95 96 await inject_input("right"); 97 assert_equals( 98 window.scrollX, 99 0, 100 "'pan-x' can be blocked even when 'vertical-scroll' is disabled"); 101 }, "Vertical scrolling (and only vertical scrolling) through 'touch-action'" + 102 " cannot be blocked by a disabled frame."); 103 </script>