Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(211)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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 side-by-side diff with in-line comments
Download patch
« 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')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-event-test.html
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-event-test.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-event-test.html
new file mode 100644
index 0000000000000000000000000000000000000000..d970e7857abe97f2ed0ab2d10c0b72a8bfea84b7
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-event-test.html
@@ -0,0 +1,267 @@
+<!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' },
+ // TODO(zino): The expected value of region should be "button" instead of
+ // null in case of mouseout/mouseleave. Please see http://crbug.com/592992.
+ { type: 'mouseout', target: button, region: null },
+ { type: 'mouseleave', target: button, region: null },
+ { 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.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>
« 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')

Powered by Google App Engine
This is Rietveld 408576698