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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Canvas Hit Regions: basic test</title>
   5   <script src="../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <canvas id="canvas" width="400" height="400">
   9   <button id="face"></button>
  10   <button id="eyes"></button>
  11 </canvas>
  12 <script src="./resources/canvas-hit-region-event.js"></script>
  13 <script>
  14
  15   var canvas = document.getElementById("canvas");
  16   var context = canvas.getContext("2d");
  17
  18   context.fillStyle = "pink";
  19   context.arc(200, 175, 150, 0, Math.PI * 2, true);
  20   context.fill();
  21   context.addHitRegion({ id : "face", control : document.getElementById("face") });
  22
  23   context.beginPath();
  24   context.fillStyle = "black";
  25   context.globalAlpha = .5;
  26   context.moveTo(200, 165);
  27   context.lineTo(240, 205);
  28   context.lineTo(160, 205);
  29   context.closePath();
  30   context.fill();
  31   context.addHitRegion({ id : "nose" });
  32
  33   context.beginPath();
  34   context.fillStyle = "red";
  35   context.rect(125, 240, 150, 20);
  36   context.fill();
  37   context.addHitRegion({ id : "mouth" });
  38
  39   context.beginPath();
  40   context.globalAlpha = 1;
  41   context.fillStyle = "blue";
  42   context.arc(150, 125, 25, 0, Math.PI * 2, true);
  43   context.arc(250, 125, 25, 0, Math.PI * 2, true);
  44   context.fill();
  45   context.addHitRegion({ id: "eye", control : document.getElementById("eyes") });
  46
  47   debug("Hit detection and mouse event tests");
  48   shouldBe("clickCanvas(100, 100)", "'face'");
  49   shouldBe("clickCanvas(200, 200)", "'nose'");
  50   shouldBe("clickCanvas(127, 242)", "'mouth'");
  51   shouldBe("clickCanvas(150, 125)", "'eye'");
  52   shouldBe("clickCanvas(250, 125)", "'eye'");
  53   shouldBe("clickCanvas(200, 125)", "'face'");
  54   shouldBe("clickCanvas(20, 10)", "null");
  55   debug("");
  56
  57   debug("Hit detection and mouse/touch event tests with CSS sizing");
  58   canvas.style.width = "220px";
  59   canvas.style.height = "220px";
  60   shouldBe("clickCanvas(100, 100)", "'face'");
  61   shouldBe("clickCanvas(200, 200)", "'nose'");
  62   shouldBe("clickCanvas(127, 242)", "'no event sent to canvas'");
  63   shouldBe("clickCanvas(150, 125)", "'eye'");
  64   shouldBe("clickCanvas(250, 125)", "'no event sent to canvas'");
  65   shouldBe("clickCanvas(200, 125)", "'face'");
  66   shouldBe("clickCanvas(20, 10)", "null");
  67   canvas.style.width = "400px";
  68   canvas.style.height = "400px";
  69   debug("");
  70
  71   debug("Hit detection and mouse/touch event tests with adjusted pixel ratio");
  72   eventSender.setPageZoomFactor(0.5);
  73   shouldBe("clickCanvas(50, 50)", "'face'");
  74   shouldBe("clickCanvas(100, 100)", "'nose'");
  75   shouldBe("clickCanvas(64, 121)", "'mouth'");
  76   shouldBe("clickCanvas(75, 63)", "'eye'");
  77   shouldBe("clickCanvas(125, 63)", "'eye'");
  78   shouldBe("clickCanvas(100, 63)", "'face'");
  79   shouldBe("clickCanvas(10, 5)", "null");
  80   eventSender.setPageZoomFactor(1);
  81   debug("");
  82
  83   debug("Hit detection and mouse/touch event tests with adjusted page scale factor");
  84   window.internals.setPageScaleFactorLimits(0.5, 0.5);
  85   window.internals.setPageScaleFactor(0.5);
  86   shouldBe("clickCanvas(50, 50, 0.5)", "'face'");
  87   shouldBe("clickCanvas(100, 100, 0.5)", "'nose'");
  88   shouldBe("clickCanvas(64, 121, 0.5)", "'mouth'");
  89   shouldBe("clickCanvas(75, 63, 0.5)", "'eye'");
  90   shouldBe("clickCanvas(125, 63, 0.5)", "'eye'");
  91   shouldBe("clickCanvas(100, 63, 0.5)", "'face'");
  92   shouldBe("clickCanvas(10, 5, 0.5)", "null");
  93   window.internals.setPageScaleFactorLimits(1, 1);
  94   window.internals.setPageScaleFactor(1);
  95   debug("");
  96
  97   debug("NotSupportedError exception tests");
  98   shouldThrow("context.addHitRegion()");
  99   shouldThrow("context.addHitRegion({ id : '' })");
 100   shouldThrow("context.addHitRegion({ id : undefined })");
 101   shouldThrow("context.addHitRegion({ control : {} })");
 102   shouldThrow("context.addHitRegion({ control : null })");
 103   shouldThrow("context.addHitRegion({ control : undefined })");
 104   shouldThrow("context.addHitRegion({ id : '', control : {} })");
 105   shouldThrow("context.addHitRegion({ id : undefined, control : {} })");
 106   shouldThrow("context.addHitRegion({ id : '', control : null })");
 107   shouldThrow("context.addHitRegion({ id : undefined, control : null })");
 108   shouldThrow("context.addHitRegion({ id : '', control : undefined })");
 109   shouldThrow("context.addHitRegion({ id : undefined, control : undefined })");
 110   debug("");
 111
 112 </script>
 113 </body>
 114 </html>