touch-action-with-swipe-dir-change.html (3697B)
1 <!doctype html> 2 <title>touch-action behavior with swipe direction changes</title> 3 <meta name="variant" content="?touch"> 4 <meta name="viewport" content="width=device-width"> 5 <link rel="help" href="https://w3c.github.io/pointerevents/#determining-supported-direct-manipulation-behavior" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="pointerevent_support.js"></script> 12 <style> 13 #target { 14 width: 200px; 15 height: 200px; 16 overflow: scroll; 17 } 18 #spacer { 19 width: 400px; 20 height: 400px; 21 } 22 #done { 23 width: 100px; 24 height: 100px; 25 } 26 </style> 27 <div id="target"> 28 <div id="spacer"></div> 29 </div> 30 <div id="done"></div> 31 32 <script> 33 "use strict"; 34 const pointer_type = "touch"; 35 const target = document.getElementById("target"); 36 const done = document.getElementById("done"); 37 38 assert_true(location.search.length > 0 && 39 location.search.substring(1) === pointer_type, 40 "Test URL has 'touch' pointer-type"); 41 42 /* 43 For each promise_test, we have these 5 parameters in order: 44 - touch-action value to test, 45 - a list of directions ("right" or "down") in the swipe to test, 46 - whether scrollLeft change is expected, and 47 - whether scrollTop change is expected. 48 */ 49 const promise_test_params = [ 50 ["auto", ["right", "down"], true, true ], 51 ["auto", ["down", "right"], true, true ], 52 ["pan-x", ["right", "down"], true, false], 53 ["pan-x", ["down", "right"], false, false], 54 ["pan-y", ["right", "down"], false, false], 55 ["pan-y", ["down", "right"], false, true ], 56 ["none" , ["right", "down"], false, false], 57 ["none" , ["down", "right"], false, false], 58 ]; 59 60 function appendSwipeActions(actions, directions) { 61 const deltas = { 62 "right": [30, 0], 63 "down": [0, 30], 64 } 65 let pos = [0, 0]; 66 for (const direction of directions) { 67 // Move three steps along each direction. 68 for (let i = 0; i < 3; i++) { 69 pos[0] += deltas[direction][0]; 70 pos[1] += deltas[direction][1]; 71 actions = actions.pointerMove(pos[0], pos[1], {origin: target}); 72 } 73 } 74 return actions; 75 } 76 77 for (let i = 0; i < promise_test_params.length; i++) { 78 let [touch_action, directions, left_change_expected, top_change_expected] 79 = promise_test_params[i]; 80 81 promise_test(async () => { 82 target.style.touchAction = touch_action; 83 84 // Reset the scroll position to 50% mark on both axes. 85 target.scrollLeft = 100; 86 target.scrollTop = 100; 87 const done_pointerup_promise = getEvent("pointerup", done); 88 89 let actions = new test_driver.Actions() 90 .addPointer("TestPointer", pointer_type) 91 .pointerMove(0, 0, {origin: target}) 92 .pointerDown(); 93 actions = appendSwipeActions(actions, directions); 94 actions = actions.pointerUp() 95 .pointerMove(0, 0, {origin: done}) 96 .pointerDown() 97 .pointerUp() 98 99 await actions.send(); 100 await done_pointerup_promise; 101 102 if (left_change_expected) { 103 assert_less_than(target.scrollLeft, 100, "scrollLeft should change"); 104 } else { 105 assert_equals(target.scrollLeft, 100, "scrollLeft should not change"); 106 } 107 108 if (top_change_expected) { 109 assert_less_than(target.scrollTop, 100, "scrollTop should change"); 110 } else { 111 assert_equals(target.scrollTop, 100, "scrollTop should not change"); 112 } 113 }, `touch-action:${touch_action} with ${directions} swipe`); 114 } 115 </script>