penPointerEvents.html (4149B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>TestDriver actions: pointerevent properties of pen type</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/pointerevents/pointerevent_support.js"></script> 10 11 <style> 12 div#test { 13 position: fixed; 14 touch-action: none; 15 top: 5px; 16 left: 5px; 17 width: 100px; 18 height: 100px; 19 background-color: blue; 20 } 21 </style> 22 23 <div id="test"> 24 </div> 25 26 <script> 27 let eventList = []; 28 29 promise_test(async t => { 30 let test = document.getElementById("test"); 31 [ 32 'pointerover', 'pointerenter', 'pointermove', 'pointerdown', 'pointerup', 33 'pointerout', 'pointerleave' 34 ].forEach(eventType => { 35 test.addEventListener(eventType, e => { 36 eventList.push(e); 37 }); 38 }); 39 40 let div = document.getElementById("test"); 41 let actions = new test_driver.Actions() 42 .addPointer("penPointer1", "pen") 43 // Force initial position to be outside the test element 44 .pointerMove(0, 0) 45 // Prevent coalescence of move events. 46 .pointerDown() 47 .pointerUp() 48 // Trigger over and enter events. 49 .pointerMove(10, 10) 50 // Toggle of pen-contact state between each move to prevent coalescence of 51 // move events. 52 .pointerDown() 53 .pointerMove(0, 0, {origin: test}) 54 .pointerUp() 55 .pointerMove(15, 0, {origin: test}) 56 .pointerDown() 57 .pointerMove(30, 0, {origin: test}) 58 .pointerUp() 59 .pointerMove(0, 0); 60 await actions.send() 61 62 const expectedEvents = [ 63 { 64 type: 'pointerover', 65 button: ButtonChange.NONE, 66 buttons: ButtonsBitfield.NONE 67 }, 68 { 69 type: 'pointerenter', 70 button: ButtonChange.NONE, 71 buttons: ButtonsBitfield.NONE 72 }, 73 { type: 'pointermove', 74 button: ButtonChange.NONE, 75 buttons: ButtonsBitfield.NONE, 76 clientX: 10, 77 clientY: 10 78 }, 79 { 80 type: 'pointerdown', 81 button: ButtonChange.PEN_CONTACT, 82 buttons: ButtonsBitfield.PEN_CONTACT, 83 clientX: 10, 84 clientY: 10 85 }, 86 { 87 type: 'pointermove', 88 button: ButtonChange.NONE, 89 buttons: ButtonsBitfield.PEN_CONTACT, 90 clientX: 55, 91 clientY: 55 92 }, 93 { 94 type: 'pointerup', 95 button: ButtonChange.PEN_CONTACT, 96 buttons: ButtonsBitfield.NONE, 97 clientX: 55, 98 clientY: 55 99 }, 100 { 101 type: 'pointermove', 102 button: ButtonChange.NONE, 103 buttons: ButtonsBitfield.NONE, 104 clientX: 70, 105 clientY: 55 106 }, 107 { 108 type: 'pointerdown', 109 button: ButtonChange.PEN_CONTACT, 110 buttons: ButtonsBitfield.PEN_CONTACT, 111 clientX: 70, 112 clientY: 55 113 }, 114 { 115 type: 'pointermove', 116 button: ButtonChange.NONE, 117 buttons: ButtonsBitfield.PEN_CONTACT, 118 clientX: 85, 119 clientY: 55 120 }, 121 { 122 type: 'pointerup', 123 button: ButtonChange.PEN_CONTACT, 124 buttons: ButtonsBitfield.NONE, 125 clientX: 85, 126 clientY: 55 127 }, 128 { 129 type: 'pointerout', 130 button: ButtonChange.NONE, 131 buttons: ButtonsBitfield.NONE, 132 clientX: 0, 133 clientY: 0 134 }, 135 { 136 type: 'pointerleave', 137 button: ButtonChange.NONE, 138 buttons: ButtonsBitfield.NONE, 139 clientX: 0, 140 clientY: 0 141 }, 142 ]; 143 144 for (let i = 0; i < expectedEvents.length; i++) { 145 const expectedValue = expectedEvents[i]; 146 const actualValue = eventList[i]; 147 assert_true(!!actualValue, `Missing $[i}-th event`); 148 assert_equals(actualValue.pointerType, 'pen', 'Unexpected pointer type'); 149 for (key in expectedValue) { 150 assert_equals(actualValue[key], expectedValue[key], 151 `Mismatch in event[${i}].${key}`); 152 } 153 } 154 155 assert_equals(eventList.length, expectedEvents.length, 156 'Unexpected number of events'); 157 }); 158 </script>