| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>drawSystemFocusRing() dirty rect test</title> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p>This test is passed if result1 is exactly the same with result2.</p> |
| <p> |
| <button id="result1">Result1</button> |
| <button id="result2">Result2</button> |
| </p> |
| <canvas id="canvas" class="output" width="300" height="300"> |
| <button id="button"></button> |
| </canvas> |
| <script> |
| |
| var canvas = document.getElementById("canvas"); |
| var context = canvas.getContext("2d"); |
| var button = document.getElementById("button"); |
| var result1 = document.getElementById("result1"); |
| var result2 = document.getElementById("result2"); |
| |
| function drawResult(separateFrame) { |
| |
| button.focus(); |
| |
| requestAnimationFrame(function() { |
| context.beginPath(); |
| context.rect(0, 0, 300, 300); |
| context.fill(); |
| |
| context.beginPath(); |
| context.rect(50, 50, 200, 100); |
| |
| if (separateFrame) |
| requestAnimationFrame(function() { |
| context.drawSystemFocusRing(button); |
| }); |
| else |
| context.drawSystemFocusRing(button); |
| }); |
| } |
| |
| result1.addEventListener("click", function() { |
| drawResult(false); |
| }, false); |
| |
| result2.addEventListener("click", function() { |
| drawResult(true); |
| }, false); |
| |
| </script> |
| </body> |
| </html> |