third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-event-test.html - Issue 1654653002: Canvas2d: Implement rerouting event by hit region's control.

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-event-test.html

Issue 1654653002: Canvas2d: Implement rerouting event by hit region's control. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix bot errors Created 4 years, 9 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

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 function assert_event_equivalent(actual, expected) {

	26 assert_equals(actual.type, expected.type);

	27 assert_equals(actual.target, expected.target);

	28 if (actual.region !== undefined)

	29 assert_equals(actual.region, expected.region);

	30 else

	31 assert_equals(actual.changedTouches[0].region, expected.region);

	32 }

	33

	34 function assert_event_array_equivalent(actual, expected) {

	35 assert_true(Array.isArray(actual));

	36 assert_equals(actual.length, expected.length);

	37 for (var i = 0; i < actual.length; i++)

	38 assert_event_equivalent(actual[i], expected[i]);

	39 }

	40

	41 async_test(function() {

	42 var fallback_element = document.createElement('button');

	43 canvas.appendChild(fallback_element);

	44

	45 context.clearRect(0, 0, 400, 400);

	46 context.rect(0, 0, 50, 50);

	47 context.fill();

	48 context.addHitRegion({ id: 'button', control: fallback_element });

	49

	50 var expected = [

	51 { type: 'mousedown', target: fallback_element, region: 'button' }

	52 ];

	53 var actual = [];

	54 fallback_element.addEventListener('mousedown', e => actual.push(e));

	55

	56 if (eventSender) {

	57 eventSender.mouseMoveTo(40, 10);

	58 eventSender.mouseDown();

	59 eventSender.mouseUp();

	60 }

	61

	62 // After the following code, the fallback element is no longer descendant of c anvas.

	63 fallback_element.parentNode.parentNode.appendChild(fallback_element);

	64

	65 if (eventSender) {

	66 eventSender.mouseMoveTo(40, 10);

	67 eventSender.mouseDown();

	68 eventSender.mouseUp();

	69 }

	70

	71 assert_event_array_equivalent(actual, expected);

	72 this.done();

	73 }, 'If the control is not descendant of canvas, event should not be fired.');

	74

	75 async_test(function() {

	76 context.clearRect(0, 0, 400, 400);

	77 context.rect(0, 0, 50, 50);

	78 context.fill();

	79 context.addHitRegion({ id: 'button' });

	80

	81 var expected = [

	82 { type: 'click', target: canvas, region: 'button' },

	83 { type: 'click', target: canvas, region: 'button' },

	84 ];

	85 var actual = [];

	86

	87 canvas.addEventListener('click', e => { canvas.style.width = '0px'; actual.pus h(e); });

	88 canvas.addEventListener('click', e => { actual.push(e); canvas.style.width = ' 400px'; });

	89

	90 if (eventSender) {

	91 eventSender.mouseMoveTo(40, 10);

	92 eventSender.mouseDown();

	93 eventSender.mouseUp();

	94 }

	95

	96 assert_event_array_equivalent(actual, expected);

	97 this.done();

	98 }, 'The event object should not be changed even if mutate the DOM.');

	99

	100 async_test(function() {

	101 context.rect(1, 1, 50, 50);

	102 context.fill();

	103 context.addHitRegion({ id: 'button', control: button });

	104

	105 var expected = [

	106 { type: 'mouseover', target: button, region: 'button' },

	107 { type: 'mouseenter', target: button, region: 'button' },

	108 { type: 'mousemove', target: button, region: 'button' },

	109 { type: 'mousemove', target: button, region: 'button' },

	110 { type: 'mousedown', target: button, region: 'button' },

	111 { type: 'mouseup', target: button, region: 'button' },

	112 // TODO(zino): The expected value of region should be "button" instead of

	113 // null in case of mouseout/mouseleave. Please see http://crbug.com/592992.

	114 { type: 'mouseout', target: button, region: null },

	115 { type: 'mouseleave', target: button, region: null },

	116 { type: 'touchstart', target: button, region: 'button' },

	117 { type: 'touchend', target: button, region: 'button' },

	118 ];

	119 var actual = [];

	120

	121 button.addEventListener('mouseover', e => actual.push(e));

	122 button.addEventListener('mouseenter', e => actual.push(e));

	123 button.addEventListener('mousemove', e => actual.push(e));

	124 button.addEventListener('mousedown', e => actual.push(e));

	125 button.addEventListener('mouseup', e => actual.push(e));

	126 button.addEventListener('mouseout', e => actual.push(e));

	127 button.addEventListener('mouseleave', e => actual.push(e));

	128 button.addEventListener('touchstart', e => actual.push(e));

	129 button.addEventListener('touchend', e => actual.push(e));

	130

	131 if (eventSender) {

	132 eventSender.mouseMoveTo(0, 0);

	133 eventSender.mouseMoveTo(10, 10);

	134 eventSender.mouseDown();

	135 eventSender.mouseUp();

	136 eventSender.mouseMoveTo(60, 60);

	137

	138 eventSender.clearTouchPoints();

	139 eventSender.addTouchPoint(10, 10);

	140 eventSender.touchStart();

	141 eventSender.releaseTouchPoint(0);

	142 eventSender.touchEnd();

	143 }

	144

	145 assert_event_array_equivalent(actual, expected);

	146 this.done();

	147 }, 'Rerouting mouse/touch event test');

	148

	149 async_test(function() {

	150 context.clearRect(0, 0, 400, 400);

	151 context.rect(0, 0, 50, 50);

	152 context.fill();

	153 context.addHitRegion({ id: 'button', control: button });

	154 context.beginPath();

	155 context.rect(50, 0, 50, 50);

	156 context.fill();

	157 context.addHitRegion({ id: 'button2', control: button2 });

	158

	159 var expected = [

	160 { type: 'mousemove', target: button, region: 'button' },

	161 { type: 'mousemove', target: button2, region: 'button2' },

	162 { type: 'touchmove', target: button, region: 'button' },

	163 { type: 'touchmove', target: button, region: 'button' },

	164 ];

	165 var actual = [];

	166

	167 button.addEventListener('mousemove', e => actual.push(e));

	168 button2.addEventListener('mousemove', e => actual.push(e));

	169 button.addEventListener('touchmove', e => actual.push(e));

	170 button2.addEventListener('touchmove', () => assert_unreached());

	171

	172 if (eventSender) {

	173 eventSender.mouseMoveTo(10, 10);

	174 eventSender.mouseMoveTo(60, 10);

	175

	176 eventSender.clearTouchPoints();

	177 eventSender.addTouchPoint(10, 10);

	178 eventSender.touchStart();

	179 eventSender.updateTouchPoint(0, 11, 11);

	180 eventSender.touchMove();

	181 eventSender.updateTouchPoint(0, 60, 10);

	182 eventSender.touchMove();

	183 eventSender.releaseTouchPoint(0);

	184 eventSender.touchEnd();

	185 }

	186

	187 assert_event_array_equivalent(actual, expected);

	188 this.done();

	189 }, 'Touch events are defined to have "implicit capture".');

	190

	191 async_test(function() {

	192 var tmp_canvas = document.createElement('canvas');

	193

	194 var without_initializer = new MouseEvent('click');

	195 assert_equals(without_initializer.region, null);

	196

	197 var default_value = new MouseEvent('click', {});

	198 assert_equals(default_value.region, null);

	199

	200 var set_null = new MouseEvent('click', { region: null });

	201 assert_equals(set_null.region, null);

	202

	203 var set_region = new MouseEvent('click', { region: 'test' });

	204 assert_equals(set_region.region, 'test');

	205

	206 var called = [];

	207 tmp_canvas.addEventListener('click', e => { tmp_canvas.remove(); called.push(e .region) });

	208 tmp_canvas.addEventListener('click', e => { tmp_canvas.remove(); called.push(e .region) });

	209

	210 tmp_canvas.dispatchEvent(set_null);

	211 tmp_canvas.dispatchEvent(set_region);

	212 assert_array_equals(called, [ null, null, 'test', 'test' ]);

	213 this.done();

	214 }, 'MouseEventInit.');

	215

	216 async_test(function() {

	217 var tmp_canvas = document.createElement('canvas');

	218

	219 var touch1 = new Touch({

	220 identifier: 0,

	221 target: tmp_canvas

	222 });

	223 var touch2 = new Touch({

	224 identifier: 0,

	225 target: tmp_canvas,

	226 region: null

	227 });

	228 var touch3 = new Touch({

	229 identifier: 0,

	230 target: tmp_canvas,

	231 region: 'touch'

	232 });

	233

	234 var touch_event = new TouchEvent('touchstart', {

	235 touches: [touch1, touch2, touch3],

	236 targetTouches: [touch1, touch3]

	237 });

	238

	239 assert_equals(touch_event.touches.length, 3);

	240 assert_equals(touch_event.touches[0].region, null);

	241 assert_equals(touch_event.touches[1].region, null);

	242 assert_equals(touch_event.touches[2].region, 'touch');

	243 assert_equals(touch_event.targetTouches.length, 2);

	244 assert_equals(touch_event.targetTouches[0].region, null);

	245 assert_equals(touch_event.targetTouches[1].region, 'touch');

	246

	247 var called = [];

	248 tmp_canvas.addEventListener('touchstart', function(e) {

	249 tmp_canvas.remove();

	250 called.push(e.touches[0].region);

	251 called.push(e.touches[1].region);

	252 called.push(e.touches[2].region);

	253 });

	254

	255 tmp_canvas.addEventListener('touchstart', function(e) {

	256 tmp_canvas.remove();

	257 called.push(e.touches[0].region);

	258 called.push(e.touches[1].region);

	259 called.push(e.touches[2].region);

	260 });

	261

	262 tmp_canvas.dispatchEvent(touch_event);

	263 assert_array_equals(called, [ null, null, 'touch', null, null, 'touch' ]);

	264 this.done();

	265 }, 'TouchEventInit.');

	266

	267 </script>

OLD	NEW

« no previous file with comments | « no previous file | third_party/WebKit/Source/core/core.gypi » ('j') | third_party/WebKit/Source/core/input/EventHandler.cpp » ('J')