summaryrefslogtreecommitdiffstats
path: root/accessible/tests/mochitest/hittest/test_canvas_hitregion.html
blob: fc1df3d60fd38e5af9a2d08d95482e89cfe30d74 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
  <title>nsIAccessible::childAtPoint() for canvas from browser tests</title>
  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../layout.js"></script>

  <script type="application/javascript">
    function redrawCheckbox(context, element, x, y)
    {
      context.save();
      context.font = '10px sans-serif';
      context.textAlign = 'left';
      context.textBaseline = 'middle';
      var metrics = context.measureText(element.parentNode.textContent);
      context.beginPath();
      context.strokeStyle = 'black';
      context.rect(x-5, y-5, 10, 10);
      context.stroke();
      if (element.checked) {
        context.fillStyle = 'black';
        context.fill();
      }
      context.fillText(element.parentNode.textContent, x+5, y);

      context.beginPath();
      context.rect(x-7, y-7, 12 + metrics.width+2, 14);

      if (document.activeElement == element)
        context.drawFocusIfNeeded(element);
      context.addHitRegion({control: element});
      context.restore();
    }

    function doTest()
    {
      var offsetX = 20, offsetY = 40;
      getNode("hitcanvas").scrollIntoView(true);

      var context = document.getElementById("hitcanvas").getContext('2d');
      redrawCheckbox(context, document.getElementById('hitcheck'),
                     offsetX, offsetY);

      var hitcanvas = getAccessible("hitcanvas");
      var hitcheck = getAccessible("hitcheck");

      var [hitX, hitY, hitWidth, hitHeight] = getBounds(hitcanvas);
      var [deltaX, deltaY] = CSSToDevicePixels(window, offsetX, offsetY);

      var docAcc = getAccessible(document);

      // test if we hit the region associated with the shadow dom checkbox
      var tgtX = hitX + deltaX;
      var tgtY = hitY + deltaY;
      hitAcc = docAcc.getDeepestChildAtPoint(tgtX, tgtY);
      isObject(hitAcc, hitcheck, `Hit match at (${tgtX}, ${tgtY}`);

      // test that we don't hit the region associated with the shadow dom checkbox
      tgtY = hitY + deltaY * 2;
      hitAcc = docAcc.getDeepestChildAtPoint(tgtX, tgtY);
      isObject(hitAcc, hitcanvas, `Hit match at (${tgtX}, ${tgtY}`);

      SimpleTest.finish();
    }
    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(function() {
      SpecialPowers.pushPrefEnv({"set": [['canvas.hitregions.enabled', true]]}, doTest);
    });
 </script>
</head>
<body>

  <a target="_blank"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=966591"
     title="nsIAccessible::childAtPoint() for canvas hit regions from browser tests">Mozilla Bug 966591</a>

  <canvas id="hitcanvas">
    <input id="hitcheck" type="checkbox"><label for="showA"> Show A </label>
  </canvas>
</body>
</html>