| <!DOCTYPE html> |
| <title>HitRegion Event Test</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="./resources/test-helpers.js"></script> |
| <canvas width="400" height="400"> |
| <button id="button"></button> |
| <button id="button2"></button> |
| </canvas> |
| <style> |
| |
| body { |
| margin : 0px; |
| padding : 0px; |
| } |
| |
| </style> |
| <script> |
| |
| var canvas = document.querySelector('canvas'); |
| var button = document.querySelector('canvas > #button'); |
| var button2 = document.querySelector('canvas > #button2'); |
| var context = canvas.getContext('2d'); |
| |
| function assert_event_equivalent(actual, expected) { |
| assert_equals(actual.type, expected.type); |
| assert_equals(actual.target, expected.target); |
| if (actual.region !== undefined) |
| assert_equals(actual.region, expected.region); |
| else |
| assert_equals(actual.changedTouches[0].region, expected.region); |
| } |
| |
| function assert_event_array_equivalent(actual, expected) { |
| assert_true(Array.isArray(actual)); |
| assert_equals(actual.length, expected.length); |
| for (var i = 0; i < actual.length; i++) |
| assert_event_equivalent(actual[i], expected[i]); |
| } |
| |
| async_test(function() { |
| var fallback_element = document.createElement('button'); |
| canvas.appendChild(fallback_element); |
| |
| context.clearRect(0, 0, 400, 400); |
| context.rect(0, 0, 50, 50); |
| context.fill(); |
| context.addHitRegion({ id: 'button', control: fallback_element }); |
| |
| var expected = [ |
| { type: 'mousedown', target: fallback_element, region: 'button' } |
| ]; |
| var actual = []; |
| fallback_element.addEventListener('mousedown', e => actual.push(e)); |
| |
| if (eventSender) { |
| eventSender.mouseMoveTo(40, 10); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| // After the following code, the fallback element is no longer descendant of canvas. |
| fallback_element.parentNode.parentNode.appendChild(fallback_element); |
| |
| if (eventSender) { |
| eventSender.mouseMoveTo(40, 10); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| assert_event_array_equivalent(actual, expected); |
| this.done(); |
| }, 'If the control is not descendant of canvas, event should not be fired.'); |
| |
| async_test(function() { |
| context.clearRect(0, 0, 400, 400); |
| context.rect(0, 0, 50, 50); |
| context.fill(); |
| context.addHitRegion({ id: 'button' }); |
| |
| var expected = [ |
| { type: 'click', target: canvas, region: 'button' }, |
| { type: 'click', target: canvas, region: 'button' }, |
| ]; |
| var actual = []; |
| |
| canvas.addEventListener('click', e => { canvas.style.width = '0px'; actual.push(e); }); |
| canvas.addEventListener('click', e => { actual.push(e); canvas.style.width = '400px'; }); |
| |
| if (eventSender) { |
| eventSender.mouseMoveTo(40, 10); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| assert_event_array_equivalent(actual, expected); |
| this.done(); |
| }, 'The event object should not be changed even if mutate the DOM.'); |
| |
| async_test(function() { |
| context.rect(1, 1, 50, 50); |
| context.fill(); |
| context.addHitRegion({ id: 'button', control: button }); |
| |
| var expected = [ |
| { type: 'mouseover', target: button, region: 'button' }, |
| { type: 'mouseenter', target: button, region: 'button' }, |
| { type: 'mousemove', target: button, region: 'button' }, |
| { type: 'mousemove', target: button, region: 'button' }, |
| { type: 'mousedown', target: button, region: 'button' }, |
| { type: 'mouseup', target: button, region: 'button' }, |
| { type: 'mouseout', target: button, region: 'button' }, |
| { type: 'mouseleave', target: button, region: 'button' }, |
| { type: 'touchstart', target: button, region: 'button' }, |
| { type: 'touchend', target: button, region: 'button' }, |
| ]; |
| var actual = []; |
| |
| button.addEventListener('mouseover', e => actual.push(e)); |
| button.addEventListener('mouseenter', e => actual.push(e)); |
| button.addEventListener('mousemove', e => actual.push(e)); |
| button.addEventListener('mousedown', e => actual.push(e)); |
| button.addEventListener('mouseup', e => actual.push(e)); |
| button.addEventListener('mouseout', e => actual.push(e)); |
| button.addEventListener('mouseleave', e => actual.push(e)); |
| button.addEventListener('touchstart', e => actual.push(e)); |
| button.addEventListener('touchend', e => actual.push(e)); |
| |
| if (eventSender) { |
| eventSender.mouseMoveTo(0, 0); |
| eventSender.mouseMoveTo(10, 10); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| eventSender.mouseMoveTo(60, 60); |
| |
| eventSender.clearTouchPoints(); |
| eventSender.addTouchPoint(10, 10); |
| eventSender.touchStart(); |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| } |
| |
| assert_event_array_equivalent(actual, expected); |
| this.done(); |
| }, 'Rerouting mouse/touch event test'); |
| |
| async_test(function() { |
| context.rect(1, 1, 50, 50); |
| context.fill(); |
| context.addHitRegion({ control: button }); |
| |
| var expected = [ |
| { type: 'mouseover', target: button, region: null }, |
| { type: 'mouseenter', target: button, region: null }, |
| { type: 'mousemove', target: button, region: null }, |
| { type: 'mousemove', target: button, region: null }, |
| { type: 'mousedown', target: button, region: null }, |
| { type: 'mouseup', target: button, region: null }, |
| { type: 'mouseout', target: button, region: null }, |
| { type: 'mouseleave', target: button, region: null }, |
| { type: 'touchstart', target: button, region: null }, |
| { type: 'touchend', target: button, region: null }, |
| ]; |
| var actual = []; |
| |
| button.addEventListener('mouseover', e => actual.push(e)); |
| button.addEventListener('mouseenter', e => actual.push(e)); |
| button.addEventListener('mousemove', e => actual.push(e)); |
| button.addEventListener('mousedown', e => actual.push(e)); |
| button.addEventListener('mouseup', e => actual.push(e)); |
| button.addEventListener('mouseout', e => actual.push(e)); |
| button.addEventListener('mouseleave', e => actual.push(e)); |
| button.addEventListener('touchstart', e => actual.push(e)); |
| button.addEventListener('touchend', e => actual.push(e)); |
| |
| if (eventSender) { |
| eventSender.mouseMoveTo(0, 0); |
| eventSender.mouseMoveTo(10, 10); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| eventSender.mouseMoveTo(60, 60); |
| |
| eventSender.clearTouchPoints(); |
| eventSender.addTouchPoint(10, 10); |
| eventSender.touchStart(); |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| } |
| |
| assert_event_array_equivalent(actual, expected); |
| this.done(); |
| }, 'Rerouting mouse/touch event test but the id of hit region is unset.'); |
| |
| async_test(function() { |
| context.clearRect(0, 0, 400, 400); |
| context.rect(0, 0, 50, 50); |
| context.fill(); |
| context.addHitRegion({ id: 'button', control: button }); |
| context.beginPath(); |
| context.rect(50, 0, 50, 50); |
| context.fill(); |
| context.addHitRegion({ id: 'button2', control: button2 }); |
| |
| var expected = [ |
| { type: 'mousemove', target: button, region: 'button' }, |
| { type: 'mousemove', target: button2, region: 'button2' }, |
| { type: 'touchmove', target: button, region: 'button' }, |
| { type: 'touchmove', target: button, region: 'button' }, |
| ]; |
| var actual = []; |
| |
| button.addEventListener('mousemove', e => actual.push(e)); |
| button2.addEventListener('mousemove', e => actual.push(e)); |
| button.addEventListener('touchmove', e => actual.push(e)); |
| button2.addEventListener('touchmove', () => assert_unreached()); |
| |
| if (eventSender) { |
| eventSender.mouseMoveTo(10, 10); |
| eventSender.mouseMoveTo(60, 10); |
| |
| eventSender.clearTouchPoints(); |
| eventSender.addTouchPoint(10, 10); |
| eventSender.touchStart(); |
| eventSender.updateTouchPoint(0, 11, 11); |
| eventSender.touchMove(); |
| eventSender.updateTouchPoint(0, 60, 10); |
| eventSender.touchMove(); |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| } |
| |
| assert_event_array_equivalent(actual, expected); |
| this.done(); |
| }, 'Touch events are defined to have "implicit capture".'); |
| |
| async_test(function() { |
| var tmp_canvas = document.createElement('canvas'); |
| |
| var without_initializer = new MouseEvent('click'); |
| assert_equals(without_initializer.region, null); |
| |
| var default_value = new MouseEvent('click', {}); |
| assert_equals(default_value.region, null); |
| |
| var set_null = new MouseEvent('click', { region: null }); |
| assert_equals(set_null.region, null); |
| |
| var set_region = new MouseEvent('click', { region: 'test' }); |
| assert_equals(set_region.region, 'test'); |
| |
| var called = []; |
| tmp_canvas.addEventListener('click', e => { tmp_canvas.remove(); called.push(e.region) }); |
| tmp_canvas.addEventListener('click', e => { tmp_canvas.remove(); called.push(e.region) }); |
| |
| tmp_canvas.dispatchEvent(set_null); |
| tmp_canvas.dispatchEvent(set_region); |
| assert_array_equals(called, [ null, null, 'test', 'test' ]); |
| this.done(); |
| }, 'MouseEventInit.'); |
| |
| async_test(function() { |
| var tmp_canvas = document.createElement('canvas'); |
| |
| var touch1 = new Touch({ |
| identifier: 0, |
| target: tmp_canvas |
| }); |
| var touch2 = new Touch({ |
| identifier: 0, |
| target: tmp_canvas, |
| region: null |
| }); |
| var touch3 = new Touch({ |
| identifier: 0, |
| target: tmp_canvas, |
| region: 'touch' |
| }); |
| |
| var touch_event = new TouchEvent('touchstart', { |
| touches: [touch1, touch2, touch3], |
| targetTouches: [touch1, touch3] |
| }); |
| |
| assert_equals(touch_event.touches.length, 3); |
| assert_equals(touch_event.touches[0].region, null); |
| assert_equals(touch_event.touches[1].region, null); |
| assert_equals(touch_event.touches[2].region, 'touch'); |
| assert_equals(touch_event.targetTouches.length, 2); |
| assert_equals(touch_event.targetTouches[0].region, null); |
| assert_equals(touch_event.targetTouches[1].region, 'touch'); |
| |
| var called = []; |
| tmp_canvas.addEventListener('touchstart', function(e) { |
| tmp_canvas.remove(); |
| called.push(e.touches[0].region); |
| called.push(e.touches[1].region); |
| called.push(e.touches[2].region); |
| }); |
| |
| tmp_canvas.addEventListener('touchstart', function(e) { |
| tmp_canvas.remove(); |
| called.push(e.touches[0].region); |
| called.push(e.touches[1].region); |
| called.push(e.touches[2].region); |
| }); |
| |
| tmp_canvas.dispatchEvent(touch_event); |
| assert_array_equals(called, [ null, null, 'touch', null, null, 'touch' ]); |
| this.done(); |
| }, 'TouchEventInit.'); |
| |
| </script> |
