| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>drawFocusIfNeeded()</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="author" title="W3C"> |
| <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded"> |
| </head> |
| <body> |
| <h1>Description</h1> |
| <p>This test uses drawFocusIfNeeded to draw a complex path focus then compare ImageData from before and after.</p> |
| <div> |
| <p>Before:</p> |
| <canvas height=100 width=100 id='original'> |
| </canvas> |
| <p>After:</p> |
| <canvas height=100 width=100 id=canvas> |
| <p id='element' tabindex='1'>This is text.</p> |
| </canvas> |
| </div> |
| <script> |
| test(function() { |
| var canvas = document.getElementById('canvas'); |
| var context = canvas.getContext('2d'); |
| var element = document.getElementById('element'); |
| element.focus(); |
| context.fillStyle = 'white'; |
| context.fillRect(0, 0, 100, 100); |
| context.beginPath(); |
| context.strokeStyle = 'black'; |
| |
| context.moveTo(10, 40); |
| context.lineTo(50, 10); |
| context.lineTo(90, 40); |
| context.lineTo(70, 40); |
| context.lineTo(70, 90); |
| context.lineTo(30, 90); |
| context.lineTo(30, 40); |
| context.closePath(); |
| |
| context.stroke(); |
| context.save(); |
| var refImage = context.getImageData(0, 0, 100, 100); |
| |
| assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000"); |
| |
| var original = document.getElementById('original'); |
| var o_context = original.getContext('2d'); |
| o_context.fillStyle = 'white'; |
| o_context.fillRect(0, 0, 100, 100); |
| o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100); |
| |
| |
| |
| context.beginPath(); |
| context.moveTo(5, 40); |
| context.lineTo(50, 5); |
| context.lineTo(95, 40); |
| context.lineTo(95, 45); |
| context.lineTo(75, 45); |
| context.lineTo(75, 95); |
| context.lineTo(25, 95); |
| context.lineTo(25, 45); |
| context.lineTo(5, 45); |
| context.closePath(); |
| |
| context.drawFocusIfNeeded(element); |
| |
| var ringImage = context.getImageData(0, 0, 100, 100); |
| assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000"); |
| |
| // make sure refImage and ringImage are different |
| var length = 40000; |
| var index = length; |
| var identical = true; |
| while (--index > 0) { |
| if (refImage.data[index] != ringImage.data[index]) identical = false; |
| } |
| |
| assert_false(identical, "A focus ring appears in the canvas"); |
| |
| |
| }, 'drawFocusIfNeeded does draw a focus ring if the element is in focus and the user activated a particular focus ring.'); |
| </script> |
| <div id="log"></div> |
| </body> |
| </html> |
