drawFocusIfNeeded_003.html (2465B)
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 a descendant but comparing ImageData from before and after.</p> 13 <div> 14 <p>Before:</p> 15 <canvas height=100 width=100 id='original'> 16 <label><a href='http://www.w3.org' id='element'>Focus</a></label> 17 </canvas> 18 <p>After:</p> 19 <canvas height=100 width=100 id=canvas> 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 46 47 context.strokeStyle = 'blue'; 48 context.rect(5, 5, 90, 90); 49 context.drawFocusIfNeeded(element); 50 51 var ringImage = context.getImageData(0, 0, 100, 100); 52 assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000"); 53 54 // make sure refImage and ringImage are different 55 var length = 40000; 56 var index = length; 57 var identical = true; 58 while (--index > 0) { 59 if (refImage.data[index] != ringImage.data[index]) identical = false; 60 } 61 62 assert_true(identical, "No focus ring appears in the canvas"); 63 64 65 }, 'drawFocusIfNeeded does not draw a focus ring if the element is not a descendant of the context.'); 66 </script> 67 <div id="log"></div> 68 </body> 69 </html>