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: Created 4 years, 10 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 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' });
	Rick Byers 2016/02/23 20:26:08 Can you add a test which adds a hit region for an Can you add a test which adds a hit region for an element that isn't a descendant of the canvas element? Probably also one that is a descendant at the time addHitRegion is called but is then moved to some other place in the DOM? I think those cases are important because it could be really confusing / breaking to non-hit-region-aware scripts if we ever accidentally sent events that occurred on the canvas to some unrelated element elsewhere in the DOM (where they wouldn't bubble up to the canvas element). zino 2016/03/08 12:33:48 Done. There was a basic test when calling addHitR Show quoted text On 2016/02/23 20:26:08, Rick Byers wrote: > Can you add a test which adds a hit region for an element that isn't a > descendant of the canvas element? Probably also one that is a descendant at the > time addHitRegion is called but is then moved to some other place in the DOM? > > I think those cases are important because it could be really confusing / > breaking to non-hit-region-aware scripts if we ever accidentally sent events > that occurred on the canvas to some unrelated element elsewhere in the DOM > (where they wouldn't bubble up to the canvas element). Done. There was a basic test when calling addHitRegion(): fast/canvas/canvas-hit-regions-fallback-element-test.html I also added a test when event happen if its event target is not descendant of canvas. Rick Byers 2016/03/10 21:36:28 The tests look excellent now, thanks for the impro Show quoted text On 2016/03/08 12:33:48, zino wrote: > On 2016/02/23 20:26:08, Rick Byers wrote: > > Can you add a test which adds a hit region for an element that isn't a > > descendant of the canvas element? Probably also one that is a descendant at > the > > time addHitRegion is called but is then moved to some other place in the DOM? > > > > I think those cases are important because it could be really confusing / > > breaking to non-hit-region-aware scripts if we ever accidentally sent events > > that occurred on the canvas to some unrelated element elsewhere in the DOM > > (where they wouldn't bubble up to the canvas element). > > Done. > > There was a basic test when calling addHitRegion(): > fast/canvas/canvas-hit-regions-fallback-element-test.html > > I also added a test when event happen if its event target is not descendant of > canvas. The tests look excellent now, thanks for the improvements!
	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);
	Rick Byers 2016/02/23 20:26:08 I think you also want to test the event target, ri I think you also want to test the event target, right? 'e.target' should be #button not the canvas element. zino 2016/03/08 12:33:48 Done. Show quoted text On 2016/02/23 20:26:08, Rick Byers wrote: > I think you also want to test the event target, right? 'e.target' should be > #button not the canvas element. Done.
	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) {
	Rick Byers 2016/02/23 20:26:08 You probably want to also check mouseover, mouseou You probably want to also check mouseover, mouseout, mouseenter and mouseleave events. They may be a little tricky to get right (feel free to file a separate bug for any that aren't working rather than try to fix it in this CL). In particular, what is the 'region' of a mouseout/mouseleave event supposed to be? The region that was just left? zino 2016/03/08 12:33:48 I added the test cases. But mouseout/mouseleave do Show quoted text On 2016/02/23 20:26:08, Rick Byers wrote: > You probably want to also check mouseover, mouseout, mouseenter and mouseleave > events. They may be a little tricky to get right (feel free to file a separate > bug for any that aren't working rather than try to fix it in this CL). > > In particular, what is the 'region' of a mouseout/mouseleave event supposed to > be? The region that was just left? I added the test cases. But mouseout/mouseleave don't work correctly. I've filed a separate bug and I'll fix it in follow-up CL.
	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

« no previous file with comments | « no previous file | third_party/WebKit/Source/core/dom/Touch.h » ('j') | third_party/WebKit/Source/core/dom/Touch.h » ('J')