blob: e5d8b6f4b348ec8a5044cb81fc288e0ef80cec53 [file] [log] [blame]
<!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>