drawFocusIfNeeded_002.html (2415B)
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 does nothing if the element is not in focus but comparing ImageData from before and after.</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 context.fillStyle = 'white'; 28 context.fillRect(0, 0, 100, 100); 29 context.beginPath(); 30 context.strokeStyle = 'black'; 31 context.rect(10, 10, 80, 80); 32 context.stroke(); 33 context.save(); 34 var refImage = context.getImageData(0, 0, 100, 100); 35 36 assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000"); 37 38 var original = document.getElementById('original'); 39 var o_context = original.getContext('2d'); 40 o_context.fillStyle = 'white'; 41 o_context.fillRect(0, 0, 100, 100); 42 o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100); 43 44 45 46 context.strokeStyle = 'blue'; 47 context.rect(5, 5, 90, 90); 48 context.drawFocusIfNeeded(element); 49 50 var ringImage = context.getImageData(0, 0, 100, 100); 51 assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000"); 52 53 // make sure refImage and ringImage are different 54 var length = 40000; 55 var index = length; 56 var identical = true; 57 while (--index > 0) { 58 if (refImage.data[index] != ringImage.data[index]) identical = false; 59 } 60 61 assert_true(identical, "No focus ring appears in the canvas"); 62 63 64 }, 'drawFocusIfNeeded does not draw a focus ring if the element is not in focus.'); 65 </script> 66 <div id="log"></div> 67 </body> 68 </html>