test_canvas_focusring.html (2332B)
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>