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