| Index: LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html
|
| diff --git a/LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html b/LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..d4efe6930eefd49e158c4c56cd5d9e1c7d164da7
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html
|
| @@ -0,0 +1,80 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <title>Canvas Hit Regions: path2d test</title>
|
| + <script src="../../resources/js-test.js"></script>
|
| +</head>
|
| +<body>
|
| +<canvas id="canvas" width="400" height="400">
|
| + <button id="face"></button>
|
| + <button id="eyes"></button>
|
| +</canvas>
|
| +<script>
|
| +
|
| + var canvas = document.getElementById("canvas");
|
| + var context = canvas.getContext("2d");
|
| +
|
| + function clickCanvas(x, y)
|
| + {
|
| + if (!window.eventSender)
|
| + return "This test requires eventSender";
|
| +
|
| + var result = null;
|
| + function listener(event)
|
| + {
|
| + result = event.region;
|
| + }
|
| +
|
| + var rect = canvas.getBoundingClientRect();
|
| + canvas.addEventListener("click", listener, false);
|
| + eventSender.mouseMoveTo(rect.left + x, rect.top + y);
|
| + eventSender.mouseDown();
|
| + eventSender.mouseUp();
|
| + canvas.removeEventListener("click", listener, false);
|
| +
|
| + return result;
|
| + }
|
| +
|
| + var face = new Path2D();
|
| + context.fillStyle = "pink";
|
| + face.arc(200, 175, 150, 0, Math.PI * 2, true);
|
| + context.fill(face);
|
| + context.addHitRegion({ id : "face", control : document.getElementById("face"), path : face });
|
| +
|
| + var nose = new Path2D();
|
| + context.fillStyle = "black";
|
| + context.globalAlpha = .5;
|
| + nose.moveTo(200, 165);
|
| + nose.lineTo(240, 205);
|
| + nose.lineTo(160, 205);
|
| + nose.closePath();
|
| + context.fill(nose);
|
| + context.addHitRegion({ id : "nose", path : nose });
|
| +
|
| + var mouth = new Path2D();
|
| + context.fillStyle = "red";
|
| + mouth.rect(125, 240, 150, 20);
|
| + context.fill(mouth);
|
| + context.addHitRegion({ id : "mouth", path : mouth });
|
| +
|
| + var eyes = new Path2D();
|
| + context.globalAlpha = 1;
|
| + context.fillStyle = "blue";
|
| + eyes.arc(150, 125, 25, 0, Math.PI * 2, true);
|
| + eyes.arc(250, 125, 25, 0, Math.PI * 2, true);
|
| + context.fill(eyes);
|
| + context.addHitRegion({ id: "eye", control : document.getElementById("eyes"), path : eyes });
|
| +
|
| + debug("Hit detection and mouse event tests");
|
| + shouldBe("clickCanvas(100, 100)", "'face'");
|
| + shouldBe("clickCanvas(200, 200)", "'nose'");
|
| + shouldBe("clickCanvas(127, 242)", "'mouth'");
|
| + shouldBe("clickCanvas(150, 125)", "'eye'");
|
| + shouldBe("clickCanvas(250, 125)", "'eye'");
|
| + shouldBe("clickCanvas(200, 125)", "'face'");
|
| + shouldBe("clickCanvas(20, 10)", "null");
|
| + debug("");
|
| +
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 354333002:
Add path option(path2d) for hit regions on canvas2d. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master