dom/canvas/test/test_isPointInStroke.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Canvas test: isPointInStroke</title>
   6   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   8 </head>
   9 <body>
  10 <canvas id="c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
  11 <script type="application/javascript">
  12
  13 var canvas = document.getElementById('c');
  14 var ctx = canvas.getContext('2d');
  15
  16
  17 ctx.lineWidth = 5;
  18
  19
  20 ok(ctx.isPointInStroke(50, 25) === false, 'ctx.isPointInStroke(50, 25) === false');
  21
  22
  23 ctx.beginPath();
  24 ctx.rect(0, 0, 20, 20);
  25
  26 ok(ctx.isPointInStroke(-4, -4) === false, 'ctx.isPointInStroke(-4, -4) === false');
  27 ok(ctx.isPointInStroke(4, 4) === false, 'ctx.isPointInStroke(4, 4) === false');
  28 ok(ctx.isPointInStroke(16, 16) === false, 'ctx.isPointInStroke(16, 16) === false');
  29 ok(ctx.isPointInStroke(24, 24) === false, 'ctx.isPointInStroke(24, 24) === false');
  30
  31 ok(ctx.isPointInStroke(-2, -2) === true, 'ctx.isPointInStroke(-2, -2) === true');
  32 ok(ctx.isPointInStroke(2, 2) === true, 'ctx.isPointInStroke(2, 2) === true');
  33 ok(ctx.isPointInStroke(18, 18) === true, 'ctx.isPointInStroke(18, 18) === true');
  34 ok(ctx.isPointInStroke(22, 22) === true, 'ctx.isPointInStroke(22, 22) === true');
  35
  36
  37 ctx.beginPath();
  38 ctx.rect(25, 25, 20, 20);
  39
  40 ok(ctx.isPointInStroke(21, 21) === false, 'ctx.isPointInStroke(21, 21) === false');
  41 ok(ctx.isPointInStroke(29, 29) === false, 'ctx.isPointInStroke(29, 29) === false');
  42 ok(ctx.isPointInStroke(42, 42) === false, 'ctx.isPointInStroke(42, 42) === false');
  43 ok(ctx.isPointInStroke(50, 50) === false, 'ctx.isPointInStroke(50, 50) === false');
  44
  45 ok(ctx.isPointInStroke(23, 23) === true, 'ctx.isPointInStroke(23, 23) === true');
  46 ok(ctx.isPointInStroke(27, 27) === true, 'ctx.isPointInStroke(27, 27) === true');
  47 ok(ctx.isPointInStroke(43, 43) === true, 'ctx.isPointInStroke(43, 43) === true');
  48 ok(ctx.isPointInStroke(47, 47) === true, 'ctx.isPointInStroke(47, 47) === true');
  49
  50
  51 ctx.beginPath();
  52 ctx.moveTo(25, 25);
  53 ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
  54
  55 ok(ctx.isPointInStroke(23, 26) === false, 'ctx.isPointInStroke(23, 26) === false');
  56 ok(ctx.isPointInStroke(75, 23) === false, 'ctx.isPointInStroke(75, 23) === false');
  57 ok(ctx.isPointInStroke(37, 8) === false, 'ctx.isPointInStroke(37, 8) === false');
  58 ok(ctx.isPointInStroke(61, 42) === false, 'ctx.isPointInStroke(61, 42) === false');
  59
  60 ok(ctx.isPointInStroke(24, 24) === true, 'ctx.isPointInStroke(24, 24) === true');
  61 ok(ctx.isPointInStroke(74, 25) === true, 'ctx.isPointInStroke(74, 25) === true');
  62 ok(ctx.isPointInStroke(37, 2) === true, 'ctx.isPointInStroke(37, 2) === true');
  63 ok(ctx.isPointInStroke(61, 47) === true, 'ctx.isPointInStroke(61, 47) === true');
  64
  65
  66 ctx.beginPath();
  67 ctx.arc(50, 25, 10, 0, Math.PI, false);
  68
  69 ok(ctx.isPointInStroke(39, 23) === false, 'ctx.isPointInStroke(39, 23) === false');
  70 ok(ctx.isPointInStroke(50, 15) === false, 'ctx.isPointInStroke(50, 15) === false');
  71 ok(ctx.isPointInStroke(60, 23) === false, 'ctx.isPointInStroke(60, 23) === false');
  72 ok(ctx.isPointInStroke(50, 25) === false, 'ctx.isPointInStroke(50, 25) === false');
  73
  74 ok(ctx.isPointInStroke(39, 26) === true, 'ctx.isPointInStroke(39, 26) === true');
  75 ok(ctx.isPointInStroke(45, 33) === true, 'ctx.isPointInStroke(45, 33) === true');
  76 ok(ctx.isPointInStroke(53, 33) === true, 'ctx.isPointInStroke(53, 33) === true');
  77 ok(ctx.isPointInStroke(59, 26) === true, 'ctx.isPointInStroke(59, 26) === true');
  78
  79
  80 ctx.beginPath();
  81 ctx.arc(50, 25, 10, 0, 2 * Math.PI, false);
  82
  83 ok(ctx.isPointInStroke(34, 25) === false, 'ctx.isPointInStroke(34, 25) === false');
  84 ok(ctx.isPointInStroke(44, 25) === false, 'ctx.isPointInStroke(44, 25) === false');
  85 ok(ctx.isPointInStroke(49, 30) === false, 'ctx.isPointInStroke(49, 30) === false');
  86 ok(ctx.isPointInStroke(49, 40) === false, 'ctx.isPointInStroke(49, 40) === false');
  87
  88 ok(ctx.isPointInStroke(39, 23) === true, 'ctx.isPointInStroke(39, 23) === true');
  89 ok(ctx.isPointInStroke(50, 15) === true, 'ctx.isPointInStroke(50, 15) === true');
  90 ok(ctx.isPointInStroke(60, 23) === true, 'ctx.isPointInStroke(60, 23) === true');
  91 ok(ctx.isPointInStroke(49, 34) === true, 'ctx.isPointInStroke(49, 34) === true');
  92
  93
  94 ctx.beginPath();
  95 ctx.save();
  96 ctx.translate(20, 20);
  97 ctx.rect(0, 0, 20, 20);
  98
  99 ok(ctx.isPointInStroke(16, 16) === false, 'ctx.isPointInStroke(16, 16) === false');
 100 ok(ctx.isPointInStroke(24, 24) === false, 'ctx.isPointInStroke(24, 24) === false');
 101 ok(ctx.isPointInStroke(36, 36) === false, 'ctx.isPointInStroke(36, 36) === false');
 102 ok(ctx.isPointInStroke(44, 44) === false, 'ctx.isPointInStroke(44, 44) === false');
 103
 104 ok(ctx.isPointInStroke(18, 18) === true, 'ctx.isPointInStroke(18, 18) === true');
 105 ok(ctx.isPointInStroke(22, 22) === true, 'ctx.isPointInStroke(22, 22) === true');
 106 ok(ctx.isPointInStroke(38, 38) === true, 'ctx.isPointInStroke(38, 38) === true');
 107 ok(ctx.isPointInStroke(42, 42) === true, 'ctx.isPointInStroke(42, 42) === true');
 108
 109 ctx.restore();
 110
 111
 112 ctx.beginPath();
 113 ctx.save();
 114 ctx.scale(-1, 1);
 115 ctx.rect(-30, 20, 20, 20);
 116
 117 ok(ctx.isPointInStroke(16, 16) === false, 'ctx.isPointInStroke(16, 16) === false');
 118 ok(ctx.isPointInStroke(14, 24) === false, 'ctx.isPointInStroke(14, 24) === false');
 119 ok(ctx.isPointInStroke(26, 36) === false, 'ctx.isPointInStroke(26, 36) === false');
 120 ok(ctx.isPointInStroke(34, 44) === false, 'ctx.isPointInStroke(34, 44) === false');
 121
 122 ok(ctx.isPointInStroke(8, 18) === true, 'ctx.isPointInStroke(8, 18) === true');
 123 ok(ctx.isPointInStroke(12, 22) === true, 'ctx.isPointInStroke(12, 22) === true');
 124 ok(ctx.isPointInStroke(28, 38) === true, 'ctx.isPointInStroke(28, 38) === true');
 125 ok(ctx.isPointInStroke(32, 42) === true, 'ctx.isPointInStroke(32, 42) === true');
 126
 127 ctx.restore();
 128
 129
 130 ctx.beginPath();
 131 ctx.save();
 132 ctx.lineWidth = 2;
 133 ctx.translate(50, 25);
 134 ctx.rotate(180 * Math.PI / 180);
 135 ctx.scale(5, 5);
 136 ctx.arc(0, 0, 2, 0, Math.PI, false);
 137
 138 ok(ctx.isPointInStroke(39, 26) === false, 'ctx.isPointInStroke(39, 26) === false');
 139 ok(ctx.isPointInStroke(45, 33) === false, 'ctx.isPointInStroke(45, 33) === false');
 140 ok(ctx.isPointInStroke(53, 33) === false, 'ctx.isPointInStroke(53, 33) === false');
 141 ok(ctx.isPointInStroke(59, 26) === false, 'ctx.isPointInStroke(59, 26) === false');
 142
 143 ok(ctx.isPointInStroke(39, 23) === true, 'ctx.isPointInStroke(39, 23) === true');
 144 ok(ctx.isPointInStroke(45, 15) === true, 'ctx.isPointInStroke(50, 15) === true');
 145 ok(ctx.isPointInStroke(55, 15) === true, 'ctx.isPointInStroke(50, 25) === true');
 146 ok(ctx.isPointInStroke(60, 23) === true, 'ctx.isPointInStroke(60, 23) === true');
 147
 148 ctx.restore();
 149
 150
 151 ctx.beginPath();
 152
 153 ctx.moveTo(10, 10);
 154 ctx.lineTo(30, 10);
 155 ctx.save();
 156 ctx.lineWidth = 2;
 157 ctx.scale(5, 5);
 158 ctx.lineTo(6, 6);
 159 ctx.lineTo(2, 6);
 160 ctx.restore();
 161 ctx.closePath();
 162
 163 ok(ctx.isPointInStroke(6, 6) === false, 'ctx.isPointInStroke(6, 6) === false');
 164 ok(ctx.isPointInStroke(14, 14) === false, 'ctx.isPointInStroke(14, 14) === false');
 165 ok(ctx.isPointInStroke(26, 26) === false, 'ctx.isPointInStroke(26, 26) === false');
 166 ok(ctx.isPointInStroke(34, 34) === false, 'ctx.isPointInStroke(34, 34) === false');
 167
 168 ok(ctx.isPointInStroke(8, 8) === true, 'ctx.isPointInStroke(8, 8) === true');
 169 ok(ctx.isPointInStroke(12, 12) === true, 'ctx.isPointInStroke(12, 12) === true');
 170 ok(ctx.isPointInStroke(28, 28) === true, 'ctx.isPointInStroke(28, 28) === true');
 171 ok(ctx.isPointInStroke(32, 32) === true, 'ctx.isPointInStroke(32, 32) === true');
 172
 173
 174 ctx.beginPath();
 175 ctx.rect(-30, -30, 20, 20);
 176
 177 ok(ctx.isPointInStroke(-34, -34) === false, 'ctx.isPointInStroke(-34, -34) === false');
 178 ok(ctx.isPointInStroke(-26, -26) === false, 'ctx.isPointInStroke(-26, -26) === false');
 179 ok(ctx.isPointInStroke(-14, -14) === false, 'ctx.isPointInStroke(-14, -14) === false');
 180 ok(ctx.isPointInStroke(-6, -6) === false, 'ctx.isPointInStroke(-6, -6) === false');
 181
 182 ok(ctx.isPointInStroke(-32, -32) === true, 'ctx.isPointInStroke(-32, -32) === true');
 183 ok(ctx.isPointInStroke(-28, -28) === true, 'ctx.isPointInStroke(-28, -28) === true');
 184 ok(ctx.isPointInStroke(-12, -12) === true, 'ctx.isPointInStroke(-12, -12) === true');
 185 ok(ctx.isPointInStroke(-8, -8) === true, 'ctx.isPointInStroke(-8, -8) === true');
 186
 187
 188 ctx.beginPath();
 189 ctx.moveTo(20, 25);
 190 ctx.lineTo(80, 25);
 191
 192 ok(ctx.isPointInStroke(19, 25) === false, 'ctx.isPointInStroke(19, 25) === false');
 193 ok(ctx.isPointInStroke(50, 21) === false, 'ctx.isPointInStroke(50, 21) === false');
 194 ok(ctx.isPointInStroke(81, 25) === false, 'ctx.isPointInStroke(81, 25) === false');
 195 ok(ctx.isPointInStroke(50, 29) === false, 'ctx.isPointInStroke(50, 29) === false');
 196
 197 ok(ctx.isPointInStroke(21, 25) === true, 'ctx.isPointInStroke(21, 25) === true');
 198 ok(ctx.isPointInStroke(50, 23) === true, 'ctx.isPointInStroke(50, 23) === true');
 199 ok(ctx.isPointInStroke(79, 25) === true, 'ctx.isPointInStroke(79, 25) === true');
 200 ok(ctx.isPointInStroke(50, 27) === true, 'ctx.isPointInStroke(50, 27) === true');
 201
 202
 203 ctx.lineWidth = 15;
 204 ctx.lineCap = 'round';
 205
 206
 207 ctx.beginPath();
 208 ctx.moveTo(20, 25);
 209 ctx.lineTo(80, 25);
 210
 211 ok(ctx.isPointInStroke(13, 18) === false, 'ctx.isPointInStroke(13, 18) === false');
 212 ok(ctx.isPointInStroke(13, 31) === false, 'ctx.isPointInStroke(13, 31) === false');
 213 ok(ctx.isPointInStroke(86, 18) === false, 'ctx.isPointInStroke(86, 18) === false');
 214 ok(ctx.isPointInStroke(86, 31) === false, 'ctx.isPointInStroke(86, 31) === false');
 215
 216 ok(ctx.isPointInStroke(13, 25) === true, 'ctx.isPointInStroke(13, 25) === true');
 217 ok(ctx.isPointInStroke(50, 18) === true, 'ctx.isPointInStroke(50, 18) === true');
 218 ok(ctx.isPointInStroke(86, 25) === true, 'ctx.isPointInStroke(86, 25) === true');
 219 ok(ctx.isPointInStroke(50, 31) === true, 'ctx.isPointInStroke(50, 31) === true');
 220
 221
 222 ctx.lineJoin = 'round';
 223
 224
 225 ctx.beginPath();
 226 ctx.moveTo(20, 15);
 227 ctx.lineTo(80, 15);
 228 ctx.lineTo(80, 35);
 229
 230 ok(ctx.isPointInStroke(86, 8) === false, 'ctx.isPointInStroke(86, 8) === false');
 231 ok(ctx.isPointInStroke(70, 24) === false, 'ctx.isPointInStroke(70, 24) === false');
 232 ok(ctx.isPointInStroke(73, 41) === false, 'ctx.isPointInStroke(73, 41) === false');
 233 ok(ctx.isPointInStroke(86, 41) === false, 'ctx.isPointInStroke(86, 41) === false');
 234
 235 ok(ctx.isPointInStroke(14, 15) === true, 'ctx.isPointInStroke(14, 15) === true');
 236 ok(ctx.isPointInStroke(81, 15) === true, 'ctx.isPointInStroke(81, 15) === true');
 237 ok(ctx.isPointInStroke(79, 41) === true, 'ctx.isPointInStroke(79, 41) === true');
 238 ok(ctx.isPointInStroke(73, 21) === true, 'ctx.isPointInStroke(73, 21) === true');
 239
 240 </script>
 241 </pre>
 242 </body>
 243 </html>
 244