Index: LayoutTests/fast/canvas/canvas-hit-regions-transform-test.html |
diff --git a/LayoutTests/fast/canvas/canvas-hit-regions-transform-test.html b/LayoutTests/fast/canvas/canvas-hit-regions-transform-test.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..e1030aa703eee11dc3c8e6bc0b60cadf0c9db89b |
--- /dev/null |
+++ b/LayoutTests/fast/canvas/canvas-hit-regions-transform-test.html |
@@ -0,0 +1,194 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <title>Canvas Hit Regions: 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(pathMethod) |
+ { |
+ context.removeHitRegion("hit"); |
+ context.beginPath(); |
+ context.save(); |
+ pathMethod(); |
+ context.restore(); |
+ context.addHitRegion({ |
+ id : "hit" |
+ }); |
+ } |
+ |
+ function drawStar() |
+ { |
+ context.beginPath(); |
+ context.moveTo(0, -50); |
+ context.lineTo(-15, -10); |
+ context.lineTo(-50, -10); |
+ context.lineTo(-15, 10); |
+ context.lineTo(-35, 50); |
+ context.lineTo(0, 20); |
+ context.lineTo(35, 50); |
+ context.lineTo(15, 10); |
+ context.lineTo(50, -10); |
+ context.lineTo(15, -10); |
+ context.lineTo(0, -50); |
+ } |
+ |
+ // Rectangle with context.translate() |
+ createHitRegion(function() { |
+ context.translate(20, 20); |
+ context.rect(0, 0, 50, 50); |
+ }); |
+ 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 |
+ context.rect(0, 0, 50, 50); |
+ }); |
+ 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); |
+ context.rect(0, 0, 50, 50); |
+ }); |
+ 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); |
+ drawStar(); |
+ }); |
+ 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); |
+ drawStar(); |
+ }); |
+ 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); |
+ drawStar(); |
+ }); |
+ 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> |