helper_touch_action_complex.html (6311B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 6 <title>Complex touch-action test</title> 7 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 8 <script type="application/javascript" src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <script type="application/javascript"> 11 12 function checkScroll(target, x, y, desc) { 13 is(target.scrollLeft, x, desc + " - x axis"); 14 is(target.scrollTop, y, desc + " - y axis"); 15 } 16 17 async function resetConfiguration(config) { 18 // Cycle through all the configuration_X elements, setting them to display:none 19 // except for when X == config, in which case set it to display:block 20 var i = 0; 21 while (true) { 22 i++; 23 var element = document.getElementById("configuration_" + i); 24 if (element == null) { 25 if (i <= config) { 26 ok(false, "The configuration requested was not encountered!"); 27 } 28 break; 29 } 30 31 if (i == config) { 32 element.style.display = "block"; 33 } else { 34 element.style.display = "none"; 35 } 36 } 37 38 // Also reset the scroll position on the scrollframe 39 var s = document.getElementById("scrollframe"); 40 s.scrollLeft = 0; 41 s.scrollTop = 0; 42 43 await promiseAllPaintsDone(); 44 await promiseApzFlushedRepaints(); 45 } 46 47 async function test() { 48 var scrollframe = document.getElementById("scrollframe"); 49 50 // Helper function for the tests below. 51 // Touch-pan configuration |configuration| towards scroll offset (dx, dy) with 52 // the pan touching down at (x, y). Check that the final scroll offset is 53 // (ex, ey). |desc| is some description string. 54 async function scrollAndCheck(configuration, x, y, dx, dy, ex, ey, desc) { 55 // Start with a clean slate 56 await resetConfiguration(configuration); 57 // Reverse the touch delta in order to scroll in the desired direction 58 dx = -dx; 59 dy = -dy; 60 // Do the pan 61 let touchEndPromise = promiseTouchEnd(document.body); 62 ok(await synthesizeNativeTouchDrag(scrollframe, x, y, dx, dy), 63 "Synthesized drag of (" + dx + ", " + dy + ") on configuration " + configuration); 64 await touchEndPromise; 65 await promiseAllPaintsDone(); 66 await promiseOnlyApzControllerFlushed(); 67 // Check for expected scroll position 68 checkScroll(scrollframe, ex, ey, "configuration " + configuration + " " + desc); 69 } 70 71 // Test configuration_1, which contains two sibling elements that are 72 // overlapping. The touch-action from the second sibling (which is on top) 73 // should be used for the overlapping area. 74 await scrollAndCheck(1, 25, 75, 20, 0, 20, 0, "first element horizontal scroll"); 75 await scrollAndCheck(1, 25, 75, 0, 50, 0, 0, "first element vertical scroll"); 76 await scrollAndCheck(1, 75, 75, 50, 0, 0, 0, "overlap horizontal scroll"); 77 await scrollAndCheck(1, 75, 75, 0, 50, 0, 50, "overlap vertical scroll"); 78 await scrollAndCheck(1, 125, 75, 20, 0, 0, 0, "second element horizontal scroll"); 79 await scrollAndCheck(1, 125, 75, 0, 50, 0, 50, "second element vertical scroll"); 80 81 // Test configuration_2, which contains two overlapping elements with a 82 // parent/child relationship. The parent has pan-x and the child has pan-y, 83 // which means that panning on the parent should work horizontally only, and 84 // on the child no panning should occur at all. 85 await scrollAndCheck(2, 125, 125, 50, 50, 0, 0, "child scroll"); 86 await scrollAndCheck(2, 75, 75, 50, 50, 0, 0, "overlap scroll"); 87 await scrollAndCheck(2, 25, 75, 0, 50, 0, 0, "parent vertical scroll"); 88 await scrollAndCheck(2, 75, 25, 50, 0, 50, 0, "parent horizontal scroll"); 89 90 // Test configuration_3, which is the same as configuration_2, except the child 91 // has a rotation transform applied. This forces the event regions on the two 92 // elements to be built separately and then get merged. 93 await scrollAndCheck(3, 125, 125, 50, 50, 0, 0, "child scroll"); 94 await scrollAndCheck(3, 75, 75, 50, 50, 0, 0, "overlap scroll"); 95 await scrollAndCheck(3, 25, 75, 0, 50, 0, 0, "parent vertical scroll"); 96 await scrollAndCheck(3, 75, 25, 50, 0, 50, 0, "parent horizontal scroll"); 97 98 // Test configuration_4 has two elements, one above the other, not overlapping, 99 // and the second element is a child of the first. The parent has pan-x, the 100 // child has pan-y, but that means panning horizontally on the parent should 101 // work and panning in any direction on the child should not do anything. 102 await scrollAndCheck(4, 75, 75, 50, 50, 50, 0, "parent diagonal scroll"); 103 await scrollAndCheck(4, 75, 150, 50, 50, 0, 0, "child diagonal scroll"); 104 } 105 106 waitUntilApzStable() 107 .then(test) 108 .then(subtestDone, subtestFailed); 109 110 </script> 111 </head> 112 <body> 113 <div id="scrollframe" style="width: 300px; height: 300px; overflow:scroll"> 114 <div id="scrolled_content" style="width: 1000px; height: 1000px; background-color: green"> 115 </div> 116 <div id="configuration_1" style="display:none; position: relative; top: -1000px"> 117 <div style="touch-action: pan-x; width: 100px; height: 100px; background-color: blue"></div> 118 <div style="touch-action: pan-y; width: 100px; height: 100px; position: relative; top: -100px; left: 50px; background-color: yellow"></div> 119 </div> 120 <div id="configuration_2" style="display:none; position: relative; top: -1000px"> 121 <div style="touch-action: pan-x; width: 100px; height: 100px; background-color: blue"> 122 <div style="touch-action: pan-y; width: 100px; height: 100px; position: relative; top: 50px; left: 50px; background-color: yellow"></div> 123 </div> 124 </div> 125 <div id="configuration_3" style="display:none; position: relative; top: -1000px"> 126 <div style="touch-action: pan-x; width: 100px; height: 100px; background-color: blue"> 127 <div style="touch-action: pan-y; width: 100px; height: 100px; position: relative; top: 50px; left: 50px; background-color: yellow; transform: rotate(90deg)"></div> 128 </div> 129 </div> 130 <div id="configuration_4" style="display:none; position: relative; top: -1000px"> 131 <div style="touch-action: pan-x; width: 100px; height: 100px; background-color: blue"> 132 <div style="touch-action: pan-y; width: 100px; height: 100px; position: relative; top: 125px; background-color: yellow"></div> 133 </div> 134 </div> 135 </div> 136 </body> 137 </html>