| 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..7e8c7e74a864a42f22ae8c7222c6c8afd0a2805f
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-event-test.html
|
| @@ -0,0 +1,246 @@
|
| +<!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');
|
| +
|
| +async_test(function() {
|
| + context.clearRect(0, 0, 400, 400);
|
| + context.rect(0, 0, 50, 50);
|
| + context.fill();
|
| + context.addHitRegion({ id : 'button' });
|
| +
|
| + var expected = [
|
| + 'clickbutton',
|
| + 'clickbutton'
|
| + ];
|
| + var actual = [];
|
| +
|
| + canvas.addEventListener('click', function(e) {
|
| + canvas.style.width = '0px';
|
| + actual.push(e.type + e.region);
|
| + });
|
| +
|
| + canvas.addEventListener('click', function(e) {
|
| + actual.push(e.type + e.region);
|
| + canvas.style.width = '400px';
|
| + });
|
| +
|
| + if (eventSender) {
|
| + eventSender.mouseMoveTo(40, 10);
|
| + eventSender.mouseDown();
|
| + eventSender.mouseUp();
|
| + }
|
| +
|
| + assert_equals(actual.length, expected.length);
|
| + assert_array_equals(actual, expected);
|
| + this.done();
|
| +}, 'The event object should not be changed even if mutate the DOM.');
|
| +
|
| +async_test(function() {
|
| + context.rect(0, 0, 50, 50);
|
| + context.fill();
|
| + context.addHitRegion({ id : 'button', control : button });
|
| +
|
| + var expected = [
|
| + 'mousemovebutton',
|
| + 'mousedownbutton',
|
| + 'mouseupbutton',
|
| + 'touchstartbutton',
|
| + 'touchendbutton',
|
| + ];
|
| + var actual = [];
|
| +
|
| + button.addEventListener('mousedown', function(e) {
|
| + actual.push(e.type + e.region);
|
| + });
|
| +
|
| + button.addEventListener('mousemove', function(e) {
|
| + actual.push(e.type + e.region);
|
| + });
|
| +
|
| + button.addEventListener('mouseup', function(e) {
|
| + actual.push(e.type + e.region);
|
| + });
|
| +
|
| + button.addEventListener('touchstart', function(e) {
|
| + actual.push(e.type + e.changedTouches[0].region);
|
| + });
|
| +
|
| + button.addEventListener('touchend', function(e) {
|
| + actual.push(e.type + e.changedTouches[0].region);
|
| + });
|
| +
|
| + if (eventSender) {
|
| + eventSender.mouseMoveTo(10, 10);
|
| + eventSender.mouseDown();
|
| + eventSender.mouseUp();
|
| +
|
| + eventSender.clearTouchPoints();
|
| + eventSender.addTouchPoint(10, 10);
|
| + eventSender.touchStart();
|
| + eventSender.releaseTouchPoint(0);
|
| + eventSender.touchEnd();
|
| + }
|
| +
|
| + assert_equals(actual.length, expected.length);
|
| + assert_array_equals(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 = [
|
| + 'mousemovebutton',
|
| + 'mousemovebutton2',
|
| + 'touchmovebutton',
|
| + 'touchmovebutton',
|
| + ];
|
| + var actual = [];
|
| +
|
| + button.addEventListener('mousemove', function(e) {
|
| + actual.push(e.type + e.region);
|
| + });
|
| +
|
| + button2.addEventListener('mousemove', function(e) {
|
| + actual.push(e.type + e.region);
|
| + });
|
| +
|
| + button.addEventListener('touchmove', function(e) {
|
| + actual.push(e.type + e.changedTouches[0].region);
|
| + });
|
| +
|
| + button2.addEventListener('touchmove', function(e) {
|
| + actual.push(e.type + e.changedTouches[0].region);
|
| + });
|
| +
|
| + 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_equals(actual.length, expected.length);
|
| + assert_array_equals(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', function(e) {
|
| + tmp_canvas.remove();
|
| + called.push(e.region);
|
| + });
|
| +
|
| + tmp_canvas.addEventListener('click', function(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>
|
|
|
Chromium Code Reviews
