third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Canvas Hit Regions: path2d with transform test</title>
   5   <script src="../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <canvas id="canvas" width="400" height="400"></canvas>
   9 <script src="./resources/canvas-hit-region-event.js"></script>
  10 <script>
  11
  12   var canvas = document.getElementById("canvas");
  13   var context = canvas.getContext("2d");
  14   var testSet = [];
  15
  16   function clickTests(message, tests)
  17   {
  18     testSet.push({
  19       type : "debug",
  20       message : message
  21     });
  22
  23     for (var i = 0; i < tests.length; i++)
  24       testSet.push({
  25         type : "shouldBe",
  26         actual : clickCanvas(tests[i].x, tests[i].y),
  27         expected : tests[i].expected
  28       });
  29
  30     testSet.push({
  31       type : "debug",
  32       message : ""
  33     });
  34   }
  35
  36   function createHitRegion(transformMethod, isRect)
  37   {
  38     context.removeHitRegion("hit");
  39     context.save();
  40     transformMethod();
  41     context.addHitRegion({
  42       id : "hit",
  43       path : drawSomething(isRect)
  44     });
  45     context.restore();
  46   }
  47
  48   function drawSomething(isRect)
  49   {
  50     var path = new Path2D();
  51
  52     if (isRect) {
  53       path.rect(0, 0, 50, 50);
  54       return path;
  55     }
  56
  57     // draw star
  58     path.moveTo(0, -50);
  59     path.lineTo(-15, -10);
  60     path.lineTo(-50, -10);
  61     path.lineTo(-15, 10);
  62     path.lineTo(-35, 50);
  63     path.lineTo(0, 20);
  64     path.lineTo(35, 50);
  65     path.lineTo(15, 10);
  66     path.lineTo(50, -10);
  67     path.lineTo(15, -10);
  68     path.lineTo(0, -50);
  69     return path;
  70   }
  71
  72   // Rectangle with context.translate()
  73   createHitRegion(function() {
  74     context.translate(20, 20);
  75   }, true);
  76   clickTests("Rectangle with context.translate():", [
  77     { x : 1, y : 1, expected : null },
  78     { x : 31, y : 21, expected : "hit" },
  79     { x : 51, y : 51, expected : "hit" },
  80     { x : 10, y : 5, expected : null },
  81     { x : 61, y : 61, expected : "hit" }
  82   ]);
  83
  84   // Rectangle with context.rotate()
  85   createHitRegion(function() {
  86     context.rotate(Math.PI * 0.25); // 45 degrees
  87   }, true);
  88   clickTests("Rectangle with context.rotate():", [
  89     { x : 20, y : 5, expected : null },
  90     { x : 0, y : 25, expected : "hit" },
  91     { x : 49, y : 49, expected : null },
  92     { x : 0, y : 51, expected : "hit" },
  93   ]);
  94
  95   // Rectangle with context.scale()
  96   createHitRegion(function() {
  97     context.scale(2, 2);
  98   }, true);
  99   clickTests("Rectangle with context.scale():", [
 100     { x : 1, y : 1, expected : "hit" },
 101     { x : 49, y : 49, expected : "hit" },
 102     { x : 51, y : 51, expected : "hit" },
 103     { x : 99, y : 99, expected : "hit" },
 104   ]);
 105
 106   // Non rectangle (star) with context.translate()
 107   createHitRegion(function() {
 108     context.translate(50, 50);
 109   }, false);
 110   clickTests("Non rectangle (star) with context.translate():", [
 111     { x : 26, y : 23, expected : null },
 112     { x : 82, y : 65, expected : null },
 113     { x : 51, y : 21, expected : "hit" },
 114     { x : 74, y : 49, expected : "hit" },
 115     { x : 49, y : 88, expected : null },
 116     { x : 13, y : 65, expected : null },
 117     { x : 66, y : 76, expected : "hit" },
 118     { x : 76, y : 23, expected : null },
 119     { x : 38, y : 76, expected : "hit" },
 120     { x : 28, y : 47, expected : "hit" },
 121   ]);
 122
 123   // Non rectangle (star) with context.rotate()
 124   createHitRegion(function() {
 125     context.translate(50, 50);
 126     context.rotate(Math.PI * 0.25);
 127   }, false);
 128   clickTests("Non rectangle (star) with context.rotate():", [
 129     { x : 26, y : 23, expected : "hit" },
 130     { x : 82, y : 65, expected : null },
 131     { x : 51, y : 21, expected : null },
 132     { x : 74, y : 49, expected : null },
 133     { x : 49, y : 88, expected : null },
 134     { x : 13, y : 65, expected : null },
 135     { x : 66, y : 76, expected : null },
 136     { x : 76, y : 23, expected : "hit" },
 137     { x : 38, y : 76, expected : "hit" },
 138     { x : 28, y : 47, expected : null },
 139   ]);
 140
 141   // Non rectangle (star) with context.scale()
 142   createHitRegion(function() {
 143     context.translate(25, 25);
 144     context.scale(0.5, 0.5);
 145   }, false);
 146   clickTests("Non rectangle (star) with context.scale():", [
 147     { x : 28, y : 13, expected : "hit" },
 148     { x : 38, y : 24, expected : "hit" },
 149     { x : 34, y : 38, expected : "hit" },
 150     { x : 13, y : 12, expected : null },
 151     { x : 36, y : 12, expected : null },
 152     { x : 40, y : 33, expected : null },
 153     { x : 9, y : 31, expected : null },
 154     { x : 18, y : 41, expected : "hit" },
 155     { x : 12, y : 25, expected : "hit" },
 156     { x : 25, y : 42, expected : null },
 157   ]);
 158
 159   for (var i = 0; i < testSet.length; i++) {
 160     var test = testSet[i];
 161
 162     if (test.type == "debug") {
 163       debug(test.message);
 164     }
 165     else if (test.type == "shouldBe") {
 166       window.region = test.expected;
 167       if (test.expected == null)
 168         shouldBe("region", String(test.actual));
 169       else
 170         shouldBe("region", "'" + test.actual + "'");
 171     }
 172   }
 173
 174 </script>
 175 </body>
 176 </html>