Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: a50b8dadb93e9a7a20d2e31a7e5d0449ce37cd2c authored by Harald Alvestrand on 22 March 2018, 18:59:43 UTC
Add memory of last SDP offer/answer created
Tip revision: a50b8da
canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html 
<html>
  <head>
    <meta charset="UTF-8">
    <title>drawFocusIfNeeded() - AAPI test</title>
    <link rel="author" title="Mark Sadecki" href="mark@w3.org">
    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">

  </head>
  <body>
    <h1>Description</h1>
    <p>This manual test can be used to verify that drawFocusIfNeeded actually updates the accessible location information (i.e. UIAutomation's CurrentBoundingRectangle) in the Accessibility API.  To perform this test, you will need an <a href="http://www.w3.org/WAI/PF/wiki/ARIA_Test_Plan#Test_tools">accessibility API inspector</a>.  To perform this test, use the <code>tab</code> key to move from the first focusable element to through to the fourth.  This test passes if the first parameter of the bounding rectangle increases by 100 when focus is moved from the gray square to the orange square.</p>
    <p><a href="http://www.w3.org">First focusable element</a></p>
    <canvas height=100 width=200 id=canvas>
      <a href='http://www.w3.org' id='button1'>Second focusable element</a>
      <a href='http://www.w3.org' id='button2'>Third focusable element</a>
    </canvas>
    <p><a href="http://www.w3.org">Fourth focusable element</a></p>

    <script>
        var button1 = document.getElementById('button1');
        var button2 = document.getElementById('button2');
        var canvas = document.getElementById('canvas');
        var buttons = canvas.getElementsByTagName('a');

        for (var i = 0; i < buttons.length; i++) {
          buttons[i].addEventListener('focus', drawCanvas, false);
          buttons[i].addEventListener('blur', drawCanvas, false);
        }

        function drawRect(context, color, element) {
          context.beginPath();
          context.rect(10, 10, 80, 80);
          context.fillStyle = color;
          context.fill();
          context.drawFocusIfNeeded(element);
        }

        function drawCanvas() {
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          context.clearRect (0, 0, 200, 100);

          drawRect(context, "gray", button1);
          context.translate(100,0);
          drawRect(context, "orange", button2);
        }
        drawCanvas();
    </script>
  </body>
</html>
back to top