drawFocusIfNeeded_004.html (2937B)
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 complex path focus then compare 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 element.focus(); 28 context.fillStyle = 'white'; 29 context.fillRect(0, 0, 100, 100); 30 context.beginPath(); 31 context.strokeStyle = 'black'; 32 33 context.moveTo(10, 40); 34 context.lineTo(50, 10); 35 context.lineTo(90, 40); 36 context.lineTo(70, 40); 37 context.lineTo(70, 90); 38 context.lineTo(30, 90); 39 context.lineTo(30, 40); 40 context.closePath(); 41 42 context.stroke(); 43 context.save(); 44 var refImage = context.getImageData(0, 0, 100, 100); 45 46 assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000"); 47 48 var original = document.getElementById('original'); 49 var o_context = original.getContext('2d'); 50 o_context.fillStyle = 'white'; 51 o_context.fillRect(0, 0, 100, 100); 52 o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100); 53 54 55 56 context.beginPath(); 57 context.moveTo(5, 40); 58 context.lineTo(50, 5); 59 context.lineTo(95, 40); 60 context.lineTo(95, 45); 61 context.lineTo(75, 45); 62 context.lineTo(75, 95); 63 context.lineTo(25, 95); 64 context.lineTo(25, 45); 65 context.lineTo(5, 45); 66 context.closePath(); 67 68 context.drawFocusIfNeeded(element); 69 70 var ringImage = context.getImageData(0, 0, 100, 100); 71 assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000"); 72 73 // make sure refImage and ringImage are different 74 var length = 40000; 75 var index = length; 76 var identical = true; 77 while (--index > 0) { 78 if (refImage.data[index] != ringImage.data[index]) identical = false; 79 } 80 81 assert_false(identical, "A focus ring appears in the canvas"); 82 83 84 }, 'drawFocusIfNeeded does draw a focus ring if the element is in focus.'); 85 </script> 86 <div id="log"></div> 87 </body> 88 </html>