dom/canvas/test/test_hitregion_event.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <title>Test click events on canvas hit regions</title>
   5   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   6   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   8 </head>
   9 <body>
  10 <p id="display">
  11 <canvas id="input">
  12 </canvas>
  13 </p>
  14 <div id="content" style="display: none">
  15
  16 </div>
  17 <pre id="test">
  18 <script type="application/javascript">
  19 SpecialPowers.pushPrefEnv({"set": [["canvas.hitregions.enabled", true]]}, function() {
  20
  21   var input = document.getElementById("input");
  22   var regionId = "";
  23   input.addEventListener('mousedown', function(evt){
  24     regionId = evt.region;
  25   })
  26
  27   function runTests()
  28   {
  29     try {
  30       var ctx = input.getContext("2d");
  31       ctx.beginPath();
  32       ctx.rect(20, 20, 100, 75);
  33       ctx.fill();
  34       ctx.addHitRegion({id: "a"});
  35       ctx.beginPath();
  36       ctx.fillStyle = "red";
  37       ctx.rect(60, 40, 100, 75);
  38       ctx.fill();
  39       ctx.addHitRegion({id: "b"});
  40       ctx.beginPath();
  41       ctx.fillStyle = "yellow";
  42       ctx.rect(80, 60, 10, 10);
  43       ctx.fill();
  44       ctx.addHitRegion({id: "c"});
  45
  46       synthesizeMouse(input, 25,25, {type: "mousedown"});
  47       is(regionId, "a", "Hit region a", ". Found: " + regionId);
  48
  49       synthesizeMouse(input, 5,5, {type: "mousedown", button: 1});
  50       is(regionId, "", "Hit region null", ". Found: " + regionId);
  51
  52       synthesizeMouse(input, 65,45, {type: "mousedown"});
  53       is(regionId, "b", "Hit region b", ". Found: " + regionId);
  54
  55       synthesizeMouse(input, 85,65, {type: "mousedown"});
  56       is(regionId, "c", "Hit region c", ". Found: " + regionId);
  57
  58       ctx.removeHitRegion("c");
  59       synthesizeMouse(input, 85,65, {type: "mousedown"});
  60       is(regionId, "b", "Hit region b", ". Found: " + regionId);
  61     } catch (e) {
  62       ok(false, "unexpected exception thrown: " + e);
  63     }
  64
  65     SimpleTest.finish();
  66   }
  67
  68   runTests();
  69 });
  70
  71 SimpleTest.waitForExplicitFinish();
  72
  73
  74 </script>
  75 </pre>
  76 </body>
  77 </html>