drawFocusIfNeeded_001.html (2434B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>drawFocusIfNeeded()</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="author" title="W3C"> 8 <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded"> 9 </head> 10 <body> 11 <h1>Description</h1> 12 <p>This test uses drawFocusIfNeeded to draw a focus ring in the canvas, then compare the ImageData before and after the invocation of the method to check that the focus ring was actually drawn.</p> 13 <div> 14 <p>Before:</p> 15 <canvas height=100 width=100 id='original'> 16 </canvas> 17 <p>After:</p> 18 <canvas height=100 width=100 id=canvas> 19 <label><a href='http://www.w3.org' id='element'>Focus</a></label> 20 </canvas> 21 </div> 22 <script> 23 test(function() { 24 var canvas = document.getElementById('canvas'); 25 var context = canvas.getContext('2d'); 26 var element = document.getElementById('element'); 27 element.focus(); 28 context.fillStyle = 'white'; 29 context.fillRect(0, 0, 100, 100); 30 context.beginPath(); 31 context.strokeStyle = 'black'; 32 context.rect(10, 10, 80, 80); 33 context.stroke(); 34 context.save(); 35 var refImage = context.getImageData(0, 0, 100, 100); 36 37 assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000"); 38 39 var original = document.getElementById('original'); 40 var o_context = original.getContext('2d'); 41 o_context.fillStyle = 'white'; 42 o_context.fillRect(0, 0, 100, 100); 43 o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100); 44 45 context.rect(5, 5, 90, 90); 46 context.drawFocusIfNeeded(element); 47 48 var ringImage = context.getImageData(0, 0, 100, 100); 49 assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000"); 50 51 // make sure refImage and ringImage are different 52 var length = 40000; 53 var index = length; 54 var identical = true; 55 while (--index > 0) { 56 if (refImage.data[index] != ringImage.data[index]) identical = false; 57 } 58 59 assert_false(identical, "The focus ring must appear in the canvas"); 60 61 62 }, 'drawFocusIfNeeded draws a focus ring.'); 63 </script> 64 <div id="log"></div> 65 </body> 66 </html>