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: b6d437037393dc8b289bfb3504fc21a808760be3 authored by Michael[tm] Smith on 23 March 2018, 10:42:57 UTC
cc Update messages.json
Tip revision: b6d4370
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