| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>HitRegion Event Test</title> |
| 3 <script src="../../resources/testharness.js"></script> |
| 4 <script src="../../resources/testharnessreport.js"></script> |
| 5 <script src="./resources/test-helpers.js"></script> |
| 6 <canvas width="400" height="400"> |
| 7 <button id="button"></button> |
| 8 <button id="button2"></button> |
| 9 </canvas> |
| 10 <style> |
| 11 |
| 12 body { |
| 13 margin : 0px; |
| 14 padding : 0px; |
| 15 } |
| 16 |
| 17 </style> |
| 18 <script> |
| 19 |
| 20 var canvas = document.querySelector('canvas'); |
| 21 var button = document.querySelector('canvas > #button'); |
| 22 var button2 = document.querySelector('canvas > #button2'); |
| 23 var context = canvas.getContext('2d'); |
| 24 |
| 25 async_test(function() { |
| 26 context.clearRect(0, 0, 400, 400); |
| 27 context.rect(0, 0, 50, 50); |
| 28 context.fill(); |
| 29 context.addHitRegion({ id : 'button' }); |
| 30 |
| 31 var expected = [ |
| 32 'clickbutton', |
| 33 'clickbutton' |
| 34 ]; |
| 35 var actual = []; |
| 36 |
| 37 canvas.addEventListener('click', function(e) { |
| 38 canvas.style.width = '0px'; |
| 39 actual.push(e.type + e.region); |
| 40 }); |
| 41 |
| 42 canvas.addEventListener('click', function(e) { |
| 43 actual.push(e.type + e.region); |
| 44 canvas.style.width = '400px'; |
| 45 }); |
| 46 |
| 47 if (eventSender) { |
| 48 eventSender.mouseMoveTo(40, 10); |
| 49 eventSender.mouseDown(); |
| 50 eventSender.mouseUp(); |
| 51 } |
| 52 |
| 53 assert_equals(actual.length, expected.length); |
| 54 assert_array_equals(actual, expected); |
| 55 this.done(); |
| 56 }, 'The event object should not be changed even if mutate the DOM.'); |
| 57 |
| 58 async_test(function() { |
| 59 context.rect(0, 0, 50, 50); |
| 60 context.fill(); |
| 61 context.addHitRegion({ id : 'button', control : button }); |
| 62 |
| 63 var expected = [ |
| 64 'mousemovebutton', |
| 65 'mousedownbutton', |
| 66 'mouseupbutton', |
| 67 'touchstartbutton', |
| 68 'touchendbutton', |
| 69 ]; |
| 70 var actual = []; |
| 71 |
| 72 button.addEventListener('mousedown', function(e) { |
| 73 actual.push(e.type + e.region); |
| 74 }); |
| 75 |
| 76 button.addEventListener('mousemove', function(e) { |
| 77 actual.push(e.type + e.region); |
| 78 }); |
| 79 |
| 80 button.addEventListener('mouseup', function(e) { |
| 81 actual.push(e.type + e.region); |
| 82 }); |
| 83 |
| 84 button.addEventListener('touchstart', function(e) { |
| 85 actual.push(e.type + e.changedTouches[0].region); |
| 86 }); |
| 87 |
| 88 button.addEventListener('touchend', function(e) { |
| 89 actual.push(e.type + e.changedTouches[0].region); |
| 90 }); |
| 91 |
| 92 if (eventSender) { |
| 93 eventSender.mouseMoveTo(10, 10); |
| 94 eventSender.mouseDown(); |
| 95 eventSender.mouseUp(); |
| 96 |
| 97 eventSender.clearTouchPoints(); |
| 98 eventSender.addTouchPoint(10, 10); |
| 99 eventSender.touchStart(); |
| 100 eventSender.releaseTouchPoint(0); |
| 101 eventSender.touchEnd(); |
| 102 } |
| 103 |
| 104 assert_equals(actual.length, expected.length); |
| 105 assert_array_equals(actual, expected); |
| 106 this.done(); |
| 107 }, 'Rerouting mouse/touch event test'); |
| 108 |
| 109 async_test(function() { |
| 110 context.clearRect(0, 0, 400, 400); |
| 111 context.rect(0, 0, 50, 50); |
| 112 context.fill(); |
| 113 context.addHitRegion({ id : 'button', control : button }); |
| 114 context.beginPath(); |
| 115 context.rect(50, 0, 50, 50); |
| 116 context.fill(); |
| 117 context.addHitRegion({ id : 'button2', control : button2 }); |
| 118 |
| 119 var expected = [ |
| 120 'mousemovebutton', |
| 121 'mousemovebutton2', |
| 122 'touchmovebutton', |
| 123 'touchmovebutton', |
| 124 ]; |
| 125 var actual = []; |
| 126 |
| 127 button.addEventListener('mousemove', function(e) { |
| 128 actual.push(e.type + e.region); |
| 129 }); |
| 130 |
| 131 button2.addEventListener('mousemove', function(e) { |
| 132 actual.push(e.type + e.region); |
| 133 }); |
| 134 |
| 135 button.addEventListener('touchmove', function(e) { |
| 136 actual.push(e.type + e.changedTouches[0].region); |
| 137 }); |
| 138 |
| 139 button2.addEventListener('touchmove', function(e) { |
| 140 actual.push(e.type + e.changedTouches[0].region); |
| 141 }); |
| 142 |
| 143 if (eventSender) { |
| 144 eventSender.mouseMoveTo(10, 10); |
| 145 eventSender.mouseMoveTo(60, 10); |
| 146 |
| 147 eventSender.clearTouchPoints(); |
| 148 eventSender.addTouchPoint(10, 10); |
| 149 eventSender.touchStart(); |
| 150 eventSender.updateTouchPoint(0, 11, 11); |
| 151 eventSender.touchMove(); |
| 152 eventSender.updateTouchPoint(0, 60, 10); |
| 153 eventSender.touchMove(); |
| 154 eventSender.releaseTouchPoint(0); |
| 155 eventSender.touchEnd(); |
| 156 } |
| 157 |
| 158 assert_equals(actual.length, expected.length); |
| 159 assert_array_equals(actual, expected); |
| 160 this.done(); |
| 161 }, 'Touch events are defined to have "implicit capture".'); |
| 162 |
| 163 async_test(function() { |
| 164 var tmp_canvas = document.createElement('canvas'); |
| 165 |
| 166 var without_initializer = new MouseEvent('click'); |
| 167 assert_equals(without_initializer.region, null); |
| 168 |
| 169 var default_value = new MouseEvent('click', {}); |
| 170 assert_equals(default_value.region, null); |
| 171 |
| 172 var set_null = new MouseEvent('click', { region : null }); |
| 173 assert_equals(set_null.region, null); |
| 174 |
| 175 var set_region = new MouseEvent('click', { region : 'test' }); |
| 176 assert_equals(set_region.region, 'test'); |
| 177 |
| 178 var called = []; |
| 179 tmp_canvas.addEventListener('click', function(e) { |
| 180 tmp_canvas.remove(); |
| 181 called.push(e.region); |
| 182 }); |
| 183 |
| 184 tmp_canvas.addEventListener('click', function(e) { |
| 185 tmp_canvas.remove(); |
| 186 called.push(e.region); |
| 187 }); |
| 188 |
| 189 tmp_canvas.dispatchEvent(set_null); |
| 190 tmp_canvas.dispatchEvent(set_region); |
| 191 assert_array_equals(called, [ null, null, 'test', 'test' ]); |
| 192 this.done(); |
| 193 }, 'MouseEventInit.'); |
| 194 |
| 195 async_test(function() { |
| 196 var tmp_canvas = document.createElement('canvas'); |
| 197 |
| 198 var touch1 = new Touch({ |
| 199 identifier : 0, |
| 200 target : tmp_canvas |
| 201 }); |
| 202 var touch2 = new Touch({ |
| 203 identifier : 0, |
| 204 target : tmp_canvas, |
| 205 region : null |
| 206 }); |
| 207 var touch3 = new Touch({ |
| 208 identifier : 0, |
| 209 target : tmp_canvas, |
| 210 region : 'touch' |
| 211 }); |
| 212 |
| 213 var touch_event = new TouchEvent('touchstart', { |
| 214 touches : [touch1, touch2, touch3], |
| 215 targetTouches : [touch1, touch3] |
| 216 }); |
| 217 |
| 218 assert_equals(touch_event.touches.length, 3); |
| 219 assert_equals(touch_event.touches[0].region, null); |
| 220 assert_equals(touch_event.touches[1].region, null); |
| 221 assert_equals(touch_event.touches[2].region, 'touch'); |
| 222 assert_equals(touch_event.targetTouches.length, 2); |
| 223 assert_equals(touch_event.targetTouches[0].region, null); |
| 224 assert_equals(touch_event.targetTouches[1].region, 'touch'); |
| 225 |
| 226 var called = []; |
| 227 tmp_canvas.addEventListener('touchstart', function(e) { |
| 228 tmp_canvas.remove(); |
| 229 called.push(e.touches[0].region); |
| 230 called.push(e.touches[1].region); |
| 231 called.push(e.touches[2].region); |
| 232 }); |
| 233 |
| 234 tmp_canvas.addEventListener('touchstart', function(e) { |
| 235 tmp_canvas.remove(); |
| 236 called.push(e.touches[0].region); |
| 237 called.push(e.touches[1].region); |
| 238 called.push(e.touches[2].region); |
| 239 }); |
| 240 |
| 241 tmp_canvas.dispatchEvent(touch_event); |
| 242 assert_array_equals(called, [ null, null, 'touch', null, null, 'touch' ]); |
| 243 this.done(); |
| 244 }, 'TouchEventInit.'); |
| 245 |
| 246 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
