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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test.html

Issue 354333002: Add path option(path2d) for hit regions on canvas2d. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: simplify Created 6 years, 6 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 | « LayoutTests/fast/canvas/canvas-hit-regions-path2d-test-expected.txt ('k') | LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test-expected.txt » ('j') | Source/core/html/canvas/CanvasRenderingContext2D.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test.html
diff --git a/LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test.html b/LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test.html
new file mode 100644
index 0000000000000000000000000000000000000000..3d58c597128569eabcd797b148c5b5542227071b
--- /dev/null
+++ b/LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Canvas Hit Regions: path2d with transform test</title>
+ <script src="../../resources/js-test.js"></script>
+</head>
+<body>
+<canvas id="canvas" width="400" height="400"></canvas>
+<script>
+
+ var canvas = document.getElementById("canvas");
+ var context = canvas.getContext("2d");
+ var testSet = [];
+
+ function clickCanvas(x, y)
+ {
+ if (!window.eventSender)
+ return "This test requires eventSender";
+
+ var result = null;
+ function listener(event)
+ {
+ canvas.removeEventListener("click", listener, false);
+ result = event.region;
+ }
+
+ var rect = canvas.getBoundingClientRect();
+ canvas.addEventListener("click", listener, false);
+ eventSender.mouseMoveTo(rect.left + x, rect.top + y);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+
+ return result;
+ }
+
+ function clickTests(message, tests)
+ {
+ testSet.push({
+ type : "debug",
+ message : message
+ });
+
+ for (var i = 0; i < tests.length; i++)
+ testSet.push({
+ type : "shouldBe",
+ actual : clickCanvas(tests[i].x, tests[i].y),
+ expected : tests[i].expected
+ });
+
+ testSet.push({
+ type : "debug",
+ message : ""
+ });
+ }
+
+ function createHitRegion(transformMethod, isRect)
+ {
+ context.removeHitRegion("hit");
+ context.save();
+ transformMethod();
+ context.addHitRegion({
+ id : "hit",
+ path : drawSomething(isRect)
+ });
+ context.restore();
+ }
+
+ function drawSomething(isRect)
+ {
+ var path = new Path2D();
+
+ if (isRect) {
+ path.rect(0, 0, 50, 50);
+ return path;
+ }
+
+ // draw star
+ path.moveTo(0, -50);
+ path.lineTo(-15, -10);
+ path.lineTo(-50, -10);
+ path.lineTo(-15, 10);
+ path.lineTo(-35, 50);
+ path.lineTo(0, 20);
+ path.lineTo(35, 50);
+ path.lineTo(15, 10);
+ path.lineTo(50, -10);
+ path.lineTo(15, -10);
+ path.lineTo(0, -50);
+ return path;
+ }
+
+ // Rectangle with context.translate()
+ createHitRegion(function() {
+ context.translate(20, 20);
+ }, true);
+ clickTests("Rectangle with context.translate():", [
+ { x : 1, y : 1, expected : null },
+ { x : 31, y : 21, expected : "hit" },
+ { x : 51, y : 51, expected : "hit" },
+ { x : 10, y : 5, expected : null },
+ { x : 61, y : 61, expected : "hit" }
+ ]);
+
+ // Rectangle with context.rotate()
+ createHitRegion(function() {
+ context.rotate(Math.PI * 0.25); // 45 degrees
+ }, true);
+ clickTests("Rectangle with context.rotate():", [
+ { x : 20, y : 5, expected : null },
+ { x : 0, y : 25, expected : "hit" },
+ { x : 49, y : 49, expected : null },
+ { x : 0, y : 51, expected : "hit" },
+ ]);
+
+ // Rectangle with context.scale()
+ createHitRegion(function() {
+ context.scale(2, 2);
+ }, true);
+ clickTests("Rectangle with context.scale():", [
+ { x : 1, y : 1, expected : "hit" },
+ { x : 49, y : 49, expected : "hit" },
+ { x : 51, y : 51, expected : "hit" },
+ { x : 99, y : 99, expected : "hit" },
+ ]);
+
+ // Non rectangle (star) with context.translate()
+ createHitRegion(function() {
+ context.translate(50, 50);
+ }, false);
+ clickTests("Non rectangle (star) with context.translate():", [
+ { x : 26, y : 23, expected : null },
+ { x : 82, y : 65, expected : null },
+ { x : 51, y : 21, expected : "hit" },
+ { x : 74, y : 49, expected : "hit" },
+ { x : 49, y : 88, expected : null },
+ { x : 13, y : 65, expected : null },
+ { x : 66, y : 76, expected : "hit" },
+ { x : 76, y : 23, expected : null },
+ { x : 38, y : 76, expected : "hit" },
+ { x : 28, y : 47, expected : "hit" },
+ ]);
+
+ // Non rectangle (star) with context.rotate()
+ createHitRegion(function() {
+ context.translate(50, 50);
+ context.rotate(Math.PI * 0.25);
+ }, false);
+ clickTests("Non rectangle (star) with context.rotate():", [
+ { x : 26, y : 23, expected : "hit" },
+ { x : 82, y : 65, expected : null },
+ { x : 51, y : 21, expected : null },
+ { x : 74, y : 49, expected : null },
+ { x : 49, y : 88, expected : null },
+ { x : 13, y : 65, expected : null },
+ { x : 66, y : 76, expected : null },
+ { x : 76, y : 23, expected : "hit" },
+ { x : 38, y : 76, expected : "hit" },
+ { x : 28, y : 47, expected : null },
+ ]);
+
+ // Non rectangle (star) with context.scale()
+ createHitRegion(function() {
+ context.translate(25, 25);
+ context.scale(0.5, 0.5);
+ }, false);
+ clickTests("Non rectangle (star) with context.scale():", [
+ { x : 28, y : 13, expected : "hit" },
+ { x : 38, y : 24, expected : "hit" },
+ { x : 34, y : 38, expected : "hit" },
+ { x : 13, y : 12, expected : null },
+ { x : 36, y : 12, expected : null },
+ { x : 40, y : 33, expected : null },
+ { x : 9, y : 31, expected : null },
+ { x : 18, y : 41, expected : "hit" },
+ { x : 12, y : 25, expected : "hit" },
+ { x : 25, y : 42, expected : null },
+ ]);
+
+ for (var i = 0; i < testSet.length; i++) {
+ var test = testSet[i];
+
+ if (test.type == "debug") {
+ debug(test.message);
+ }
+ else if (test.type == "shouldBe") {
+ window.region = test.expected;
+ if (test.expected == null)
+ shouldBe("region", String(test.actual));
+ else
+ shouldBe("region", "'" + test.actual + "'");
+ }
+ }
+
+</script>
+</body>
+</html>
« no previous file with comments | « LayoutTests/fast/canvas/canvas-hit-regions-path2d-test-expected.txt ('k') | LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test-expected.txt » ('j') | Source/core/html/canvas/CanvasRenderingContext2D.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698