| 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>
|
|
|