<!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>