1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>drawSystemFocusRing() dirty rect test</title> 5 <script src="../../resources/js-test.js"></script> 6 </head> 7 <body> 8 <p>This test is passed if result1 is exactly the same with result2.</p> 9 <p> 10 <button id="result1">Result1</button> 11 <button id="result2">Result2</button> 12 </p> 13 <canvas id="canvas" class="output" width="300" height="300"> 14 <button id="button"></button> 15 </canvas> 16 <script> 17 18 var canvas = document.getElementById("canvas"); 19 var context = canvas.getContext("2d"); 20 var button = document.getElementById("button"); 21 var result1 = document.getElementById("result1"); 22 var result2 = document.getElementById("result2"); 23 24 function drawResult(separateFrame) { 25 26 button.focus(); 27 28 requestAnimationFrame(function() { 29 context.beginPath(); 30 context.rect(0, 0, 300, 300); 31 context.fill(); 32 33 context.beginPath(); 34 context.rect(50, 50, 200, 100); 35 36 if (separateFrame) 37 requestAnimationFrame(function() { 38 context.drawSystemFocusRing(button); 39 }); 40 else 41 context.drawSystemFocusRing(button); 42 }); 43 } 44 45 result1.addEventListener("click", function() { 46 drawResult(false); 47 }, false); 48 49 result2.addEventListener("click", function() { 50 drawResult(true); 51 }, false); 52 53 </script> 54 </body> 55 </html> 56
