pointerevent_touch-action-keyboard.html (6591B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>touch-action: keyboard</title> 5 <meta name="timeout" content="long"> 6 <meta name="viewport" content="width=device-width"> 7 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="pointerevent_support.js"></script> 14 <style> 15 #target0 { 16 width: 700px; 17 height: 430px; 18 touch-action: none; 19 } 20 </style> 21 </head> 22 <body onload="run()"> 23 <h1>Pointer Events touch-action attribute support</h1> 24 <h4 id="desc">Test Description: Press DOWN ARROW key, then RIGHT ARROW key. Expected: pan enabled</h4> 25 <p>Note: this test is for keyboard only</p> 26 <div id="target0"> 27 <p> 28 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 29 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 30 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 31 lobortis nisl ut aliquip ex ea commodo consequat. 32 </p> 33 <p>Lorem ipsum dolor sit amet...</p> 34 <p>Lorem ipsum dolor sit amet...</p> 35 <p>Lorem ipsum dolor sit amet...</p> 36 <p>Lorem ipsum dolor sit amet...</p> 37 <p>Lorem ipsum dolor sit amet...</p> 38 <p>Lorem ipsum dolor sit amet...</p> 39 <p>Lorem ipsum dolor sit amet...</p> 40 <p> 41 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 42 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 43 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 44 lobortis nisl ut aliquip ex ea commodo consequat. 45 </p> 46 <p>Lorem ipsum dolor sit amet...</p> 47 <p>Lorem ipsum dolor sit amet...</p> 48 <p>Lorem ipsum dolor sit amet...</p> 49 <p>Lorem ipsum dolor sit amet...</p> 50 <p>Lorem ipsum dolor sit amet...</p> 51 <p>Lorem ipsum dolor sit amet...</p> 52 <p>Lorem ipsum dolor sit amet...</p> 53 <p> 54 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 55 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 56 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 57 lobortis nisl ut aliquip ex ea commodo consequat. 58 </p> 59 <p>Lorem ipsum dolor sit amet...</p> 60 <p>Lorem ipsum dolor sit amet...</p> 61 <p>Lorem ipsum dolor sit amet...</p> 62 <p>Lorem ipsum dolor sit amet...</p> 63 <p>Lorem ipsum dolor sit amet...</p> 64 <p>Lorem ipsum dolor sit amet...</p> 65 <p>Lorem ipsum dolor sit amet...</p> 66 <p> 67 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 68 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 69 Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 70 lobortis nisl ut aliquip ex ea commodo consequat. 71 </p> 72 <p>Lorem ipsum dolor sit amet...</p> 73 <p>Lorem ipsum dolor sit amet...</p> 74 <p>Lorem ipsum dolor sit amet...</p> 75 <p>Lorem ipsum dolor sit amet...</p> 76 <p>Lorem ipsum dolor sit amet...</p> 77 <p>Lorem ipsum dolor sit amet...</p> 78 <p>Lorem ipsum dolor sit amet...</p> 79 </div> 80 <script type='text/javascript'> 81 var x_scroll_baseline, y_scroll_baseline, x_scroll, y_scroll; 82 83 var got_x_scroll = false; 84 var got_y_scroll = false; 85 86 async function send_key_to_target(key_code) { 87 return new test_driver.Actions() 88 .addKeyboard("keyboard1", "keyboard") 89 .keyDown(key_code, {origin: target0}) 90 .keyUp(key_code, {origin: target0}) 91 .send(); 92 } 93 94 async function run() { 95 var test_touchaction = async_test("touch-action attribute test"); 96 97 const target0 = document.getElementById("target0"); 98 const x_scroll_baseline = target0.scrollLeft; 99 const y_scroll_baseline = target0.scrollTop; 100 101 // Inject keyboard scroll inputs. 102 const arrow_down = "\uE015"; 103 const arrow_right = "\uE014"; 104 105 on_event(target0, 'scroll', function(event) { 106 x_scroll = target0.scrollLeft; 107 y_scroll = target0.scrollTop; 108 if (y_scroll > y_scroll_baseline && !got_y_scroll) { 109 test_touchaction.step(function () { 110 assert_true(true, "content was scrolled down."); 111 }); 112 got_y_scroll = true; 113 } 114 if (x_scroll > x_scroll_baseline && !got_x_scroll) { 115 test_touchaction.step(function () { 116 assert_true(true, "content was scrolled right."); 117 }); 118 got_x_scroll = true; 119 } 120 if (got_x_scroll && got_y_scroll) { 121 test_touchaction.done(); 122 } 123 }); 124 125 document.addEventListener('keyup', async function(e) { 126 if (e.code == "ArrowDown") { 127 send_key_to_target(arrow_right); 128 } 129 }); 130 131 await new test_driver.Actions() 132 .addPointer("mousePointer1", "mouse") 133 .pointerMove(0, 0, {origin: target0}) 134 .pointerDown() 135 .pointerUp() 136 .send(); 137 138 await send_key_to_target(arrow_down); 139 await send_key_to_target(arrow_down); 140 } 141 </script> 142 <h1>touch-action: none</h1> 143 <div id="complete-notice"> 144 </div> 145 <div id="log"></div> 146 </body> 147 </html>