dom/canvas/test/test_canvas_focusring.html

   1 <!DOCTYPE HTML>
   2 <title>Canvas Tests</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <script src="/tests/SimpleTest/EventUtils.js"></script>
   5 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   6 <body>
   7 <script>
   8 SimpleTest.waitForExplicitFinish();
   9 </script>
  10
  11 <p>Canvas test: drawFocusIfNeeded</p>
  12 <canvas id="c689" class="output" width="50" height="25">
  13     <input id="button3" type="range" min="1" max="12"></input>
  14     <input id="button4" type="range" min="1" max="12"></input>
  15 </canvas>
  16 <script type="text/javascript">
  17 function isEmptyCanvas(ctx, w, h) {
  18   var imgdata = ctx.getImageData(0, 0, w, h);
  19   for(var x = 0; x < w*h*4; x++)
  20     if(imgdata.data[x] != 0)
  21       return false;
  22   return true;
  23 }
  24
  25 var b1 = document.getElementById('button3');
  26 var b2 = document.getElementById('button4');
  27
  28 function test_drawFocusIfNeeded_canvas() {
  29   var c = document.getElementById("c689");
  30   var ctx = c.getContext("2d");
  31   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  32   ctx.beginPath();
  33   ctx.rect(10, 10, 30, 30);
  34   ctx.drawFocusIfNeeded(b1);
  35   ok(isEmptyCanvas(ctx, ctx.canvas.width, ctx.canvas.height), "focus of button 1 is drawn");
  36
  37   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  38   ctx.beginPath();
  39   ctx.rect(50, 10, 30, 30);
  40   ctx.drawFocusIfNeeded(b2);
  41   ctx.rect(50, 10, 30, 30);
  42   ctx.drawFocusIfNeeded(b2);
  43   ok(isEmptyCanvas(ctx, ctx.canvas.width, ctx.canvas.height), "focus of button 2 is drawn");
  44
  45   b1.focus();
  46   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  47   ctx.beginPath();
  48   ctx.rect(10, 10, 30, 30);
  49   ctx.drawFocusIfNeeded(b1);
  50   ok(!isEmptyCanvas(ctx, ctx.canvas.width, ctx.canvas.height) , "focus of button 1 is not drawn");
  51 }
  52 </script>
  53
  54
  55 <script>
  56
  57 async function runTests() {
  58   await SpecialPowers.pushPrefEnv({
  59     set: [
  60       ["canvas.focusring.enabled", true],
  61       ["browser.display.always_show_rings_after_key_focus", true],
  62     ]
  63   });
  64   await SimpleTest.promiseFocus();
  65   synthesizeKey("KEY_Tab"); // Trigger keyboard navigation so outlines are shown.
  66   synthesizeKey("KEY_Tab", { shiftKey: true }); // And now undo the focus move.
  67   try {
  68     test_drawFocusIfNeeded_canvas();
  69   } catch(e) {
  70     ok(false, "unexpected exception thrown in: test_drawFocusIfNeeded_canvas");
  71     throw e;
  72   }
  73
  74  SimpleTest.finish();
  75 }
  76
  77 addLoadEvent(runTests);
  78
  79 </script>